• User Attivo

    [layout tableless] help su altezza menu

    ciao ragazzi,
    ho bisogno di un aiuto sulla realizzazione di un layout tableless.
    Ora sono a questo punto:

    image

    mentre invece il risultato a cui vorrei arrivare è questo

    image

    vorrei, insomma, far sì che il menù scendesse fino a piè di pagina...

    :mmm:

    ecco il codice css

    /*stili per il layout fisso*/
    html,body{margin: 0;padding:0; background:url(img/layout/background.jpg) top left repeat-x}
    body{font-family: arial,sans-serif;font-size: 100%;text-align: center}
    div#container{width: 756px;margin: 0 auto;text-align: left; border-left: 2px solid #636363;border-right: 2px solid;background:url(img/layout/background_navigation.jpg) top left repeat-y}
    
    /*stili generici, su header e footer*/
    div#header{background-color:#36C;color: #ff0}
    h1,h2{margin: 0;padding:0}
    h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
    h2{color: #999;font-size: 1.5em}
    div#footer a{color: #fff;font-weight: bold;text-decoration: underline}
    
    /*stili specifici per il layout*/
    div#navigation{float:left;width: 10.50em;}
    
    div#content{margin-left: 10.50em;padding: 1em;background:#FFF;}
    div#footer{text-align:center; padding: 0.5em; background-color: #69c; color: #000}
    
    /*stili per la navigazione*/
    div#navigation ul{margin: 1em 0 1em 1em;padding: 0; list-style-type: none;}
    div#navigation li{margin: 0;padding: 0}
    div#navigation a{color:#369;font: normal bold 1.2em/1.6em arial,sans-serif;text-decoration: none}
    div#navigation a:hover{color: #033;text-decoration: underline}
    div#navigation a#activelink{color:;text-decoration: none}
    

    menter invece per l'html è il classico

    <body>
        <div id="container">
            <div id="header"></div>
            <div id="navigation"></div>
            <div id="content"></div>
            <div id="footer"></div>
        </div>
    </body>
    

    grazie in anticipo :ciauz:


  • Bannato Super User

    Hmm.. Non mi sembra una grandiosa idea..

    Ti dico subito perchè..

    Se il contenuto superasse la lunghezza del menù, sfalserebbe tutto, trascinerebbe il footer in basso e chissà dove andrebbe il tuo footer che poverino gli vorresti dire di stare attaccato al menù 🙂


  • User Attivo

    @marasma said:

    Hmm.. Non mi sembra una grandiosa idea..

    Ti dico subito perchè..

    Se il contenuto superasse la lunghezza del menù, sfalserebbe tutto, trascinerebbe il footer in basso e chissà dove andrebbe il tuo footer che poverino gli vorresti dire di stare attaccato al menù 🙂

    Ciao Marasma!

    Perchè dici che la lunghezza del contenuto sfalserebbe tutto?

    Graficamente l'effetto riesco ad ottenerlo anche con un layout del tipo 1 (la prima immagine allegata)...mi sembrava solo più logica (nel mio caso) la suddivisione di tipo 2. :bho:

    A questo punto ti chiedo una cosa: ho fatto un pò di esperimenti con il layout del tipo 1, ma ho notato che se le voci di menù superano il contenuto (in altezza) queste vanno sopra il footer e proseguono per i fatti loro.

    Il div di navigazione, in sostanza, quando si allunga, non si porta con se body e footer, ma prosegue incurante di tutto. :mmm:

    Un aiutino? 😄


  • Bannato Super User

    @18andLiFe said:

    Ciao Marasma!

    Perchè dici che la lunghezza del contenuto sfalserebbe tutto?

    Graficamente l'effetto riesco ad ottenerlo anche con un layout del tipo 1 (la prima immagine allegata)...mi sembrava solo più logica (nel mio caso) la suddivisione di tipo 2. :bho:

    A questo punto ti chiedo una cosa: ho fatto un pò di esperimenti con il layout del tipo 1, ma ho notato che se le voci di menù superano il contenuto (in altezza) queste vanno sopra il footer e proseguono per i fatti loro.

    Il div di navigazione, in sostanza, quando si allunga, non si porta con se body e footer, ma prosegue incurante di tutto. :mmm:

    Un aiutino? 😄

    Devi aggiungere al footer la proprietà:

    
    div#footer
    {
    clear:left;
     }
    
    

    Fammi sapere 😉


  • User Attivo

    @marasma said:

    Devi aggiungere al footer la proprietà:

    >
    div#footer
    {
    clear:left;
     }
    
    >```  
     
    Fammi sapere ;)
    
    grazie mille per adesso,
    
    ti dirò sicuramente come procede l'esperimento :ciauz: