[HTML] - Posizionare dinamicamente un footer

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...

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!!!

quindi non devo imporgli un TOP?
ma il posizionamento è sbagliato, si sovrappone al precedente...
è un casino!

Ciao,
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

Ciao,
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 :D
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:

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

è un pò smanacciato, ma è la bozza su cui sto provando a lavorare..

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

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ò
1) non rirsco a tenere centrato il DIV
2) tra corpo e footer c'è un margine di molti pixel che nn riescoa togliere

grazuie.

[twisterdark]

In questo modo si allineano al centro:

DIV.corpo{ width: 700px;
TEXT-ALIGN: center;
margin: 10px auto auto auto;
}

DIV.footer{ width: 700px;
TEXT-ALIGN: center;
margin: 10px auto auto auto;
}

Ho modificato il codice di cflgroup...funziona sia su IE che su firefox.
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 ;)

[pietrovischia]

Ho modificato il codice di cflgroup...funziona sia su IE che su firefox.
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 ;)

Rimangono abbastanza distanti solo se il padding è diverso da 0, come di default.

Metti un bel

margin: 0;
padding:0; (padding funziona come margin per quanto riguarda lo specificare tipo padding: o auto auto 20 )

EDIT: forse non mi sono spiegato: margin=0; E padding=0; li porta ad essere appiccicati

Mi sembra strano che ti restano distanti...In teoria se diminuisci il margin a 0px si dovrebbero attaccare...

guardate come esce!

#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;*/
}

PS: @moderators sarebbe opportuno poer far allegare imamgini :D
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...

[twisterdark]

TEXT-ALIGN: center;
margin-top: 0px auto auto 0px;
width: 705px;

manca il "margin: XXpx auto auto auto", ora però non ho tempo di verificare se è davvero questo. Sorry...

IO per risolvere il tutto ti consiglio una cosa del genere:

<div class="contenitore">
<div class="corpo"> bla bla </div>
<div class="footer"> bla bla </div>
</div>

E poi nel CSS:

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

Prova e fammi sapere...

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....

[twisterdark]

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"

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..

#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;*/
}

ma perchè??? mannaggia la mucca sordaaaaaaaaaaa
e mo?
MANNAGGIA FIREFOX!!!!

[pietrovischia]

guardate come esce!

#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;*/
}

PS: @moderators sarebbe opportuno poer far allegare imamgini :D
ciaoc iao

Allora: innanzitutto O usi

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 :(

#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.,..

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.
ma avendovi proposto il codice 1000 volte, semba che sia tutto apposto, ma FF lo visualizza cmq male :(