• M
    User •

    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;
    }

    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'); }

    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

    0
Effettua l'accesso per rispondere