ciao a tutti
ho la pagina organizzata così
Il file CSS a cui si fa riferimento è fatto cosìcodice:<body> <div id="container"> <div id="header"> [img]immagini/logo.gif[/img] </div> <div id="content"> <div class="txt_img"> [img]immagini/img.jpg[/img] Testo</p> </div> <div class="txt_img"> [img]immagini/img.jpg[/img] Testo</p> </div> <div class="txt_img"> [img]immagini/img.jpg[/img] Testo</p> </div> <div class="wide"> [img]immagini/img.jpg[/img] Testo</p> </div> </div> <div id="extra"> Testo</p> </div> <div id="navigation"> Testo</p> </div> <div id="footer"> Testo</p> </div> </div> </body>
Come vedete la sezione dei contenuti, in questo caso contiene vari div, altre pagine strutturate sempre in 3 colonne contengono un solo div.codice:html,body{margin: 0;padding:0} body{font-family: arial,sans-serif;font-size: 0.77em;text-align: center} div#container{position: relative; width: 760px; margin: 0px auto; border-left: 1px solid #000; border-right: 1px solid #000; background-color: #eee;color: #000;text-align: left} /*stili generici, su header e footer*/ div#header{height: 90px;} div#header img{border:0} div#header {background: url(../immagini/logo.gif) no-repeat top left;} h1,h2,h3,p{margin: 0} p{padding-bottom: 20px;font-size: 0.9em} h1{padding:0px;font: bold 3.0em georgia,times,serif} h2{font-size: 1.3em;padding-top: 0px} h3{font-size: 1.2em} h3{padding-top: 0px} div#footer a{color:#ff0;font-weight: bold;text-decoration: underline} /*stili specifici per il layout*/ div#navigation{position: absolute; top: 90px; left: 0; width: 130px;\width:130px;w\idth:120px;padding: 1em 0 0 10px} div#extra{position: absolute; top: 90px; right: 0; width: 180px;\width:190px;w\idth:180px;padding: 1em 5px} div#content{margin: 0 190px 0 130px;padding: 10px 10px;background-color: #fff} div#footer{text-align:center; padding: 5px 20px; background-color: #000; color: #fff;font-size: 0.8em;clear: right} /*stili per la navigazione*/ div#navigation ul{margin: 0 0 20px;padding: 0; list-style-type: none;line-height: 1.7;} div#navigation ul a{display:block;width: 110px;border-bottom: 1px solid #fff;color:#000; font-weight:bold;} div#navigation ul a:hover{background-color: #aaa;color: #fff} div#navigation ul a#activelink{color: #f00;text-decoration: none} div#navigation {font-size: 0.8em;} div#nav_box {font-size: 1.0em;margin-bottom: 2em;border-top: 1px solid #000;width: 90%} div#nav_box h3{background-color: #999;color: #fff;font-size: 1.2em} div#nav_box p{margin: 0} /*stili per la sezione extra*/ div#extra div.google{margin-top: 5px;width: 100%;border-bottom: 1px solid #999} /*risolve il peek-a-boo bug di IE6*/ div#extra div.google img{float:left;margin: 30 10px} div#extra div.google h2{margin-top: 10px;margin-left: 8px;font-family: arial,sans-serif;font-size: 20px;color: #282} /*stili per i contenuti*/ div#content{border-left: 1px solid #999; border-right: 1px solid #999;text-align:justify;} div#content h2 a{display:block;font-weight:bold;color: #000} div#content h2 a:hover{color: #f00;} div#content h2 a#activelink{color: #f00;text-decoration: none} div#content p a{font-weight:bold;color: #888} div#content p a:hover{background-color: #888;color: #fff;} div#content p a#activelink{color: #f00;text-decoration: none} div.txt_img{border-bottom: 1px solid #999; width: 100%;} /*risolve il peek-a-boo bug di IE6*/ div.txt_img img{float:left;margin: 30 10px;border:4;border-color: #fff} div.txt_img h2{margin-top: 10px} div.wide{width: 100%} /*risolve il peek-a-boo bug di IE6*/ div.wide img{float:left;margin: 30 10px;border:4;border-color: #fff} div.wide h2{margin-top: 10px}
Il mio problema è che vorrei mettere una dimensione verticale fissa alle 3 colonne per evitare che, nel caso i contenuti siano inferiori alle colonne di sx o dx, il footer vi venga sovraposto. Poi, nel caso di contenuti troppo lunghi dovrebbe comparire la scrollbar laterale.
Ho provato in varie maniere ma non mi riesce di fissare la lunghezza senza sconvolgere il layout della pagina.
Rispondi quotando
