consiglio immagine float in paragrafo

**serialkiller** · 03-05-2007, 16:35

'giorno a tutti,

vi chiedo un consiglio...

ho una lista non ordinata che propone articoli composti da immagine più il testo descrizione che incornicia l'immagine.
L'immagine ha float:left, quindi si trova al top left del paragrafo con il testo, il mio problema è che la dove il testo è minimo, il paragrafo finisce prima dell'immagine e la stessa sborda dal paragrafo, incasinando l'impaginazione verticale, al momento non è disponibile online, ma posso posto il codice interessato.

Codice esempio

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
#test {display:block;width:100px;height:100px;background:#ddd;float:left;margin:5px 20px 0 0;border:6px solid #E2EBF4;padding:4px}
p {width:300px;text-align:justify;margin:0;padding:5px;border-top:5px solid red;border-bottom:5px solid red}
</style>
</head>

<body>




<span id="test">immagine</span>Testo
</p>

</body>
</html>

In questo caso ho usato uno span per simulare un eventuale immagine di dimensioni 100px X 100px, nella realtà ovviamente c'è un immagine.

NB: non posso usare min-height perchè le immagini caricate vengono ridimensionate da php, quindi se carico un immagine più alta che larga non posso sapere che min-height dare di default.

Grazie

**Mich_** · 03-05-2007, 17:07

Direi che ogni elemento della "lista" deve essere un oggetto che possa contenere sia testo che altri oggetti.
Non ti basta un

, dato che non riesce a "chiudere" il float dell'immagine.
Puoi usare ad esempio un <div>.
Quindi il codice diventa:

codice:

<div class="articolo">
  

<img ...>
  il resto del testo
  </p>
  <p class="clr">&amp;nbsp;</p>
</div>

Il CSS:
.articolo {
  width: 300px;
  margin: 0;
  padding: 5px;
  border: 5px 0 5px 0 solid red;
}
.articolo p {
  text-align:justify;   /* sarebbe da evitare, specie con una larghezza limitata */
}
.articolo img {
  float: left;
}
.clr {
  font-size:0;
  height: 0;
  clear: left;
}

**serialkiller** · 03-05-2007, 17:24

Ottimo, quindi essendoci l'immagine in float è meglio mettere il tutto all'interno di un div.

Per il text-align;justify; era li solo per esempio

altra cosa, hai scritto:

codice:

border: 5px 0 5px 0 solid red;

mai visto scritto così, e almeno in FF non funziona, è una svista o mi sono perso qualche cosa ?

**serialkiller** · 03-05-2007, 17:41

Questa poi, funziona su una pagina di esempio ma nella pagina reale, è come se non ci fosse

**Mich_** · 03-05-2007, 17:46

border: 5px 0 5px 0 solid red;

