- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- [layout tableless] help su altezza menu
-
[layout tableless] help su altezza menu
ciao ragazzi,
ho bisogno di un aiuto sulla realizzazione di un layout tableless.
Ora sono a questo punto:mentre invece il risultato a cui vorrei arrivare è questo
vorrei, insomma, far sì che il menù scendesse fino a piè di pagina...
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
-
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ù
-
@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.
Un aiutino?
-
@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.
Un aiutino?
Devi aggiungere al footer la proprietà:
div#footer { clear:left; }
Fammi sapere
-
@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: