Каскадныя табліцы стыляў
CSS рады & прыёмы

Малюнкі & апісання

HTML не мае элементаў, якія бы дазволілі ўставіць у дакумент малюнак з подпісам. Ёсць магчымасць зрабіць гэта ў HTML3, але толькі не ў HTML4. У HTML4 толькі адна магчымасць зрабіць гэта:

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">

  <p>Маштабаваная мадэль Эйфелевай
  вежы ў Парку Міні-Францыя
</div>

Затым у табліцы стыляў выкарыстайце клас "figure" для фарматавання фігуры, як вам неабходна. На прыклад, для зрушэння фігуры направа на адлегласць ў 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 пікселяў шырыні і 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 и і яго форт у вячэрнім сонцы
</div>

А гэта табліца стыляў для гэтага малюнка:

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 (пляц усярэдзіне border і padding).

Размяшчэнне апісання зверху

Вы нават можаце змясціць апісанне зверху малюнка, калі скажаце браўзэру, што малюнак фарматаваны як табліца. Проста дадайце гэтае правіла ў табліцу стыляў з папярэдняй секцыі:

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>Маштабаваная мадэль Эйфелевай вежы ў Парку Міні-Францыя</caption>
</object>