it Home Italiano - Originale Inglese;
Traduzione di Ratoize: il mio blog;
Consulenza lingua Inglese: English Conversation;
Ultimo aggiornamento traduzione: 30 Mag 2008;

Fogli di Stile per il Web
suggerimenti & trucchi sui CSS

(This page uses CSS style sheets)

Aggiungere didascalie

Ridimensionare un' immagine

Didascalia in cima

XHTML

Figure & didascalie

Eiffel tower

Scale model of the Eiffel tower in Parc Mini-France

Lo HTML non ha un elemento che permetta di inserire una figura con didascalia. Una volta è stato proposto (vedere HTML3) ma mai adottato nello HTML4. Ecco qui un modo per simulare un tale elemento figura:

<div class="figure">
<p><img src="eiffel.jpg" width="136"
height="200" alt="Eiffel tower">
<p>Scale model of the
Eiffel tower in Parc Mini-France
</div>

Dopo nel foglio di stile si usa la classe "figure" per formattare la figura nel modo voluto. Per esempio, per rendere la figura flottante a destra, dentro uno spazio pari al 25% dell'ampiezza dei paragrafi circostanti, queste regole servono allo scopo:

div.figure {
float: right;
width: 25%;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
div.figure p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}

Di fatto, solo le prime due dichiarazioni (float e width) sono essenziali, il resto è semplice decorazione.

ridimensionare un'immagine

C'è un problema qui e cioè che l'immagine potrebbe essere troppo larga. In questo caso, l'immagine è sempre 136 px larga e il DIV è il 25% del testo circostante. Quindi se si restringe la finestra, potrebbe essere che l'immagine ecceda il DIV (provare!).

Se si conosce l'ampiezza di tutte le immagini nel documento, si può aggiungere un'ampiezza minima al DIV, così:

DIV.figure {
min-width: 150px;
}

Un altro modo è ridimensionare l'immagine stessa. Cioè quello che abbiamo fatto con l'immagine qui sulla destra. Come si può probabilmente vedere se si allarga molto la finestra, le immagini JPEG non si ridimensionano molto bene. Ma se l'immagine è un diagramma o un grafico nel formato SVG, il ridimensionamento funziona meravigliosamente. Ecco qui il codice di mark-up usato:

<div class="figure">
<p><img class="scaled" src="st-tropez.jpg"
alt="St. Tropez">
<p>Saint Tropez and its
fort in the evening sun
</div>

St. Tropez

Saint Tropez and its fort in the evening sun

e questo è il foglio di stile:

div.figure {
float: right;
width: 25%;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
div.figure p {
text-align: center;
font-style: italic;
font-size: smaller;
text-indent: 0;
}
img.scaled {
width: 100%;
}

L'unica aggiunta è l'ultima regola: essa rende l'immagine tanto larga quanto l'interno del DIV (l'area dentro il bordo e il padding).

mettere la didascalia in cima

Cap Ferrat

The Mediterranean Sea near Cap Ferrat

Si può anche mettere la didascalia in cima, dicendo al browser che la figura dovrebbe essere formattata come una tabella. Semplicemente aggiungere queste regole al foglio di stile delle sezioni precedenti:

div.figure p {
display: table-cell;
width: 100%;
}
div.figure p + p {
display: table-caption;
caption-side: top;
}

Il '+' fa applicare la regola ad un P che segue un altro P. Che significa in questo caso che la fa applicare al secondo P della figura, quello che contiene la didascalia.

(Questa tecnica può dare qualche bug nei browser più vecchi, specialmente quando combinata col ridimensionamento dell'immagine, come fatto qui.)

Figure in XHTML

L'attuale (Gennaio 2003) proposta per lo XHTML2 ha un elemento CAPTION (didascalia), che può essere usato con OBJECT. Se questa proposta viene accettata, non sarà più necessario usare DIV e CLASS ma, almeno nel XHTML2, si potrà scrivere:

<object data="eiffel.jpg">
<caption>Scale model of the
Eiffel tower in Parc
Mini-France</caption>
</object>

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
creato il 17 Jan 2001;
ultimo aggiornamento: vedi documento originale