» Colonna navigazione con altezza 100%

mek2573 · 17-11-11, 10:48

Buongiorno a tutti,
sto facendo un sito che ha bisogno di un layout a due colonne con footer sempre in fondo...il solito annoso problema!
In particolare ho bisogno che la colonna secondaria (quella dove inserire i pulsanti di navigazione) abbia come sfondo non un colore, ma un'immagine.
Questo il css completo della mia pagina:

@charset "utf-8";
/* CSS Document */
html, body {
margin:0;
padding:0;
background-color:#F5F5F5;
height:100%
}

h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size:22px;
padding-bottom:20px;
padding-top:20px;
}

#testa {
width: 100%;
height:250px;
background-image:url(immagini/sfondo_header.gif);
background-repeat:repeat-x;
}

#logo {
position:absolute;
right:0px;
top:0px;
}

#navigation {
position:absolute;
top:250px;
right:0;
width:200px;
background-image:url(immagini/sfondo_colonna.gif);
background-repeat:repeat-y;
}

#col_nav_container {
position:absolute;
right:0px;
top:0px;
}

#nav {
float:right;
list-style:none;
height: 50px;
margin: 0;
padding: 0;
}

#nav li { float: right; }

#nav li a {
display: block;
height: 50px;
width: 120px;
outline: none;
}

#nav_home a { background-image: url('immagini/home.gif'); }
#nav_vino a { background-image: url('immagini/vino.gif'); }
#nav_cibo a { background-image: url('immagini/cibo.gif'); }
#nav_dove a { background-image: url('immagini/dove.gif'); }
#nav_contatti a { background-image: url('immagini/contatti.gif'); }

#nav li a:hover,
#nav li a.selected {
background-position: left bottom;
}

#container {
position:relative;
height: 100%;
height:auto !important;
min-height: 100%;
width: 100%;
margin: 0 auto -60px;}

#contenuto {
width: 800px;
text-align: justify;
margin: 0 auto;
min-height: 100%;
padding-top:20px;
padding-bottom:60px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:14px;
line-height:24px;
color:#000;
}

.pushfooter{
height:60px; /* altezza footer */
clear:both;
}

#footer {
position:absolute;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:10px;
text-align:center;
line-height:12px;
color:#e5e5e5;
width:100%;
height:60px;
bottom:0;
background-image:url(immagini/sfondo_footer.gif);
background-repeat:repeat-x;
}

#angolo_footer {
position:absolute;
right:0px;
top:0px;
}

Se utilizzo i seguente codice HTML:
<html>
<body>
<div id="container">
<div id="testa">
<div id="logo">
<img src="immagini/logo_header.gif" width="425" height="250" alt="" title=""/>
</div>
</div>
<div id="contenuto">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="pushfooter"></div>
<div id="navigation">
<div id="col_nav_container">
<ul id="nav">
<li id="nav_home"><a href="#" class="selected" title=""></a></li>
<li id="nav_vino"><a href="#" title=""></a></li>
<li id="nav_cibo"><a href="#" title=""></a></li>
<li id="nav_dove"><a href="#" title=""></a></li>
<li id="nav_contatti"><a href="#" title=""></a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<div id="angolo_footer"><img src="immagini/angolo_footer.gif" width="200" height="60" alt="" title=""/></div>
</div>
</div>
</body>
</html>

Il mio footer si incolla alla parte bassa dello schermo senza problemi; ovviamente, non avendo contenuto suo proprio, il mio div "navigation" non mi mostra l'immagine di sfondo e dunque mi "impalla" la veste grafica del sito.
Per ovviare all'inconveniente ho modificato il relativo CSS aggiungendo gli attributi:
height: 100%;
height:auto !important;
min-height: 100%;

A quel punto la mia veste grafica viene rispettata, ma il footer non vuole più saperne di stare attaccato al fondo pagina....

...qualcuno sa dirmi cosa sbaglio?
...oppure...avete soluzioni alternative?

Grazie mille

Matteo

