Уеб Стыле Схеетс
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>

Затим у стилу лист користите класе "лик" у формату лик онако како желите. На пример, да плуте лик са десне стране, у простору једнака 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;
}

У ствари, само на прва два декларација (плуте и ширина) су неопходни, остала је само за украс.

Скалирање слике

Ту је један проблем овде, а то је да су слике мај бити преширока. У овом случају, слика је увек 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 and its
    fort in the evening sun
</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 (подручје унутар границе и паддинг).

Стављање назив на врх

Можете чак ставити наслов на врху, које говори броусеру да је бројка би требала бити форматирана као табела. Једноставно додавање ових правила на лист стила из претходних поглавља:

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

Тхе '+' узрокује правилу би се слагала П која следи други П. Шта значи у овом случају да је утакмица у другом П лик, онај који садржи наслов.

(Ово технике мај, изложити неке бугова у старијим прегледачима, посебно кад у комбинацији са скалирање слике, као што сам овде.)

Фигуре у XHTML

У тренутном (Јануары 2003) предлог за XHTML2 има Цаптион елемент, који мај се користити уз објекат. Ако тај предлог је прихваћен, она више неће бити потребно користити DIV и CLASS, али, барем у XHTML2 можете написати:

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

CSS ресурси

• Colors Style Sheet
• CSS Page Loading Times
• CSS Navigational Headings
• CSS tutorial
• CSS Background properties
• Creating Menus with CSS
• Style sheets for handheld devices