Spaziatura verticale paragrafi

[alex.zeta]

Salve a tutti,

ammetto che devo ancora capire perfettamente il funzionamento dei css; vorrei però capire come risolvere il problema evidenziato nell'immagine .

Notate che il logo kettenman si posiziona a fianco del logo aviator e non sotto come fanno gli altri, immagino perchè il paragrafo soprastante (...si dice soprastante!??!...) non contiene abbastanza testo per superare in altezza l'immagine allegata, e quindi non lo "spinge" in basso come fanno gli altri paragrafi.

Ho tentato con la proprietà display: table e funzionerebbe, ma ahimè è una proprietà non supportata da alcuni browser.

Qualcuno ha qualche idea?

Ciao ciao.
Alex
Padova

[seed_squall_it]

Se hai usato float: left o un posizionamento assoluto per le immagini è normale. Gli elementi flottanti o posizionati in modo diverso da quello di default (static) sono estratti dal flusso del documento, quindi la loro presenza non influenza i box ad essi adiacenti. La soluzione è diversa a seconda che tu abbia usato il float o il posizionamento assoluto:

1. Per il float, devi "ripulirlo" con un elemento ad hoc apena prima di chiudere il box che contiene l'immagine e il testo. Ad es., puoi usare un
appena prima di chiudere il box che contiene l'immagine e il testo a cui applichi una classe che fa semplicemente: clear: left. Questa istruzione ripulisce il float immediatamente prima di chiudere il box che contiene testo e immagine, e quindi l'altezza di tale box sarà pari a quella dell'elemento più alto (testo o immagine) che contiene, dato che ora i box flottanti al suo interno influenzano il suo layout.

2. Per il posizionamento assoluto, l'unica alternativa possibile è usare min-height sul box che contiene testo e immagine. Ovviamente ti serve l'hack per IE 5/6 che non supporta min-height. Il valore di min-height deve essere almeno pari all'altezza dei contenuti più alti (immagine o testo):

min-height: XXpx;
height: auto !important;
height: XXpx;

Questo hack funziona anche coi browser come IE 7 che interpretano correttamente min-height e la direttiva !important: è uno dei miei hack preferiti perché è a "prova di futuro".

PS: Wow! Ti chiami Alex e sei di Padova? Non è che siamo la stessa persona?

[Mich_]

Il problema e` che hai un float inserito in un blocco che float non e`.
Le soluzioni possibili son piu` di una; ti consiglio quella che ritengo piu` adatta al contesto.

Prima di chiudere il "non-float" devi inserire un elemento con il clear.

Un nome storico ...
  [img]avaiator.gif[/img]
  <br class="chiudifloat">
</p>

CSS:
p img {
  float left;
}
.chiudifloat {
  clear: both;
  height: 0;
  font-size: 0;    /* questo serve solo per IE6 /*
}

(spero di non aver inserito errori)

[alex.zeta]

Problema risolto..

Grazie a voi ora so qualcosa in più di css...

Alla prossima!!

Alex
Padova

PS:

PS: Wow! Ti chiami Alex e sei di Padova? Non è che siamo la stessa persona?

Sono il tuo alter-ego digitale.. e prima o poi vedrai apparire sul tuo terminale le parole "Wake up seed_squall_it. The matrix has you".. E allora saprai la verità..

Grazie x la dritta!