17-11-11, 10:48	#1 (permalink)
mek2573 User Data di registrazione: Mar 2010 Messaggi: 47	Colonna navigazione con altezza 100% Buongiorno a tutti, sto facendo un sito che ha bisogno di un layout a due colonne con footer sempre in fondo...il solito annoso problema! In particolare ho bisogno che la colonna secondaria (quella dove inserire i pulsanti di navigazione) abbia come sfondo non un colore, ma un'immagine. Questo il css completo della mia pagina: @charset "utf-8"; /* CSS Document / html, body { margin:0; padding:0; background-color:#F5F5F5; height:100% } h1 { font-family: Georgia, "Times New Roman", Times, serif; font-size:22px; padding-bottom:20px; padding-top:20px; } #testa { width: 100%; height:250px; background-image:url(immagini/sfondo_header.gif); background-repeat:repeat-x; } #logo { position:absolute; right:0px; top:0px; } #navigation { position:absolute; top:250px; right:0; width:200px; background-image:url(immagini/sfondo_colonna.gif); background-repeat:repeat-y; } #col_nav_container { position:absolute; right:0px; top:0px; } #nav { float:right; list-style:none; height: 50px; margin: 0; padding: 0; } #nav li { float: right; } #nav li a { display: block; height: 50px; width: 120px; outline: none; } #nav_home a { background-image: url('immagini/home.gif'); } #nav_vino a { background-image: url('immagini/vino.gif'); } #nav_cibo a { background-image: url('immagini/cibo.gif'); } #nav_dove a { background-image: url('immagini/dove.gif'); } #nav_contatti a { background-image: url('immagini/contatti.gif'); } #nav li a:hover, #nav li a.selected { background-position: left bottom; } #container { position:relative; height: 100%; height:auto !important; min-height: 100%; width: 100%; margin: 0 auto -60px;} #contenuto { width: 800px; text-align: justify; margin: 0 auto; min-height: 100%; padding-top:20px; padding-bottom:60px; font-family: Georgia, "Times New Roman", Times, serif; font-size:14px; line-height:24px; color:#000; } .pushfooter{ height:60px; / altezza footer */ clear:both; } #footer { position:absolute; font-family: Georgia, "Times New Roman", Times, serif; font-size:10px; text-align:center; line-height:12px; color:#e5e5e5; width:100%; height:60px; bottom:0; background-image:url(immagini/sfondo_footer.gif); background-repeat:repeat-x; } #angolo_footer { position:absolute; right:0px; top:0px; } Se utilizzo i seguente codice HTML: <html> <body> <div id="container"> <div id="testa"> <div id="logo"> <img src="immagini/logo_header.gif" width="425" height="250" alt="" title=""/> </div> </div> <div id="contenuto"> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <div class="pushfooter"></div> <div id="navigation"> <div id="col_nav_container"> <ul id="nav"> <li id="nav_home"><a href="#" class="selected" title=""></a></li> <li id="nav_vino"><a href="#" title=""></a></li> <li id="nav_cibo"><a href="#" title=""></a></li> <li id="nav_dove"><a href="#" title=""></a></li> <li id="nav_contatti"><a href="#" title=""></a></li> </ul> </div> </div> </div> <div id="footer"> <div id="angolo_footer"><img src="immagini/angolo_footer.gif" width="200" height="60" alt="" title=""/></div> </div> </div> </body> </html> Il mio footer si incolla alla parte bassa dello schermo senza problemi; ovviamente, non avendo contenuto suo proprio, il mio div "navigation" non mi mostra l'immagine di sfondo e dunque mi "impalla" la veste grafica del sito. Per ovviare all'inconveniente ho modificato il relativo CSS aggiungendo gli attributi: height: 100%; height:auto !important; min-height: 100%; A quel punto la mia veste grafica viene rispettata, ma il footer non vuole più saperne di stare attaccato al fondo pagina.... ...qualcuno sa dirmi cosa sbaglio? ...oppure...avete soluzioni alternative? Grazie mille Matteo

Condividi questo contenuto nei Social Network:		Tweet
Ti stiamo aspettando: Registrati subito e gratis. Entra a far parte di una delle comunità più attive in Italia. Se hai dimenticato i tuoi dati li puoi recuperare subito.

Strumenti di discussione
Visualizza la versione stampabile Invia la pagina tramite email