Come fare a..‎ > ‎Grafica e disegno‎ > ‎

Come affiancare perfettamente due o piu` immagini (o gadget)

di Maria Silvana Radice    

How to align perfectly, two or more images (or gadgets):


 





Vi propongo due metodi.

Il primo metodo..

..consiste nell'utilizzare questo codice:

<div style="display:inline-block;padding:10px">
<a href="URLcollegamento"><img src="URLimmagine" border="0"></a>
</div>
<div style="display:inline-block;padding:10px">
<a href="URLcollegamento"><img src="URLimmagine" border="0"></a>
</div>
<div style="display:inline-block;padding:10px">
<a href="URLcollegamento"><img src="URLimmagine" border="0"></a>
</div>
<div style="display:inline-block;padding:10px">
<a href="URLcollegamento"><img src="URLimmagine" border="0"></a>
</div>

Le immagini si allineano relativamente alla loro base.

Esempio:


Il valore dato alla voce "padding" serve a distanziare le immagini tra loro e anche dal margine superiore e inferiore. Se volete specificare tale distanza, potete impostare il comando in questo modo:

padding: 10px 50px 30px 5px;

Ricordando che la sequenza è: "top right bottom left".

Per centrare il blocco delle immagini, è possibile racchiudere il tutto in un ulteriore div con questo comando: <div align="center">, oppure: <div style="text-align:center">

Ma....come affiancare, diversamente, immagini che sono di dimensioni differenti?

Per esempio, potrebbe capitare di dover allineare un'immagine orizzontale ed una verticale. Vediamo come fare....

Il codice, diventa così:

<div style="display:inline-block;padding:10px;vertical-align:middle">
<a href="URLcollegamento"><img src="URLimmagine" border="0"></a>
</div>
<div style="display:inline-block;padding:10px;vertical-align:middle">
<a href="URLcollegamento"><img src="URLimmagine" border="0"></a>
</div>
<div style="display:inline-block;padding:10px;vertical-align:middle">
<a href="URLcollegamento"><img src="URLimmagine" border="0"></a>
</div>

Il parametro che è stato aggiunto è <td style="vertical-align:middle"> e serve stabilire la linea di allineamento delle immagini.
La scelta è tra:

middle: le immagini sono affiancate seguendo la loro linea centrale.
Esempio:

bottom: le immagini sono affiancate seguendo la loro linea di base.
Esempio:

top: le immagini sono allineate seguendo la loro linea superiore.
Esempio:

Ecco fatto, per tutti i gusti :-)

Il secondo metodo..

..consiste  nell'utilizzare le tabelle, in questo modo:

<div align="left" style="width:100%"> 
<table cellpadding="0" cellspacing="2">
<tbody>
<tr>
<td>
<img width="80" src="URL immagine">
</td>
<td>
<img width="80" src="URL immagine">
</td>
</tr>
</tbody>
</table>
</div>

I parametri da modificare, nel codice, sono quelli in rosso, in questo modo:
  • div align="left" : indica la posizione del blocco di immagini rispetto alla pagina: left=sinistra, center=centro, rigth=destra.
  • cellspacing="2" : é la distanza tra le immagini, più alto è il numero, più saranno distanziate. Se le volete aderenti, mettete 0.
  • widht="80" : è la larghezza dell'immagine (l'altezza si regolerà, automaticamente, in proporzione).
  • URL immagine = qui dovete inserire l'indirizzo dell'immagine, che avrete caricato negli allegati del sito (come spiegato qui).

(Ho inserito il parametro widht, normalmente non presente in questo codice, perchè trovo molto comodo poter caricare immagini di qualunque dimensione, senza doverle ridimensionare prima con i programmi appositi.)

Se le immagini fossero di più, basterà ripetere, sotto l'indirizzo dell'ultima immagine e, più precisamente, sotto l'ultimo </td> e prima di  </tr>,  questa parte del codice:

<td>
<img width="80" src="URL immagine">
</td>

Se volete aggiungere una seconda fila di immagini sotto alla precedente, dovete ripetere, invece, tutta la parte tra <tr></tr> (tag compresi).

<tr>
<td>
<img width="80" src="URL immagine">
</td>
<td>
<img width="80" src="URL immagine">
</td>
</tr>

Aggiungere un collegamento:

Se volete aggiungere un collegamento alle immagini, dovete inserire il parametro href, in questo modo:

 <a href="URL collegamento"><img width="80" src="URL immagine">

Allo stesso modo delle immagini, potete affiancare anche dei gadget, copiandone il codice e incollandolo al posto di 
<img width="80"src="URL immagine">.

Se volete mettere un collegamento, sotto le immagini, il codice diventa così:

 <div align="left" style="width:100%">
<table cellpadding="0" cellspacing="2">
<tbody>
<tr>
<a href="URL collegamento" target="_blank">
<img
width="80" src="URL immagine">
</td>
<a href="URL collegamento" target="_blank">
<img
width="80" src="URL immagine">
</td>
</tr>
</tbody>
</table>
</div>

Al posto di URL collegamento, dovete mettere l'indirizzo della pagina web che si aprirà cliccando sull'immagine.

Per immagini in tabelle responsive, leggete la guida: Google sites - come ottimizzare il sito e i contenuti per il mobile






Aiuta il sito! Condividi questa pagina su:
 Facebook   twitter  Google   Linked  in