Visualizzazione scorretta dello sfondo

24-06-2009, 19.18.24

Ciao a tutti, son alle pese con la montatura di layout che mi sta dando un po' di problemi.. l'ultimo arrivato è lo sfondo principale della pagina, ora vi spiego.

La sezione della pagina che mi dà problemi è così strutturata:

<div id="main">
<div id="container">

<div id="sidebar">
Link
Link
Link
</div>

<div id="section">
<h1>Benvenuto!</h1>
</div>

</div>
</div>

Il div main ha un imagine di sfondo impostata con i CSS, e il div container non ha impostazioni per lo sfondo, quindi si dovrebbe visualizzare lo sfondo del box main no? invece non so per quale stra maledetta regola del cascading va a prendere le regole del body O_O

Come posso fare?

link alla pagina: http://ffskingenerator.altervista.org/

EDIT: mi accorgo ora che con internet explorer funziona tutto a meraviglia..

**acsocmel** · 24-06-2009, 22.35.39

Originalmente inviato da arazz

mi accorgo ora che con internet explorer funziona tutto a meraviglia..

questo non vuol dire nulla
sicuramente ti manca un elemento che faccia il clear
il solito problema di chi usa il float

25-06-2009, 19.36.25

e quindi?
a quale elemento assegno il clear? come?

**acsocmel** · 25-06-2009, 19.55.55

dovresti postare anche il css

25-06-2009, 21.19.01

Ho messo il link del sito nel primo post, comunque eccoti il css e l'html..

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it-IT">
<head>
<title>ForumFree Skin Generator - Homepage</title>

<meta name="author" content="arazz" />
<meta name="dscription" content="Un servizio gratuito che permette di creare e personalizzare completamente le proprie skin per forumfree, forumcommunity e blogfree senza dover conoscere html, CSS o altri linguaggi" />
<meta name="keywords" content="homepage,ffskingenerator,forum,free,community,blog,forumfree,forumcommunity,blogfree,skin,theme,tema,layout,generator,generatore,skins,temi,creatore,editor,personalizzare,skinner,ff,bf,fc" />
<meta name="copyright" content="all right riserved" />
<meta name="robots" content="index,follow" />
<meta http-equiv="reply-to" content="ffskingenerator@gmail.com" />

<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" language="JavaScript">
<!--

function rollover() {
  if (!document.getElementById) return
    var imgOriginSrc;
    var imgTemp = new Array();
    var imgarr = document.getElementsByTagName('img');
  for (var i = 0; i < imgarr.length; i++) {
    if (imgarr[i].getAttribute('hsrc')) {
      imgTemp[i] = new Image();
      imgTemp[i].src = imgarr[i].getAttribute('hsrc');
      imgarr[i].onmouseover = function() {
        imgOriginSrc = this.getAttribute('src');
        this.setAttribute('src',this.getAttribute('hsrc'))
        }
      imgarr[i].onmouseout = function() {
      this.setAttribute('src',imgOriginSrc)
      }
    }
  }
}

onload=rollover; //carica la funzione al caricarsi della pagina
-->
</script>

</head>
<body>

<div id="header">
  <div id="header_container">
    <div id="logo">
      <a href="index.php"><img class="logo" src="images/logo.png" hsrc="images/logo_hover.png" alt="ForumFree Skin Generator" /></a>
    </div>
    <div id="header_nav">
      <a href="contact.php" class="header_link">Contact</a>

      <a href="about.php" class="header_link">About</a>
      <a href="http://ffskingenerator.forumfree.net" class="header_link">Forum</a>
      <a href="generator.php" class="header_link">Generator</a>
      <a href="index.php" class="header_link">Home</a>
    </div>
  </div>
</div>

<div id="header_stripes">

</div>


<div id="main">
  <div id="container">
  
    <div id="sidebar">
    <ul>
    <li><a href="index.php">Homepage</a></li>
    <li><a href="news.php">News e aggiornamenti</a></li>

    <li><a href="generator.php">Skin Generator</a></li>
    <li><a href="resources.php">Risorse</a></li>
    <li><a href="http://ffskingenerator.forumfree.net">Forum</a></li>
    <li><a href="about.php">About</a></li>
    <li><a href="contact.php">Contact</a></li>
    </ul>

    </div>
    
    <div id="section">
    <h1>Benvenuto!</h1>
    </div>
    
  </div>
</div>
</body>
</html>

Codice:

/* GENERAL STYLES 
  **************************************** */

body {
background-color: #EBE3CD;
color: #2A1F00;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 20px;
text-align: left;
margin: 0; padding: 0;
}

h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-bottom: 10px;
color: #2A1F00;
}

/* LINKS */
a:link, a:visited {
color: #140F00;
text-decoration: underline;
}

a:hover {
color: #9DCE39;
text-decoration: underline;
}

a:active {
color: #9DCE39;
text-decoration: underline;
}

/* INPUT */
input {
background-color: #F1EBDC;
color: #2A1F00;
font-family: sans-serif;
font-size: 12px;
border: 1px solid #C6B896;
}

input:hover {
background-color: #C6B896;
border: 1px solid #F1EBDC;
}

input:focus {
background-color: #FCF6E6;
border: #FFFFFF;
}


/* STRUTTURA
  **************************************** */

/* HEADER */

div#header {
width: 100%;
height: 69px;
background: #00425A url(../images/header_mainbg.png) repeat-x scroll top left;
color: #C8DFE7;
margin: 0; padding: 0; border: 0;
}

div#header_container {
height: 69px;
width: 940px;
padding: 0px 10px 0px 10px;
margin: 0 auto;
}