Secondo il manuale che uso abitualmente ( http://www.w3schools.com/css/css_reference.asp#border ), se non ho preso una cantonata dovrebbe funzionare.
E dovrebbe funzionare anche

codice:

border: 5px 0 solid red;

Pero` devo dire che non l'ho mai provato.

quindi essendoci l'immagine in float è meglio mettere il tutto all'interno di un div.

Ritengo di si`, altrimenti non si puo` inserire un altro elemento con il clear.

In alternativa anche il blocco contenitore deve avere il float, che in qualche caso potrebbe complicare il tutto.

**serialkiller** · 03-05-2007, 17:54

Originariamente inviato da Mich_
Secondo il manuale che uso abitualmente ( http://www.w3schools.com/css/css_reference.asp#border ), se non ho preso una cantonata dovrebbe funzionare.
E dovrebbe funzionare anche

codice:

border: 5px 0 solid red;

Pero` devo dire che non l'ho mai provato.

Ritengo di si`, altrimenti non si puo` inserire un altro elemento con il clear.

In alternativa anche il blocco contenitore deve avere il float, che in qualche caso potrebbe complicare il tutto.

Il codice l'ho testato su FF e non funziona, sarebbe stato molto comodo, infatti secondo me è una cosa che manca, un po' come si fa con padding o margin per capirci.

Facendo un po' più di attenzione, ho notato che funziona, era il vecchio css, un border del paragrafo faceva sembrare tutto come prima, per il resto io ho utilizzato un
al quale assegno la classe di ripulitura che uso anche altrove, non è meglio invece di un paragrafo vuoto? che ne dici ?

**serialkiller** · 03-05-2007, 18:02

su IE 7 e anche sul 6 non funziona

non il border, proprio tutto

**Mich_** · 03-05-2007, 18:06

per il resto io ho utilizzato un
al quale assegno la classe di ripulitura che uso anche altrove

La cosa e` controversa.
Ci sono tre idee:
-

- <hr />
- un oggetto di tipo blocco (

o <div> o sim.)

Ciascuna ha dei punti a favore ed a sfavore.
<hr /> e` contestato per altri motivi (non sarebbe un tag da includere in XHTML dato che fornisce formattazione).

non e` un oggetto di tipo blocco, per cui non puo` aver dimensioni ed occupa comunque dello spazio (pero` si puo` forzarlo a block, con il che` peraltro non potrebbe stare dentro un

, ma i validatori non riescono ad accorgene).

o sim inseriscono un oggetto che non ha significato semantico (se non di separatore), pero` ncessario per i browser gecko. Infatti il fatto di dover "chiudere" il float potrebbe essere un baco di tali browser (che io sappia IE non ce l'ha).

**serialkiller** · 03-05-2007, 18:28

Originariamente inviato da Mich_
La cosa e` controversa.
Ci sono tre idee:
-

- <hr />
- un oggetto di tipo blocco (

o <div> o sim.)

Ciascuna ha dei punti a favore ed a sfavore.
<hr /> e` contestato per altri motivi (non sarebbe un tag da includere in XHTML dato che fornisce formattazione).

non e` un oggetto di tipo blocco, per cui non puo` aver dimensioni ed occupa comunque dello spazio (pero` si puo` forzarlo a block, con il che` peraltro non potrebbe stare dentro un

, ma i validatori non riescono ad accorgene).

o sim inseriscono un oggetto che non ha significato semantico (se non di separatore), pero` ncessario per i browser gecko. Infatti il fatto di dover "chiudere" il float potrebbe essere un baco di tali browser (che io sappia IE non ce l'ha).

Allora, ho fatto altre prove...

la classe "ripulisci" che gia usavo era:

codice:

br.ripulisci {clear:both;line-height:0;font-size:0%;margin:0;padding:0;border:none}

per mettere d'accordo un po' tutti, compreso IE che anche dove non c'è testo assegna comunque un altezza di suo

se metto <br class="ripulisci"/>

funziona su FF e non su IE (tute le versioni umane 5 - 5.5 - 6 - 7)

dopo il tuo ultimo post ho provato con il paragrafo vuoto o mettendo display:block alla classe "ripulisci", solo così anche IE si comporta in maniera corretta, il fatto che pero' tu dica il contrario, mi lascia perplesso, o non ho capito niente io

Morale, si dice sempre che un elemento vuoto non è semanticamente corretto, non per niente uno span se non contiene almeno uno spazo (& n b s p

, viene calcolato come errore, vero anche che uno span non è un elemento blocco, ma inline, ma se non erro anche per un paragrafo vuoto vale la stessa cosa, ecco perchè "credo", e io non è che abbia molta voce in capitolo, sia meglio un
, su <hr/> siamo d'accordo perchè ha un suo significato ben preciso, come anche

, non che
non ne abbia, ma come dire, di per sè è un brake di linea, mi sembra meno "coinvolto" no ?

**Mich_** · 03-05-2007, 18:45

Forse mi sono spiegato male.

Anzitutto tutte le soluzioni contengono almeno un errore semantico di qualche tipo. Ma i browser sono quel che sono e dobbiamo fare di necessita` virtu`.

Per potergli dare la dimensione, un oggetto deve essere di tipo blocco: ecco perche` devi inserire il display al
. E` comunque una forzatura.

Qualsiasi oggetto di tipo blocco non potrebbe stare dentro il

. Ma se ci metti un
, il validatore non se ne accorge (e con le premesse fatte, ce ne freghiamo).

Comunque tutte le soluzioni prospettate sono funzionanti (con gli accorgimenti gia` citati) nei maggiori browser. Questo pero` non e` vero per i browser futuri.
La mia impressione e` che il
sia piu` debole, perche` viola una regola sintattica gia` esistente (in XHTML 1.0 Strict), mentre il <hr> e il

sono sintatticamente validi in tale DTD. Per cui <hr> e

potrebbero essere piu` robusti di fronte al futuro. Pero` questa affermazione va presa con le pinze: e` e resta una mia impressione.

Concludendo: non vale la pena dissertare sul sesso degli angeli, e nemmeno fasciarsi la testa prima di averla rotta: se una cosa funziona e ci piace usiamola, se poi domani scopriremo che e` sbagliata la correggeremo.

Discussione: consiglio immagine float in paragrafo

Strumenti discussione

Ricerca discussione

Visualizza

consiglio immagine float in paragrafo

Permessi di invio