questa struttura è perfetta se ti vuoi fare un sito table-less in xhtml. devi regolarti margini, font, colori etc... io ho messo solo delle aprti in evidenza. Ho diviso l'intestazione dal corpo in due parti in modo che tu possa metterci dentro cose con grandezze differenti. è già validato con FF che con IE (con ie il margin-top devi farlo più piccolo di 3 px se non erro, ma questo è un altro discorso)... basta riempire i campi e personalizzare... rispetto alla tabella vedi subito la differenza abissale
XHTML:
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" xml:lang="it" lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>titolo</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="centra_pagina">
<div id="intestazione">
<div id="logoIntestazione">Intestazione</div>
</div>
<div id="navigazione">
Navigazione
</div>
</div>
<div id="centra_pagina_2">
<div id="corpo">
<div id="boxLeft">
<div id="navLeft">menù di sinistra
</div>
</div>
<div id="boxRight">
<div id="mainBody">
<h1>Testo</h1>
</div>
</div>
</div>
<div id="footer">footer
</div>
</div>
</body>
</html>
CSS:
codice:
body{
background:#900 url("se vuoi uno sfondo metti qui il percorso della tua gif.gif") center repeat-y;
color:#000;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
text-align:center;
margin:0px;
padding:0px;
border: 0px;
}
#centra_pagina{
width:840px;
margin:auto;
text-align:left;
padding:0px;
}
#centra_pagina_2{
display:block;
background:#FFF;
width:840px;
margin:auto;
margin-top:46px;
text-align:left;
padding:0px;
}
#intestazione {
background-color:#FCFEFA;
padding:0px;
width:840px;
margin-top:8px;
}
#navigazione{
display:block;
width:840px;
background:#FCFEFA;
margin-top:11px;
float:left;
color:#333333;
}
#corpo{
display:block;
width:820px;
background:#FCFEFA;
padding:10px;
float:left;
color:#333333;
}
#footer{
display:block;
width:820px;
background:#FCFEFA;
padding:10px;
margin-top:11px;
float:left;
color:#333333;
}
#navigazione{
font-size:12px;
color:#336600;
}
#box_sx{
float:left;
width:200px;
background-color:#FCFEFA;
color:#000000;
padding:10px;
}
#box_dx{
float:left;
width:590px;
background-color:#99FF00;/*#FFF per il bianco*/
color:#333;
text-align: justify;
vertical-align: top;
}
#mainBody{
margin:10px;
padding:10px;
background-color:#c0c0c0;
color:#000;
}
#footer{
color:#000;
}
h1{font:bold italic 3em verdana,sans-serif;color:#ccc}
Rispondi quotando
