Originariamente inviato da Mich_
Anzitutto di usare i tag VB del forum: il tuo codice non e` incolonnato correttamente, ed e` difficile da capire. Se invece lo avessi inserito tra [ code ] e [ /code ] (ad esempio usando il bottone # sopra l'area del testo), la formattazione si sarebbe conservata.
Scusami .. di seguito il codice completo della pagina di prova che ho fatto.
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Prova css</title>
<style type="text/css" media="screen">
body {
margin:0;
padding:0;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#999999
}
#content {
width:740px;
border:#000000 solid 1px;
margin:0 auto;
text-align:left;
}
#header {
height:150px;
border:#FF0000 solid 1px;
}
#desc{
}
#nav {
height:50px;
border: #FF00FF solid 1px;
}
#main {
border:#00FF66 solid 5px;
margin:3px auto 3px auto;
}
/*div#main div{
float:left;}
*/
#page {
border: #0000FF solid 1px;
width:550px;
float:left;
clear:left;
}
#sidebar {
border:#000 solid 1px;
float:right;
width:150px;
height:300px;
}
#footer {
border:#FFFF00 solid 1px;
clear:both;
}
</style>
</head>
<body>
<div id="content">
<div id="header"> <h1> PROVA LAYOUT CSS </h1></div>
<div id="nav">
LINK1</p></div>
<div id="main">
<div id="page"><div id="desc">
cotenuto</p></div>
Contenuto pagina principale</p>
Contenuto pagina principale</p>
Contenuto pagina principale</p>
Contenuto pagina principale</p>
Contenuto pagina principale</p>
Contenuto pagina principale</p>
Contenuto pagina principale</p>
Contenuto pagina principale</p>
Contenuto pagina principale</p>
Contenuto pagina principale</p>
Contenuto pagina principale</p>
Contenuto pagina principale</p></div>
<div id="sidebar">
Sidebar menu</p></div>
</div>
<div id="footer">
Copyleft</p></div>
</div>
</body>
</html>
Seconda cosa: non hai specificato come vuoi sistemare i vari blocchi, e questo implica supposizioni ulteriori che dobbiamo fare.
Voglio header fisso in alto, appena sotto la nav, nel main ci devono stare la desc e il page che contengono il contenuto del sito e una barra a dx (sidebar), in fondo il footer a larghezza piena.
Altro appunto: non hai postato ne` il DOCTYPE (IE si comporta in modo diverso a seconda della DTD usata) ne` il CSS che gia` usi.
Comunque il tuo problema pare essere il solito problema che ti manca il clear prima della fine del blocco contenente i float. Puoi fare una ricerca nel forum con tale chiave, o vedere tra i "link utili" o ancora buttarti direttamente su
[Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float (se hai le conoscenze sufficienti per applicare direttamente la tecnica).
Adesso vado a leggermi il link che mi hai consigliato...
spero di essere stato chiaro.
Ciao e grazie Massimo
Rispondi quotando