Web Style Sheets
CSS съвети и трикове

Фигури и заглавия

HTML не притежава елемент, който да позволява показването на фигура със заглавие. Веднъж беше предложено (виж HTML3), но така и не бе включено в HTML4. Ето начин да се симулира такъв елемент за фигура:

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

После в style sheet се използва класа "figure" за форматиране на фигурата по желания начин. Например, за float на фигурата в дясно, в място равно на 25% от ширината на околните параграфи, тези правила ще изпълнят трика:

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

Фактически, само първите две декларации (float и width) са важни, останалото е само за декорация.

Умаляване на изображението

Това е проблем, защото изображението може да е твърде голямо. В такъв случай, картинката е винаги 136 px широка и DIV-а е 25% околния текст. Така, че ако направите прозореца по-тесен, може изображението да препокрие DIV-а (опитайте го!).

Ако знаете ширината на всички изображения в документа, можете да домавите минимална ширина за DIV-а, така:

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

Друг начин е да умалите самата картинка. Това е направено с изображението в дясно. Както може би виждате ако направите прозореца по-тесен, JPEG-картинката не се умалява добре. Но ако изображението е графика в SVG формат, умаляването работи чудесно. Ето и използвания код:

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

А това е style sheet-а:

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

Единственото, което е добавено, е последното правило: то прави картинката широка, колкото вътрешността на DIV-а (площа вътре в рамката и падинга).

Поставяне на заглавието отгоре

Заглавието може да се сложи дори отгоре, като се каже на браузъра, че фигурата трябва да е форматирана като таблица. Само с добавяне на няколко правила към style sheet-а от предната секция:

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

Плюсът '+' указва на правилото да важи за P, който следва друг P. Това в конкретния случай означава, че важи за втория P от фигурата, този, който съдържа заглавието.

(Тази техника може да предизвика някои бъгове в по-стари браузтри, особено в комбинация с умаляване на изображението, както е направено тук.)

Фигури в XHTML

Настоящото (януари 2003) предложение за XHTML2 има елемент CAPTION, който може да се използва с OBJECT. Ако това предложение се приеме, повече няма да е необходимо използването на DIV и CLASS, но най-малко в XHTML2, може да напишете:

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