Immagini flottanti in un div footer

Forum dedicato alla programmazione.

Moderatore: Staff

Regole del forum
1) Citare in modo preciso il linguaggio di programmazione usato.
2) Se possibile portare un esempio del risultato atteso.
3) Leggere attentamente le risposte ricevute.
4) Scrivere i messaggi con il colore di default, evitare altri colori.
5) Scrivere in Italiano o in Inglese, se possibile grammaticalmente corretto, evitate stili di scrittura poco chiari, quindi nessuna abbreviazione tipo telegramma o scrittura stile SMS o CHAT.
6) Appena registrati è consigliato presentarsi nel forum dedicato.

La non osservanza delle regole porta a provvedimenti di vari tipo da parte dello staff, in particolare la non osservanza della regola 5 porta alla cancellazione del post e alla segnalazione dell'utente. In caso di recidività l'utente rischia il ban temporaneo.
samiel
Staff
Staff
Messaggi: 5504
Iscritto il: ven gen 16, 2004 0:00
Nome Cognome: Mauro Sacchetto
Slackware: 13.0
Kernel: 2.26
Desktop: KDE
Distribuzione: anche Debian
Località: Venezia

Immagini flottanti in un div footer

Messaggioda samiel » mar ott 11, 2011 14:46

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.

roberto67
Packager
Packager
Messaggi: 293
Iscritto il: lun set 14, 2009 18:55
Slackware: 14.1 multilib
Desktop: kde
Contatta:

Re: Immagini flottanti in un div footer

Messaggioda roberto67 » mer ott 12, 2011 9:32

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}

Avatar utente
teox99
Linux 2.6
Linux 2.6
Messaggi: 737
Iscritto il: ven lug 25, 2008 14:54
Slackware: 13.37
Desktop: KDE - Xfce
Località: Roma[Eur]
Contatta:

Re: Immagini flottanti in un div footer

Messaggioda teox99 » mer ott 12, 2011 9:44

nel div devi dichiarare
overflow:auto

samiel
Staff
Staff
Messaggi: 5504
Iscritto il: ven gen 16, 2004 0:00
Nome Cognome: Mauro Sacchetto
Slackware: 13.0
Kernel: 2.26
Desktop: KDE
Distribuzione: anche Debian
Località: Venezia

Re: Immagini flottanti in un div footer

Messaggioda samiel » mer ott 12, 2011 16:40

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.

Avatar utente
aschenaz
Staff
Staff
Messaggi: 4541
Iscritto il: mer lug 28, 2004 0:00
Nome Cognome: Nino
Slackware: current 64bit
Kernel: as in current
Desktop: XFCE
Località: Reggio Calabria
Contatta:

Re: Immagini flottanti in un div footer

Messaggioda aschenaz » sab ott 15, 2011 9:14

Per il vertical-align fai così:

Codice: Seleziona tutto

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

samiel
Staff
Staff
Messaggi: 5504
Iscritto il: ven gen 16, 2004 0:00
Nome Cognome: Mauro Sacchetto
Slackware: 13.0
Kernel: 2.26
Desktop: KDE
Distribuzione: anche Debian
Località: Venezia

Re: Immagini flottanti in un div footer

Messaggioda samiel » gio nov 10, 2011 22:25

Grazie, visto solo ora!

M.

PS
La sintassi corretta è text-bottom :-)


Torna a “Programmazione”

Chi c’è in linea

Visitano il forum: Nessuno e 3 ospiti