Guida base al CSS

Guida Topmanga

DISPORRE LE IMMAGINI IN UN CONTESTO CON IL CSS



Hai un testo e una immagine. Vorresti disporre l'immagine a destra o a sinistra, in alto o in basso rispetto al testo. Quello che prima potevi fare con il tag HTML align adesso lo puoi fare con il CSS. Per andare a definire gli spazi dell'immagine dagli altri elementi circostanti (altre immagini o testi) o l'allineamento del testo con l'immagine, si usa il CSS in quanto i vecchi codici "align" delle immagini non sono più supportati dall' HTML5.
Per l'allineamento del testo rispetto all' immagine in verticale scegli una delle voci del vertical-align: bottom | middle | top
Esempio con "bottom":


<img src="smiley.gif" alt="Smiley face" width="42" height="42"
style="vertical-align:bottom">
Guarda il risultato per capire meglio l'allineamento verticale:
immagine con allineamento "vertical-align:bottom":

testo testo testo testo testo Smiley face testo testo testo testo testo

immagine con allineamento "vertical-align:middle":

testo testo testo testo testo Smiley face testo testo testo testo testo

immagine con allineamento "vertical-align:top":

testo testo testo testo testo Smiley face testo testo testo testo testo

Se vogliamo mettere l'immagine tutta a destra o tutta a sinistra non potremo più usare gli attributi ALIGN ormai deprecati, bensì useremo FLOAT con il CSS. Possiamo impostare left o right:

<img src="smiley.gif" style="float:left">
Esempio con float left (cioè immagine tutta a sinistra):

Testo testo Smiley facetesto testo testo

Esempio con float right (cioè immagine tutta a destra):

Testo testo Smiley facetesto testo testo

Se inoltre vuoi lasciare un po' di spazio a destra o a sinistra, in alto o in basso, rispetto al testo che circonda l'immagine, quello che prima potevi fare con i tag HTML HSPACE o VSPACE, lo puoi fare con il CSS usando questa sintassi:

<img style="margin: 2px 2px 2px 2px">
dove i valori dei quattro margini impostati sono rispettivamente: alto, destra, basso e sinistra.