#logo {
width: 300px;
float: left;
padding: 0; margin: 0;
}

.logo {
padding: 0; margin: 0;
border: 0;
background: transparent none;
}

#header_nav {
width: 585px;
float: left;
padding: 0; margin: 0;
background: #00425A url(../images/header_mainbg.png) repeat-x scroll center;
}

#header_nav  a:link, #header_nav a:visited {
font-size: 18px;
color: #C8DFE7;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
}

#header_nav  a:hover {
color: #9DCE39;
text-decoration: none;
background-color: #00425A;
background-image: url(../images/header_hoverbg.png);
background-repeat: no-repeat;
background-position: top center;
}

#header_nav  a:active {
color: #C8DFE7;
text-decoration: none;
background: #00425A url(../images/header_hoverbg.png) no-repeat scroll top center;
}

.header_link{
display: block;
float: right;
padding: 22px 10px 27px 10px;
margin: 0px 5px 0px 5px;
}

div#header_stripes  {
width: 100%;
height: 13px;
background: #005B7C url(../images/header_stripes.png) repeat-x scroll top left;
margin: 0; padding: 0;
}

/* CORPO */

div#main {
background: #EBE3CD url(../images/main_bg.png) no-repeat scroll top left;
width: 100%;
padding: 0; margin: 0;
}


div#container {
width: 960px;
padding: 20px 0px 0px 0px;
margin: 0px auto 0px auto;
}

/* BARRA LATERALE */

div#sidebar {
background: transparent url(../images/sidebar_bg.png) repeat scroll top left;
width: 260px;
padding: 10px;
margin: 0px 20px 0px 0px;
float: left;
}

#sidebar ul { 
margin: 0px 20px 0px 5px; 
padding: 0px 0px 20px 0px; 
list-style-type:none;
}		

#sidebar ul li {
margin-bottom: 10px;
}

#sidebar ul li a:link, #sidebar ul li a:visited {
color: #2A1F00;
text-decoration: none;
height: 20px;
line-height: 20px;
border: 0;
background-color: transparent;
margin: 0px;
padding: 5px;
display: block;
}

#sidebar ul li a:hover {
color: #F5F1E6;
background-color: #2A1F00;
text-decoration: none;
}

#sidebar ul li a:hover:before {
content: "» ";
}

#sidebar ul li a:active {
color: #2A1F00;
background-color: #9DCE39;
text-decoration: none;
}

/* SEZIONE DEI CONTENUTI */

#section {
background: #EBE3CD url(../images/sidebar_bg.png) repeat scroll top left;
width: 640px;
padding: 10px;
margin: 0px;
float: left;
}

#section p {
margin: 0 0 20px 0;
}

#section img { 
margin: 5px;
}

#section a:link, #section a:visited {
text-decoration: underline;
color: #2A1F00;
}

#section a:hover {
color: #9DCE39;
text-decoration: underline;
}

#section a:active {
color: #9DCE39;
text-decoration: none;
}

#section h1 {
font-size: 22px;
}

**acsocmel** · 25-06-2009, 21.27.51

Codice:

<div class="end"></div>

nell'html dopo la chiusura del div id="section"
e nel css

Codice:

.end {
    clear: both;
    height: 10px;
    line-height: 10px;
    overflow: hidden;
}

stavo scordando che magari ti basta solo dare overflow auto oppure overflow hidden al di id = container
:)

25-06-2009, 21.38.25

funziona, grazie mille!
ma ora posso mettere un footer se voglio? Oppure devo dare al footer le proprietà dell'id di classe end?

Anche perchè nei miei pieani volevo fare un footer largo come tutta la schermata ma con i contenuti di larghezza 960px come nell'header..

EDIT: scusa sono arazz ho fatto casino con gli account

**acsocmel** · 26-06-2009, 00.10.31

scusa il ritardo ma tra partita e telefilm mi sono liberato adesso
la risposta ai tuoi dubbi è si
anche se io al tuo posto, prima di tutto cambierei da id a class il ruolo di main e container , così che sotto si possa duplicare lo schema

Codice:

<div class="main">
  <div class="container">
......
<div class="end"><!-- eventuale non necessario ma dipende da quello che vuoi ottenere --></div>  
  </div>
</div>

poi nel caso si debba personalizzare l'aspetto dei vari container potrei usare un id

Codice:

<div class="main">
  <div class="container" id="cont1">
......testo 1.......
<div class="end"></div>
  </div>
</div>
<div class="main">
  <div class="container" id="cont2">
......testo 2.......
<div class="end"></div>
  </div>
</div>

e basterebbe poi una piccola regola o due

Codice:

#cont1 {
    background-image: url(albero.jpg)
}
#cont2 {
    background-image: url(uccello.jpg)
}

26-06-2009, 08.05.40

Quoto con acsocmel.
Comunque come diceva perima, non centra se hai mozila o ie

26-06-2009, 09.33.40

1 - Ancora grazie che mi aiuti, non ti preoccupare di quanto ci metti a rispondere!
2 - Grazie mille dei consigli, direi che funziona (per le classi ora vedo un po')
3 - Mi sembrava stranno che con mozilla funzionasse perchè credevo che funzionasse, invece ora ho capito a cosa serviva il clear.

**nukta** · 26-06-2009, 11.29.22

aggiusterei anche il footer.
hai impostato il width a 100% e gli hai dato anche un padding, e questo causa un brutto scroll orizzontale.

Discussione: Visualizzazione scorretta dello sfondo

LinkBack

Strumenti discussione

Display

Visualizzazione scorretta dello sfondo

Tags for this Thread

Regole di scrittura