Pagina 1 di 1

Immagini flottanti in un div footer

Inviato: mar 11 ott 2011, 14:46
da samiel
Ho un footer di questo tipo:

Codice: Seleziona tutto

<div id="footer">
<p>© Associazione «bla bla» -
2011</p>
<img class=\"piclogs\" src=\"pics/loghi/valid-css2-blue.png\" alt=\"Logo
CSS2\" title=\"Logo CSS2\" />
<img class=\"piclogs\" src=\"pics/loghi/valid-xhtml11-blue.png\" alt=\"Logo
XHTML 1.1\" title=\"Logo XHTML 1.1\" />
</div>
e il relativo CSS

Codice: Seleziona tutto

#footer{clear:both; text-align:center; padding:25px; background-color:white;
color:#1E247C; border-top:double #1E247C}
.piclogs{float:right; text-align:right; padding:25px 25px 0 0}
Ora, le icone sforano il footer e finiscono nel body,
che peraltro è di un diverso colore. Per farle stare dentro
il footer ho aggiunto dopo le icone un <p></p> vuoto con clear:right,
ma mi pare una soluzione sporca. L'alternativa che funziona
è usare il posizionamento assoluto, ma volevo capire se invece
si può risolvere lasciando le icone flottanti...

Grazie
M.

Re: Immagini flottanti in un div footer

Inviato: mer 12 ott 2011, 9:32
da roberto67
proverei a togliere il

Codice: Seleziona tutto

float:right
all'immagine e di usare un html come

Codice: Seleziona tutto

<p class="piclogs"><img src=\"pics/loghi/valid-css2-blue.png\" alt=\"Logo
CSS2\" title=\"Logo CSS2\" />
<img src=\"pics/loghi/valid-xhtml11-blue.png\" alt=\"Logo
XHTML 1.1\" title=\"Logo XHTML 1.1\" /></p>
e nel css

Codice: Seleziona tutto

p.piclogs {text-align:right}

Re: Immagini flottanti in un div footer

Inviato: mer 12 ott 2011, 9:44
da teox99
nel div devi dichiarare
overflow:auto

Re: Immagini flottanti in un div footer

Inviato: mer 12 ott 2011, 16:40
da samiel
Funzionano entrambe.
La prima mi pare un po' più "manuale", come quella che avevo abborracciato io.
La seconda mi sembre più raffinata. Però - visto che con l'overflow (al quale
in effetti non avevo pensato affatto) le immagini non sono collocate
all'interno di un <p>, non dovrebbe funzionare anche il vertical-align?
Invece, dato che le immagini sono di dimensioni leggermente diverse,
che io metta vertical-align a top o a bottom non si sposta nulla...

Grazie
M.

Re: Immagini flottanti in un div footer

Inviato: sab 15 ott 2011, 9:14
da aschenaz
Per il vertical-align fai così:

Codice: Seleziona tutto

div#footer img{vertical-align:bottom-text}

Re: Immagini flottanti in un div footer

Inviato: gio 10 nov 2011, 22:25
da samiel
Grazie, visto solo ora!

M.

PS
La sintassi corretta è text-bottom :-)