it Home tutorial in Italiano;
Originale di questa pagina;
Traduzione di ratoize, 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 didascali 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