Il sito per imparare gratuitamente a fare pagine Web

Immagini nel Testo

Questa guida Ŕ stampabile in modo agevole dalla versione off-line scaricabile dal men¨ laterale: Download.zip



Andrea Bianchi © www.web-link.it  Guida CSS Fogli di stile - Ver. 4.8.1   

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.

img {
display: block;
}

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

img {
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 : 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.

img {
float: left;
margin: 15px 15px 15px 15px;
}

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
img {
float: right;
margin: 15px 15px 15px 15px;
}

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:

img#testosx {
float: right;
margin: 15px 15px 15px 15px;
}
<img id="testosx" src="web-link.gif" width="245" height="133" alt="">

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:

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

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.

immagine con bordo impostato a 1

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.



Andrea Bianchi