Il risultato della pagina a cui voglio arrivare è quello che ho riprodotto nella figura allegata.
Il foglio css è:
con questo schema:codice:div#header {background-color:#ff0000;} div#logo{color: #ffffff; float: left;width: 500px;\width:510px;w\idth:500px; padding-top: 5px; padding-left: 15px;} div#variabile{color: #ffffff; margin: 0 170px; padding-top: 15px; font-size: 17px; font: bold; } div#banner{color: #ffffff; float: right; width: 250px;\width:260px;w\idth:250px; text-align:center; padding-top: 5px;} div#navigazione{float: left; clear: both; width: 200px;\width:210px;w\idth:200px;padding: 1em 0 0 10px; } div#content{margin: 15px 40px 25px 15px; float:left; } div#footer{clear:both; text-align:center; padding: 5px 0; background-color: #ff0000; color: #ffffff; }
La parte alta si presenta divisa in 3 parti:codice:<div id="header"> <div id="logo"> logo </div> <div id="variabile"> variabile </div> <div id="banner"> banner </div> </div> <div id="navigazione"> menu </div> <div id="content"> content </div> <div id="footer"> footer </div>
-"logo" allineato a sinitra con una larghezza di 500
-"banner" allineato a destra con una larghezza di 250
-"variabile" posizionato fra i due con larghezza variabile.
La lunghezza di "logo" è fissa ma quella di "banner" e di "variabile" sono variabili, perciò la mia idea era riunirle
tutte e 3 sotto "header" e dargli il colore di sfondo rosso.
Questa operazione funziona perfettamente con IE ma non con Mozilla - Firefox e con Opera.
Io vorrei che lo sfondo rosso si propagasse in lunghezza per i 3 elementi: "logo", "banner" e "variabile"; fino a coprire il più lungo dei 3.
Come fare?
Il corpo centrale è diviso fra:
- "navigazione" allineato a sinitra con larghezza di 250;
- "content" allineato a sinitra con larghezza variabile.
Con IE viene tutto visualizzato bene, con Mozilla-Firefox invece la parte del "content" si stoppa all'altezza della riga che
divide "variabile" da "banner".
Come risolvere?
Grazie e buona Pasqua a tutti!
Rispondi quotando