Este documento é uma tradução de português (Europeu) do documento Inglês oficial.:
https://www.w3.org/Style/Examples/007/figures.html. Esta tradução foi proporcionada por Elisa Maria e pode conter alguns erros. Para eliminar dúvidas por favor consulte a versão oficial deste documento em Inglês. Versão de Português (Europeu):http://www.internetbootcamp.net/007/figures.html
Gatlinburg TN Cabins For Sale Smoky Mountain Cabin For Sale, www.300yards.com

Folhas Web de Linguagem de Estilo
Dicas e Truques CSS

(This page uses CSS style sheets.)

Adicionar legendas

Escala da imagem

Legenda no topo

XHTML

Figuras e legendas

Torre Eiffel

Modelo em escala da Torre Eiffel no Parque Mini-França

HTML não tem um elemento que lhe permita inserir uma figura com uma legenda. Foi uma vez proposto (ver HTML3), mas nunca chegou ao HTML4. Aqui está uma forma de simular uma figura:

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Torre Eiffel">
  <p>Modelo em escala da Torre Eiffel no Parque Mini-França
</div>

Então, na folha de linguagem de estilo, use a classe "figura" para formatar a figura da forma que desejar. Por exemplo, para flutuar a figura à direita, num espaço equivalente a 25% da largura em torno dos parágrafos. Estas regras irão fazer o truque:

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;
}

De facto, apenas as duas primeiras declarações (flutuar e largura) são essenciais, o resto é só decoração.

Escala da imagem

Existe um problema aqui, e isso é que, a imagem pode ser demasiado grande. Neste caso, a imagem é sempre de 136px de largura e os DIV são de 25% em torno do texto. Então, se tornar a janela mais estreita , pode ser que a imagem transborde o DIV (tente!).

Se souber a largura de todas as imagens no documento, pode adicionar uma largura mínima ao DIV, como esta:

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

Outra forma é ajustar a imagem por si própria. Isso é o que fizemos com a imagem aqui à direita. Como talvez veja, se fizer a janela muito grande, as imagens em JPEG não se ajustam muito bem. Mas se a imagem é um diagrama ou um gráfico no formato SVG, a escala funciona lindamente. Aqui é a mark-up é usada:

<div class="figure">

  <p><img class="scaled" src="st-tropez.jpg"
    alt="Saint Tropez">
  <p>Saint Tropez e a sua fortaleza ao entardecer
</div>

Saint Tropez

Saint Tropez e a sua fortaleza ao entardecer

E esta é a folha de linguagem de estilo:

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%;
}

A única junção é a última regra: torna a imagem tão ampla quanto o interior do DIV (a área dentro da fronteira e do padding)

Colocar a legenda por cima

Cap Ferrat

O Mar Mediterrâneo próximo de Cap Ferrat

Pode colocar a legenda no topo, ao dizer ao navegador que a figura deve ser formatada como uma tabela. Basta adicionar estas regras à folha de linguagem de estilo das secções anteriores:

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

O + faz com que a regra para juntar o P siga outro P. Neste caso significa que, corresponde ao segundo P da figura, a qual contém a legenda.

(Essa técnica pode expor alguns problemas nos navegadores mais antigos, especialmente quando combinada com a escala da imagem, como eu aqui fiz.)

Figuras em XHTML

A actual proposta (janeiro 2003) para XHTML2 tem um elemento de LEGENDA que pode ser usada com o OBJECTO. Se essa proposta for aceite, não será mais necessário utilizar o DIV e a CLASSE, mas, pelo menos em XHTML2, pode escrever:

<object data="eiffel.jpg">
  <caption>Modelo em escala da Torre Eiffel no Parque Mini-França</caption>
</object>

CSS Valid CSS!

Bert Bos
criado em 17 de Janeiro de 2001;
Última actualização $Data: 2009/02/03 14:39:10 $GMT