Salve saggi ragazzi^^
Ho un piccolo problema nel posizionamento di alcuni div. La struttura è basata su un maxi-div contenitore (principale) che comprende (in ordine dall'alto al basso) un div "logo" e poi un altro div "contenitore" che comprende un div "banner" per esteso, subito sotto 2 coppie di div affiancati (block1 e dx1 e block2 e dx2), ed infine un footer.
Ho smanettato un pò con i css per spaziare tra loro i vari div e ci sono riuscito quasi per tutti, ma mi sfugge il perchè il div logo e il div footer (in pratica il primo e l'ultimo div del secondo contenitore) restino appiccicati ai bordi. In realtà so che dovrebbe essere inserito (a rigor di logica) un padding nel div "contenitore" in modo da distanziare tutti i div al suo interno. Eppure, se inserisco un padding o qualsiasi altra cosa nella sezione del css con le regole per "contenitore" scompare il background-color (impostato su bianco per comodità) e non varia assolutamente nulla....
Vi riporto sotto il codice html e css. Ho inserito bordi, altezze,bg-color, ecc. solo per distinguere bene i diversi div e le diverse sezioni.
Cosa sbaglio? Grazie anticipatamente ai saggi che sapranno individuare il problema^^
CODICE HTML
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nuovosito</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="principale">
<div id="logo"> Qui va il logo </div>
<div id="contenitore" style="-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;">
<div id="menu" style="-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;">
<ul id="menu1">[*]Link1[*]Link2[*]Link3[*]Link4[*]Link5[/list]
</div>
<div id="ban1" style="-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;"> spazio1
</div>
<div id="block1" style="-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;"> Contenuti1
</div>
<div id="dx1" style="-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;"> spazio2
</div>
<div id="block2" style="-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;"> Contenuti2
</div>
<div id="dx2" style="-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;"> spazio3
</div>
<div id="footer" style="-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;"> Footer
</div>
</div>
</div>
</body>
</html>
CODICE CSS
body { font-family: Georgia, "Times New Roman", Times, serif;
background-color:#000;
}
#logo { width:920px;
margin:0 auto;
padding:5px;
color:red;
border:1px solid red;
}
#principale {
width: 960px;
margin:0 auto;
padding:5px;
border:1px solid red;
}
#contenitore {
background-color:#FFF
}
#ban1 { text-align: center;
width: 950px;
height: 80px;
margin:5px;
background-color:#03C;
border:1px solid red;
}
#menu {
width:950px;
height:40px;
margin:5px;
background-color:#03C;
border:1px solid red;
}
ul#menu1 li a {
margin:0px;
padding:0px;
float:left;
right:0px;
top: 10px;
margin-right:5px;
text-decoration:none;
color:#FFF;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
}
ul#menu1 li {
display:inline;
}
ul#menu1 li a.active, ul#menu1 li a:hover {
color:#211e1e;
}
#block1 {
text-align: center;
width: 640px;
min-height: 500px;
float:left;
margin:5px;
background-color:#03C;
border:1px solid red;
}
#dx1{
text-align: center;
background-color:#03C;
min-height: 500px;
float:left;
width:296px;
margin:5px;
border:1px solid red;
}
#block2 {
text-align: center;
border: 1px solid red;
width: 640px;
min-height: 100px;
float:left;
margin:5px;
background-color:#03C;
}
#dx2 {
text-align: center;
border: 1px solid red;
float:left;
width:296px;
min-height:100px;
margin:5px;
background-color:#03C;
}
#footer{
text-align: center;
height: 50px;
clear:both;
margin:5px;
border:1px solid red;
background-color:#03C;
}
Rispondi quotando