Buon pomeriggio, per iniziare.
Ho un problemacon Firefox il layout di un sito che sto costruendo
Vorrei che abbia:
Con il footer sempre in fondo alla pagina:codice:+----------------------------------------------------------+ | | | HEADER - width:100%, height:121px | | | +----------------------------------------------------------+ |Navig- | Content | Extra | |ation | | | |Column | | Column| | | | | | 160px | | | | | | | | | | | | B | | | | A G | | | | N O | | | | N O | | | | E G | | | | R L | | | | E | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | +----------------------------------------------------------+ | | | FOOTER - width:100%, height:31px | | | +----------------------------------------------------------+
Utilizzando questo foglio di stile:
e questo HTML:codice:* { margin: 0; } html, body { margin:0; padding:0; height:100%; font:10px Verdana,Tahoma,Helvetica,Sans-serif,Arial; background:#42afdc url(/images/page/background.jpg); background-attachment:fixed; } p { padding:0px; margin:0px; } a { color:#0066FF; text-decoration: none; font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: normal; } a:hover { color:#0033FF; } a:link { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 10pt; font-weight: normal; } td,input,select,textarea,div { font-family: Verdana, Tahoma, Helvetica, Sans-serif, Arial; font-size: 10px; } /************** Main Container **************/ div#container { position:relative; width:100%; height:100%; margin: 0 auto; text-align:left; border-left:2px solid #36c; border-right:2px solid #36c} body>div#container { height:auto; min-height:100%; } div#footer { position:absolute; bottom:0; width:100%; padding:0.5em 0; text-align:center; } /************** Header & Footer **************/ div#header { height:121px; width:100%; padding:0; text-align:left; } div#footer { height:36px; width:100%; position:absolute; bottom:0; width:100%; padding:0; text-align:center; } /************** Page Layout **************/ div#navigation { float:left; width:160px;\width:170px;w\idth:160px; padding-bottom:46px; } div#extra { float:right; width:160px;\width:170px;w\idth:160px; padding:1em 1em 5em } div#content { padding: 1em 1em 5em} div#footer { clear:both; }
Il problema e' che il banner pubblicitario che voglio sia inserito nel navigation menu (poi a tempo debito lo rinomino perche' so perfettamente che non e' il suo nome corretto...) non fa slittare in fondo il footer. O per esser piu' chiari http://www.gisport.org/_dev/index.php con una risoluzione 1024x768.codice:<body> <div id="container"> <div id="header"> Questo e' l'header </div> <div id="navigation"> <script type="text/javascript"> google_ad_client = "pub-1065964217308634"; google_ad_slot = "4012409438"; google_ad_width = 120; google_ad_height = 600; </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script> </div> <div id="extra"> Right </div> <div id="content"> Content </div> <div id="footer"> Footer </div> </div> </body>
Non l'ho ancora verificato con OPERA, IE 6 si comporta correttamente, mentre FIREFOX visualizza il footer a mezza altezza rispetto all'altezza effettiva di tutta la pagina.
Anticipatamente grazie per il supporto.
Stefano

con Firefox il layout di un sito che sto costruendo
Rispondi quotando