Каскадні таблиці стилів
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>