Salve a tutti,
a questo indirizzo la pagina di test
http://www.dinuzzo.it/prova.html
vorrei posizionare in fondo a ogni pagina il footer ma non riesco a capire perche' non si visualizza correttamente. Se si prova a ridurre il testo (bla bla bla....) il footer va a posto.
Dov'e' che sbaglio?
Grazie
Saluti a tutti
Riccardo
dipende da come hai scritto il codice CSS della pagina;
nn è semplice risalire all'errore da quello che hai postato.
ciauz
"Le persone che realizzano layout con tabelle annidate, spacer gif o che ignorano l'accessibilità non possono più definirsi professionisti." Andy Clarke
--------------------------------
www.extrowebsite.com
si, dalla tua risposta mi rendo conto che non ho detto tutta la verita' e cioe' che la pagina che ho postato contiene nel codice html anche il css applicato. Cmq, lo inserisco qui di seguito:Originariamente inviato da floyd46
dipende da come hai scritto il codice CSS della pagina;
nn è semplice risalire all'errore da quello che hai postato.
CSS
codice xhtmlcodice:<style type="text/css"> <!-- html, body { margin: 0; padding: 0; height:100%; } body { background: #CCC; } #logo { background: white; height: 100px; } #menu { background: black; height:28px; } div#wrapper { background: white; margin: 0 auto; padding: 0; padding: 0; border: 0px solid #566; voice-family: "\"}\""; voice-family:inherit; width: 597px; position:relative; height: 100%; } body>div#wrapper{height: auto; min-height: 100%} div#pagebody{padding: 0 0 5em} div#footer {position:absolute; bottom: 0; width: 100%; background: black; } #maincontent { float: left; margin: 0 0 0 0; padding: 10px; width:300px; } #sidebar { margin: 5px 5px; width:150px; float:right; } #sidebar #subnav { padding: 2px 2px 2px 2px; background: white; border: 1px solid black; } --> </style>
codice:<body> <div id="wrapper"> <div id="header"> <div id="logo">logo</div> </div> <div id="menu"> <div id="vocimenu">vocimenu</div> </div> <div id="pagebody"> <div id="maincontent">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div> <div id="sidebar"> <div id="subnav"></div> </div> </div> <div id="footer">footer</div> </div> </body>
Saluti a tutti
Riccardo
ciao
l'unica cosa che ho fatto è questa:
solo che nn capisco come mai il footer nn arriva alla fine del "wrapper" ma in IE si ferma prima.codice:div#footer { clear:both; <<< ho aggiunto il both /*position:absolute;*/>> perchè position absolute ?? margin-bottom: 0px; background: black; }
fammi sapere
ciao
"Le persone che realizzano layout con tabelle annidate, spacer gif o che ignorano l'accessibilità non possono più definirsi professionisti." Andy Clarke
--------------------------------
www.extrowebsite.com
con il tuo consiglio mi sembra di aver risolto...Originariamente inviato da floyd46
ciao
l'unica cosa che ho fatto è questa:
...solo che nn capisco come mai il footer nn arriva alla fine del "wrapper" ma in IE si ferma prima.
ora lo applico al vero layout ma mi sembra vada bene
La sincera verita'?perchè position absolute ??
Non lo so! Abbandonata ogni speranza di cavarci le zampe ho fatto alcuni tentativi (e come si sa con i tentativi si fa poca strada). L'altra verita' e' che non ho ben capito la differenza tra relative e absolute.
Cmq, grazie per l'aiuto.
Saluti a tutti
Riccardo
Utilizzando ad esempio le tabelle relative fa si che l'oggetto si posiziona esattamente dove si trova, in altre parole è il posizionamento di default; absolute invece va utilizzato assieme a left:x e/o top:y (in cui x e y sono valori espressi in pixel), e serve per posizionare un oggetto in un punto preciso della pagina.
Per capire prova:
===========
<style type="text/css">
#prova1{position:absolute; left:200; top:300};
#prova2{position: relative}
</style>
===========
E poi fra i tag <body>...</body>
===========
<span id="prova1">Testo di prova1</span>
<span id="prova2">Testo di prova2</span>
===========
Grazie per l'esempio e la spiegazione. Ma ha senso quindi usare position: absolute senza specificare left e right?Originariamente inviato da smal
Utilizzando ad esempio le tabelle relative fa si che l'oggetto si posiziona esattamente dove si trova, in altre parole è il posizionamento di default; absolute invece va utilizzato assieme a left:x e/o top:y (in cui x e y sono valori espressi in pixel), e serve per posizionare un oggetto in un punto preciso della pagina.
Saluti a tutti
Riccardo
A mio parere no. Attenzione poi: position:absolute va usato assieme a left e top non right.Originariamente inviato da riccardone
Grazie per l'esempio e la spiegazione. Ma ha senso quindi usare position: absolute senza specificare left e right?
parte del codice css l'ho adattato da questo esempioOriginariamente inviato da smal
A mio parere no. Attenzione poi: position:absolute va usato assieme a left e top non right.
http://www.html.it/layout_css/layout_css_15.htm
dove viene indicata la position: absolute per il footer senza specificare left o top. L'impressione che ho e' che quando abbiamo un elemento con position: relative con al suo interno un altro elemento, specificando position: absolute per quest'ultimo lo assegnamo precisamente nel punto in cui e' rispetto al suo contenitore
Saluti a tutti
Riccardo
Permessi di invio
Rispondi quotando