HTML Immagini e Testo

Come allineare il testo alle immagini: i float

  • Mar 24 DIC 2013
  • Mar
HTML Immagini e Testo
HTML Immagini e Testo
HTML Immagini e Testo
HTML Immagini e Testo
HTML Immagini e Testo

Troviamo spesso la necessità di impaginare un immagine all’interno di un testo e spesso ci troviamo ad inventare dei “barbatrucchi” per mettere le immagini nel posto giusto. Per fare questo ci viene in aiuto il Float uno stile che “mette tutto a posto”.

Allineamento a sinistra: vediamo come allineare un immagine a sinistra all’interno di un testo. Utilizzando il codice float:left; all’interno dello stile dell’immagine in questo modo:

img src=”Immagini/webmonkey.jpg” width="112" height="112" alt="float-left" style="float:left;

In questo modo però accade che il testo va a finire troppo vicino all’immagine, quindi dobbiamo dargli un po’ di “aria” per ottenere un impaginazione corretta graficamente, per fare questo utilizziamo lo stile margin in questo modo:
img src=”Immagini/webmonkey.jpg” width="112" height="112" alt="float-left" style="float:left; margin: 10px 10px 10px 10px;

Considerando che la logica dei margin risponde a questa regola : margin: top right bottom left;, si può modificare I valori per ottenere il risultato richiesto, comunque il risultato è questo:



Allinemaneto a destra: per effttuare questo allineamento basta invertire il floa dell’allineamento a destra in questo modo:
img src=”Immagini/webmonkey.jpg” width="112" height="112" alt="float-right" style="float:right; margin: 10px 10px 10px 10px;”

Inoltre se si necessita di un tipo di allineamento differente per ottenere un stile più pulito è possibile utilizzare il tipo di allineamento per il testo “justify”, che di solito è quello utilizzato quando si utilizza questo tipo di impaginazione.
p> style=”text-align:justify;” ….. testo da inserire …. img src=”Immagini/webmonkey.jpg” width="112" height="112" alt="float-right" style="float:right; margin: 10px 10px 10px 10px;” ….altro testo da inserire …..


Questo il risultato:



A volte invece si vuole risolvere il problema di inserire un immagine a dividere il testo, senza spezzare il testo inserito in due parti, di solito all’inserimento, al situazione che si presenta è quella in foto:



Per ovviare il problema viene in aiuto lo stile ”display:block” che applicato all’immagine risolve i nostri problemi:
img src=”Immagini/webmonkey.jpg” width="112" height="112" alt="display-block" style="display:block;


Di cui il risultato



Buona programmazione e via con i barbatrucchi!

DIC242013

Mar