Ciao ragazzi scusate l'ignoranza ma Volevo realizzare un layout a due colonne esteso a tt la pagina del browser, con la navigation a sinistra quindi con il float left...vi posto lo schizzo del layout
io vorrei avere sia la navigation che il content estesi x tt la pagina senza ovviamente altezze fisse
come posso fare?
e quindi?
Secondo me dovresti dire in cosa non riesci.
Cioè: non lo sai fare proprio oppure qualcosa non ti quadra nel codice o c'è dell'altro?
Nell'attesa, ti mando un esempio che questo sito ti da:
http://html.it/guide/esempi/layout_css/esempio19b.htm
allora cerco di essere + chiaroun layout a due colonne come il link che mi hai postato si lo so fare ...vorrei solo sapere che tipo di modifiche apportare al codice...x far si che la navigation (colore giallo) e il content (colore azzurro) siano estesi x tutta l'atezza del browser xchè come hai visto dallo schiizzo arrivano solo fino ad un certo punto...
CSS
html, body{margin:0; padding:0;}
body{text-align:center; font-size:76%; font-family:Arial, Helvetica, sans-serif;}
div#container{margin:0 auto; background-color:#FFFF00}
div#header{background-color:#FFFF00; height:10em;}
div#navigation{float:left; width:200px; background-color:#FFFF00;}
div#content{ background-color:#00FFFF; height:30em;}
questo è il codice css sel mio schizzo, come vedi nel content gli ho dato un altezza fissa e nn è certo quello che voglio...ma era solo x rendere l'idea
spero di essermi fatto capire ^^
Se quello che vuoi è che navigation sia alto come container, allora navigation deve essere interno a container e avere height:100%; ; se vuoi anche che container sia alto come l'intera finestra, allora questo ottenibile solo con un height:100%; applicato a container, cosa che però te lo fa diventare alto come l'intera finestra, ovvero il documento diventa alto il 100% PIU' l'altezza dello header.
Comunque, senza avere accesso al sorgente html/css è impossibile dirti di più!
"Le uniche cose che sbagli sono quelle che non provi a fare."
Atipica
ho provato come hai detto tu ma senza risultato... (ho sicuramente toppato qualcosa) aspetta che posto il codice html e css:
HTML
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
Questo come vedi è lo scheletro base con la navigation all'interno del container...
CSS
html, body{margin:0; padding:0;}
body{text-align:center; font-size:76%; font-family:Arial, Helvetica, sans-serif;}
div#container{margin:0 auto; height:100%;}
div#header{background-color:#FFFF00; height:10em;}
div#navigation{float:left; width:200px; background-color:#FFFF00; height:100%;}
div#content{ background-color:#00FFFF;}
ed ecco il codice css
Si, ora è chiaro. dai un occhio qui:
<style type="text/css">
html, body{margin:0; padding:0;}
body{text-align:center; font-size:76%; font-family:Arial, Helvetica, sans-serif;}
#container{margin:0 auto; height:100%;}
#header{background-color:#FFFF00; height:10em;}
#navigation{float:left; width:200px; background:#FFFF00; height:100%;}
#content{ background:#66FFFF;height:100%}
</style>
</HEAD>
<BODY>
<div id="container">
<div id="header"></div>
<div id="navigation"></div>
<div id="content"></div>
</div>
Good luck
uhm...bho nn succede nulla... nn mi da il risultato desiderato
ricominciamo: forse ho sbagliato a capire io.
E' il risultato che vuoi, quello dell'immagine qui sotto?
se si, è il codice che ti ho postato...
@cerba quel codice non potrà funzionare se non dai l'atezza del 100% al <html> e al <body>
@InfoWeb.Roma ogni 15-20 post di questo forum c'è qualcuno che chiede quello che vuoi tu, e spesso c'è anche la soluzione, guarda bene
sisi cerba è quello il risultato che vorrei ottenere ed ho provato il codice ma nn va...provo a seguire il suggerimento di mucu e mettere l'altezza 100% nel body e html...
edit:
ho apportato la modifica nel body e html ed ora va bene poi ho aggiunto un overflow:hidden in maniera da levare la fastidiosissima scrollbar dato che si estendeva pure fin troppo XD grazie 1000 a tutti e due x l'aiuto ^^
(ce l'abbiamo fatta XD)
Permessi di invio
Rispondi quotando