Ciao a tutti! Allora ho una pagina che si basa a grandi linee su un codice di questo tipo:
(tralascio doctype ecc dato che non sono fondamentali per far capire il mio problema)codice:<html> <body> <div id="container"> <div id="containerbis"> <div id="header">contenuto</div> <div id="left">contenuto</div> <div id="right">contenuto</div> <div id="center">contenuto</div> <div id="footer">contenuto</div> </body> </html>
La pagina ha un layout fluido con questo css:
Ora, avrei bisogno di aver il footer a fondo pagina anche nel caso il contenuto fosse inferiore all' altezza della finestra...non so come fare!codice:html,body { margin: 0; padding: 0; background-color: #bcbcbc; min-width: 775px; } div#container { background-image: url(../../../../images/sfondo_dx.jpg); background-repeat: repeat-y; background-position: top right; } div#containerbis { background-image: url(../../../../images/sfondo_sx.jpg); background-repeat: repeat-y; background-position: top left; } div#header { height: 120px; background-image: url(../../../../images/sfo_top.jpg); background-color: #0033ff; } div#left { width: 160px; background-image: url(../../../../images/menu.jpg); background-color: #000080; margin: 0; padding: 0; float: left; } div#right { width: 240px; background-color: transparent; margin: 0; padding: 0; float: right; } div#center { background-color: #bcbcbc; margin: 0 245px 0 165px; padding: 0; } div#footer { background-image: url(images/sfo_footer.jpg); background-repeat: repeat-x; background-color: #0033ff; border-bottom: 2px dashed #cccccc; height: 45px; text-align: center; clear: both; }
Finora in un layout fluido molto simile a questo, ma a 2 colonne (e quindi anche con 1 solo contenitore), mi è andato più che bene il codice contenuto in questa guida:
http://css.html.it/guide/lezione/64/...ma-del-footer/
al quale ho aggiunto un <br style="clear:both;" />subito prima della fine della colonna centrale, cosi da far in modo che essa sia sempre più lunga di quella laterale!
Il problema ora mi sorge in quanto qua ho 2 contenitori totali che mi servono per prolungare due immagini di sfondo fino al footer, ma quella guida utilizza:
div#container{position: relative; height:100%}
ove il container è posizionato relativamente rispetto al body!
Io avendo 2 container annidati, mi ritrovo con uno di esse che non sarebbe posizionato relativam,ente al body ma bensi al primo container...ed infatti la pagina da diversi problemi!
Ho fatto molte prove e modifiche, ma scon scarsi risultati!
Sapete suggerirmi?
Grazie a tutti!!
Rispondi quotando
