Printable View
tutto nel titolo: come si può posiszionare dinamicamente un footer di chiusra pagina?
voglio dire, ho un corpo centrale con uno sfondo.
la pagina ha lunghezza variabile, per cui non posso imporre un posizionamento fisso.
come si può fare perchè il footer si attacchi perfettaemnte al corpo centrale, ma "senguendolo"?
Se il corpo centrale ha dimensioni variabili e quindi in percentuale non credo ci siano troppi problemi...basterà che il footer venga subito dopo il corpo centrale e se questo si allungherà o restringerà il footer gli starà sempre attaccato... :wink:
quindi non devo imporgli un TOP?
ma il posizionamento è sbagliato, si sovrappone al precedente...
è un casino!
Mi sembra strano...Ma si tratta di div??!!
In tal caso secondo me se ne metti uno sotto l'altro (e quindi il footer sotto il corpo) non ci dovrebbero essere problemi...Prova a dargli un margin-top: 5px e vedi che succede!!!
Ciao,Citazione:
Originalmente inviato da lsdforum
i due blocchi si sovrappongono perchè molto probabilmente stai utilizzando posizioni assolute (il top serve proprio a questo).
Un blocco in posizione assoluta esce dalla cascata e quindi non occupa "spazio"
prova in questo modo:
<div id="contenitore">
<div id="contenuto">blah blah</div>
<div id="footer">contenuto del footer</div>
</div>
A questo punto la posizione assoluta la dai al contenitore e non al contenuto
bye,
Marco
grazie, stavo provando a fare esattamente questo :DCitazione:
Originalmente inviato da loziosecchi
soltanto che sto cavolo di footer ho mi si attacca alla pagina in alto, oppure se uso bottom: 0; mi si attacca in basso :(
EDIT: niente non ci riesco.
mi esce un casino fastidioso.
ecco le prove del mio CSS:
è un pò smanacciato, ma è la bozza su cui sto provando a lavorare..Codice HTML:#contenitore{
postion: absolute;
left: 20%
}
#corpo{
background-image: url(./img/sfondo_corpo.jpg);
background-repeat : repeat-y;
position: relative;
/*left: 20%;*/
top:178px;
width:706px;
z-index:1;
padding: 20px;
}
#foot{
background-image: url(./img/footer.jpg);
/*background-repeat: no-repeat;*/
/*position: absolute;
left: 20%;*/
width: 705px;
height: 103px;
}
Allora secondo me nno ci devi scrivere postion: relative e invece che solo top dovresti scrivere margin-top: 10px; !!!
Anch'io nel mio sito ho dei div del genere, uno sotto l'altro e nei CSS ho una sintassi di questo tipo ad esempio:
DIV.corpo{ width: 700px;
TEXT-ALIGN: center;
margin-top: 10px;
}
DIV.footer{ width: 700px;
TEXT-ALIGN: center;
margin-top: 10px;
margin-bottom: 10px;
}
così peròCitazione:
Originalmente inviato da cflgroup2001
1) non rirsco a tenere centrato il DIV
2) tra corpo e footer c'è un margine di molti pixel che nn riescoa togliere
grazuie.
In questo modo si allineano al centro:
Ho modificato il codice di cflgroup...funziona sia su IE che su firefox.Codice:DIV.corpo{ width: 700px;
TEXT-ALIGN: center;
margin: 10px auto auto auto;
}
DIV.footer{ width: 700px;
TEXT-ALIGN: center;
margin: 10px auto auto auto;
}
Per diminuire la distanza tra corpo e footer, basta che imposti il margin del footer più o meno a -3px...comunque poi ti puoi regolare tu per la vicinanza, perchè a 0 rimangono abbastanza distanti ugualmente. Ciao ;)
Citazione:
Originalmente inviato da twisterdark
Rimangono abbastanza distanti solo se il padding è diverso da 0, come di default.
Metti un bel
EDIT: forse non mi sono spiegato: margin=0; E padding=0; li porta ad essere appiccicatiCodice:margin: 0;
padding:0; (padding funziona come margin per quanto riguarda lo specificare tipo padding: o auto auto 20 )
Mi sembra strano che ti restano distanti...In teoria se diminuisci il margin a 0px si dovrebbero attaccare...
guardate come esce!
http://lsdfreetime.altervista.org/errore.jpg
PS: @moderators sarebbe opportuno poer far allegare imamgini :DCodice HTML:#corpo{
background-image: url(./img/sfondo_corpo.jpg);
background-repeat : repeat-y;
TEXT-ALIGN: left;
margin: 178px auto auto auto;
width:706px;
z-index:1;
padding-left: 20px;
padding-right: 2px;
}
#foot{
background-image: url(./img/footer.jpg);
background-repeat: no-repeat;
TEXT-ALIGN: center;
margin-top: 0px auto auto 0px;
width: 705px;
height: 103px;
/*bottom: 0;*/
}
ciaoc iao
Per centrare il tutto prova innanzitutto a mettere tutti questi div dentro un altro div contenitore allineato centralmente (margin: 0 auto o un bel text-align: center nel body)!!! Per il resto forse c'è qualcosa che non va nel codice della pagina, ma mi sembra strano tutto quello spazio...
manca il "margin: XXpx auto auto auto", ora però non ho tempo di verificare se è davvero questo. Sorry...Codice:TEXT-ALIGN: center;
margin-top: 0px auto auto 0px;
width: 705px;
IO per risolvere il tutto ti consiglio una cosa del genere:
E poi nel CSS:Codice HTML:<div class="contenitore">
<div class="corpo"> bla bla </div>
<div class="footer"> bla bla </div>
</div>
Prova e fammi sapere...Codice HTML:body{
text-align: center;
}
.contenitore {
margin: 0 auto;
text-align: center;
}
.corpo{
background-image: url(./img/sfondo_corpo.jpg);
background-repeat : repeat-y;
margin-top: quelo che vuoi tu px;
margin-bottom: quello che vuoi tu px;
text-align: center;
width: quello che vuoi tu px;
}
.footer{
background-image: url(./img/footer.jpg);
background-repeat: no-repeat;
margin-top: quelo che vuoi tu px;
margin-bottom: quello che vuoi tu px;
text-align: center;
width: quello che vuoi tu px;
}
Mi scusi...ma io avrei inviato un post dove consigliavo dreamweaver che poteva farci consultare tutti i valori assegnabili ai css e alla posizione dei div...ke fine ha fatto???
CHe sto forum si mangia i post???
BOH....
"Questo messaggio è stato eliminato da twisterdark. Motivo: Non è il caso di pubblicizzare programmi...sorry"Citazione:
Originalmente inviato da traffyk
Se fai attenzione lo leggi, è proprio dove c'era il tuo post...comunque ribadisco, si danno consigli per risolvere il problema, non si pubblicizza un prodotto per agevolare l'utente ;)
Thanks...
AH ok Twister sorry...
Sono rimasto al regolamento del 2002.... MI sa che dovrò farmi una bella lettura...
finalmente cel'ho fatta...
solo che porbabilmente cel'avreif atta già da ttempo...
SU EXPLORERE FUNZIONA.. è su FIREFOX che fa c@g@r3!!!
avevo già usato la tecnica dei contenitori annidati, ma secondo me funzionavano anche prima di tutte queste modifiche..
ma perchè??? mannaggia la mucca sordaaaaaaaaaaaCodice HTML:#contenitore{
margin: 0 auto;
text-align: center;
}
#corpo{
background-image: url(./img/sfondo_corpo.jpg);
background-repeat : repeat-y;
TEXT-ALIGN: left;
margin-top: 178px;
margin-bottom: 0px;
width:706px;
z-index:1;
padding-left: 20px;
padding-right: 2px;
}
#foot{
background-image: url(./img/footer.jpg);
background-repeat: no-repeat;
TEXT-ALIGN: center;
margin-top: 0px ;
margin-bottom: 0px;
width: 705px;
height: 103px;
/*bottom: 0;*/
}
e mo?
MANNAGGIA FIREFOX!!!!
Allora: innanzitutto O usiCitazione:
Originalmente inviato da lsdforum
margin: A B C D;
OPPURE
margin-top: B;
Dopodiché, se fai caso, il corpo è posizionato con margine 178px alla sua sinistra verso destra, mentre il footer è a 0. E' per questo che sono sfasati
si sono stato scemo io.
sfasatura risolta..
ma in firefox non riescoa rimendiare allo sapzio tra i divs :(
http://lsdfreetime.altervista.org/errore2.jpg
Codice HTML:#corpo{
background-image: url(./img/sfondo_corpo.jpg);
background-repeat : repeat-y;
TEXT-ALIGN: left;
margin-top: 178px;
margin-left:20%;
margin-bottom: 0px;
width:706px;
z-index:1;
padding-left: 20px;
padding-right: 2px;
}
#foot{
background-image: url(./img/footer.jpg);
background-repeat: no-repeat;
TEXT-ALIGN: center;
margin-top: 0px ;
margin-left:20%;
margin-bottom: 0px;
width: 705px;
height: 103px;
/*bottom: 0;*/
}
Dovrebbe esserci un'altro valore simile al cellspacing delle tabelle che permette di impostare la distanza tra i div, ma nn ricordo quale sia il tag e mi pare che non fosse compatibile su tutti i broswer...Ho lo stesso problema in una chat che due div compaiono con lo spazio di distanza, se riesco a risolvere posto tutto qui.
Purtroppo con FF devio solo che andare a tentativi...Devi provare a variare le misure e devi trovare un giusto compromesso, consapevole del fatto che non saranno mai identici!!
MA è internet explorer il problema. Perchè FIrefox si limita a interpretare il codice scritto. Internet Explorer tende sempre a correggerlo.
Provate a fare <font color="FF0000">ciao</font>... il codice è errato ma internet explorer vede lo stesso il rosso..firefox no, perchè ci vuole anche il # davanti a FF0000.... da una parte è buono..ma chissà quante altre cose interpreta a suo piacere.,..
può anche essere che IE sia più morbido. per questo corregge un errore che commetto da qualche parte e mi fa veere bene tutto.Citazione:
Originalmente inviato da traffyk
ma avendovi proposto il codice 1000 volte, semba che sia tutto apposto, ma FF lo visualizza cmq male :(