Immagini nel Testo

Quando si devono inserire delle immagini insieme con il testo, queste risultano essere in linea col testo stesso. I Fogli di Style permettono di cambiare questo allineamento tramite la proprietà vertical-align che accetta i seguenti parametri: baseline, top, middle, bottom, sub, super, text-top e text-bottom.

Personalmente trovo che il risultato non sia soddisfacente perchè l’iimagine è di solito più alta di una riga di testo e il risultato con le righe che precedono e quelle che seguono non è dei più gradevoli; ma è soltanto un mio parere e come tale va considerato.

Con la proprietà display è possibile cambiare il flusso naturale passando da linea a blocco e viceversa, quindi display: block; trasforma l’immagine in un blocco e genera un ritorno a capo permettendo al testo di disporsi sopra e sotto ma non di lato. display: inline; fa l’esatto contrario ripristinando il normale flusso.

Per avere il testo che circonda l’immagine si fa uso della proprietà float: con i parametri left o rightquesti permettono al testo di disporsi intorno all’immagine a sinistra o a destra.

Questo il risultato:

questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left n serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: left

Con l’attributo margin è possibile distanziare l’immagine dal testo agendo su ognuno dei quattro lati perimetrali.

Questo il risultato:

questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left n serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float : left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: left questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: left

Questo il risultato:

questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right questo testo non serve a nulla se non a far vedere l’effetto con testo e immagini facendo uso di float: right

Mettendo in pratica l’uso degli identificatori ID visto in precedenza, si procede ad assegnare un ID al nostro elemento img che poi sarà richiamato da html:

Il testo con float right non è bello a vedersi, lo si può aggiustare assegnando al testo il parametro per la giustificazione, <p align=”justify”> risulterà così molto ben ordinato:

Da notare la disposizione del testo intorno all’immagine ovale, si dispone formando un rettangolo, l’immagine infatti, anche se apparentemente ovale, ha una forma non visibile che può essere soltanto rettangolare o quadrata.

Non è infatti possibile creare immagini rotonde, si tratta di un effetto ottenuto impostando delle trasparenze negli angoli, se inseriamo il bordo si vedrà meglio il suo reale perimetro, lo stesso che il testo circonda.

L’effetto float potrebbe proseguire oltre il blocco definito creando effetti non desiderati, per mettere fine a questa impostazione è conveniente usare la proprietà clear nel blocco o immagine successivo. clear accetta come parametri: left, right e both dove con both si annullano entrambi. clear: both

Continua: Gli Oggetti

Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.