28. Le immagini di esempio

Il documento originale presenta anche delle immagini di esempio, solitamente allineate a sinistra rispetto al testo dei paragrafi e con una breve didascalia sottostante. Ne vediamo un esempio nell'immagine che segue.

Un'immagine di esempio Figura 20: Un'immagine di esempio [D]

La marcatura usata per questo elemento è la seguente:

  1. <span class="left">
  2. <img src="pig.gif" alt="Picture of a pig" />
  3. <span>Illustration 1:<br /> A picture of a pig</span>
  4. </span>

Ovviamente anche in questo caso sarebbe opportuno inserire una descrizione estesa dell'immagine, al fine di aumentare l'accessibilità della pagina. Gli stili relativi sono i seguenti:

  1. .left {
  2. float: left;
  3. margin: 0 0.5em 0.5em 0;
  4. border: 1px solid;
  5. font-size: 0.85em;
  6. padding-top: 0.25em;
  7. }
  8. .left img {
  9. margin: 0 auto;
  10. display: block;
  11. }
  12. .left span {
  13. display: block;
  14. font-style: italic;
  15. padding: 0.25em;
  16. }
  17. .left.noborder {
  18. border: none
  19. }

L'elemento span con classe .left è stato flottato a sinistra, gli sono stati attribuiti dei margini, un bordo ed il suo font è stato ridimensionato (righe 1-7). Si noti come l'elemento flottato non abbia una dimensione esplicita. In questo caso, le specifiche prevedono che venga applicato l'algoritmo shrink-to-fit, ossia la dimensione dell'elemento verrà determinata dal contenuto presente al suo interno. Questo permette di fatto di avere dei float liquidi, che avranno le dimensioni necessarie ad ospitare il loro contenuto.

Successivamente (righe 8-11) abbiamo reso di blocco l'immagine e l'abbiamo centrata all'interno del suo blocco contenitore tramite i margini orizzontali automatici. Quindi abbiamo formattato la didascalia (righe 12-16), rendendola di blocco, cambiando lo stile del font ed assegnandole del padding.

Infine (righe 17-19) abbiamo creato una classe ad hoc per eliminare il bordo dalle immagini che non ne hanno bisogno. Si noti la sintassi usata, con i nomi delle classi scritti in sequenza (classi multiple).

Possiamo apprezzare l'effetto finale nell'immagine che segue.

Un'immagine di esempio formattata con i CSS Figura 21: Un'immagine di esempio formattata con i CSS [D]

Purtroppo Internet Explorer 6 (ed inferiori) presenta dei problemi nel computo delle dimensioni dell'elemento flottato. È necessario modificare il codice CSS come segue:

  1. .left {
  2. float: left;
  3. margin: 0 0.5em 0.5em 0;
  4. border: 1px solid;
  5. font-size: 0.85em;
  6. padding-top: 0.25em;
  7. text-align: center;
  8. }
  9. .left span {
  10. display: block;
  11. font-style: italic;
  12. padding: 0.25em;
  13. text-align: left;
  14. }

In pratica si deve evitare di centrare l'immagine tramite margini orizzontali automatici, ricorrendo invece alla dichiarazione text-align: center (riga 7). Ovviamente in tal senso l'immagine non va dichiarata come blocco.