background

**baldracco** · 26-07-2011, 18:15

ciao a tutti...
ho un problemino. sto costruendo una pagina che ha la seguente sintassi:

<body>

<div id="background">
<div id="container">
<div id="header"></div>
<div id="main">home band contatti</div>
<div id="rightnav"></div>
<div id="leftnav"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
</div>

</body>

quando vado a dare il valore per il colore di background al "DIV background", quest'ultimo eredita il valore di margin top e bottom (100px) che ho dato al "DIV container" e tra il colore del background (ho scelto il nero) e la finestra del browser rimane un piccolo margine bianco su tutti i lati.

suggerimenti?

grazie in anticipo

**ResianTaxidrive** · 26-07-2011, 18:31

secondo me devi dare una resettata iniziale a tutto dando

html, body, div{margin:0; padding:0}

cmq c'è qualcosa di strano nell'errore che hai detto; hai mica un esempio visibile?

**baldracco** · 27-07-2011, 09:51

non ho ancora pubblicato nulla di quello su cui lavoro, quindi l'unico modo per farti vedere cosa intendo e postare l'intero codice... eccolo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ilterzosenso.com</title>
<style type="text/css">

#html, body, div {margin:0; padding:0}

#background {text-align: center; background-color: black;}

#container {width: 900px; margin: 0 auto; text-align: left; margin-top: 100px;
background-color: white;}

#header {width: 900px; height: 150px; background-image: url(immagini/header2.gif);
border-bottom: solid black 4px; background-repeat: no-repeat;}

#main {width: 900px; height: 35px; background-image: url(immagini/menubar.gif); background-repeat: no-repeat;
font-family: arial, Verdana, sans-serif;
font-weight: bold; color: white; word-spacing:30px; text-align:left; line-height: 30px; padding-left: 30px;}

#leftnav {float: left; width: 140px; height: 600px; background-image: url(immagini/leftnav2.gif);
background-repeat: repeat-y; background-position: right; border-left: solid black 4px;
border-top: solid black 4px; padding-left: 20px; padding-top: 15px;}

#rightnav {float: right; width: 140px; height: 600px; background-image: url(immagini/rightnav2.gif);
background-repeat: repeat-y; background-position: left; border-right: solid black 4px;
border-top: solid black 4px; padding-left: 30px; padding-top: 15px;}

#body {overflow: auto; padding-left: 30px; padding-right: 30px; padding-top: 30px;
border-top: solid black 4px; font-family: arial, Verdana, sans-serif;
color: black; text-align: justify;}

#immagine {float: left; padding: 15px 15px 15px 0;}

#footer {width: 900px; height: 100px; clear: both; background-image: url(immagini/footer.gif);
border-top: solid black 4px; margin-bottom: 100px;}

</style>
</head>
<body>

<div id="background">
<div id="container">
<div id="header"></div>
<div id="main">home band contatti</div>
<div id="rightnav"></div>
<div id="leftnav"></div>
<div id="body">
<div id="immagine">[img]immagini/contrabbasso.gif[/img]</div>
The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum." Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC he
standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC he standard Lorem Ipsum passage, used since the 1500s
"Lorem ipsum dolor sit amet, consectetur adipisicing
</div>
<div id="footer"></div>
</div>
</div>

</body>
</html>

anche se non hai le immagini che ho messo su header, leftnav, rightnav e footer dovresti capire cosa intendo...
ho provato a dare i valori che hai detto (#html, body, div {margin:0; padding:0}) mi sono scomparse le bande laterali ma il background rimane bianco sopra l'header e sotto il footer...

grazie ancora...

**ResianTaxidrive** · 27-07-2011, 12:04

non so ben spiegarti perchè ma diciamo che puoi aggirare la cosa mettendo a container solo margin:0 auto; e a background un padding-top di 100px

**baldracco** · 27-07-2011, 14:39

grazie ancora... sei un amico...
però ho dovuto impostare anche padding-bottom: 100px per far funzionare tutto...
grazie ancora...

alla prox

Discussione: background

Strumenti discussione

Ricerca discussione

Visualizza

background

Permessi di invio