Firefox, Layout 3 colonne, width 100% e footer a fondo pagina

**buonste** · 06-02-2008, 16:34

Buon pomeriggio, per iniziare.

Ho un problema

con Firefox il layout di un sito che sto costruendo

Vorrei che abbia:

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                         |
|                                                          |
+----------------------------------------------------------+

Con il footer sempre in fondo alla pagina:

Utilizzando questo foglio di stile:

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; }

e questo HTML:

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>

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.

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

**ricman** · 06-02-2008, 16:56

Leggi qui ...

**buonste** · 06-02-2008, 17:54

Ciao ricman,
onestamente il tutorial l'ho letto e l'ho letto anche bene.

Quando ho provato a riportarlo nel mio layout a 3 colonne non ho pero' ottenuto l'effetto desiderato.

So che e' un "bit somewhere" o un'istruzione in piu' ma

non sto capendo dove sbaglio.

Grazie di nuovo!
Ste

**buonste** · 06-02-2008, 18:00

Il problema (aggiungo) credo sia dovuto al fatto che la pagina e' caricata correttamente solo che avendo il banner di google nel menu di sinistra, ed essendo lo stesso caricato a posteriori rispetto a tutto il resto della pagina, il footer non si ridimensiona automaticamente alle dimensioni del banner pubblicitario.

**buonste** · 06-02-2008, 18:52

Ho risolto... ma che fatica!

Inserendo un

codice:

<div style='height:46px; width:100%; clear:both;'></div>

Tra il 'content' ed il 'footer' ho finalmente ottenuto l'effetto richiesto.

Ora mi rimarrebbe da capirne anche il perche' ma credo che sia una domanda che mi porro' domani... hai visto mai che qualche anima di buona volonta' volesse spiegarmi perche' senza questo div il footer si sovrappone al resto della pagina.

Buona serata,
Stefano

**ricman** · 07-02-2008, 01:34

E' il "clear:both" che ti sistema il footer. Puoi anche toglire quel div vuoto ed assegnarlo al footer stesso...

Discussione: Firefox, Layout 3 colonne, width 100% e footer a fondo pagina

Strumenti discussione

Ricerca discussione

Visualizza

Firefox, Layout 3 colonne, width 100% e footer a fondo pagina

[RISOLTO] Firefox, Layout 3 colonne, width 100% e footer a fondo pagina

Permessi di invio