Arkusze CSS - rady i triki

Figury i opisy

HTML nie posiada elementu, który pozwala na zamieszczenie figury wraz z opisem. Kiedyś padła taka propozycja (zobacz HTML3) ale nie została ona wdrożona w HTML4. Oto jeden ze sposobów symulujący tego typu element:

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">
  <p>Model wieży Eiffel w Parc Mini-Francja</div>

W arkuszu użyta jest klasa "figure", która formatuje figurę w dowolnie wybrany sposób. Np: Aby figura była zawieszona po prawej stronie w obszrze równym 25% szerokości sąsiadujących paragrafów, zastosuj poniższy kod:

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

W rzeczywistości tylko dwie pierwsze deklaracje (float i width) są niezędne, reszta to jedynie dekoracja.

Skalowanie obrazu

Istnieje tutaj jeden problem, obraz może być za szeroki. W podanym przykładzie obraz ma zawsze szerokość 136 px a DIV ma rozmiar równy 25% otaczającego tekstu. Jeśli zmniejszy się szerokość okna, obraz może wyjść poza granice DIV (spóbuj!).

Jeśli zna się szerokość wszystkich obrazów dokumentu, można określić minimalną szerokość w DIV w następujący sposób:

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

Innym sposobem jest zmniejszenie wielkości obrazu. To właśnie zostało zrobioone z obrazem po prawej stronie. Jak można zauważyć, jeśli poszerzy się wielkość okna, obrazy JPEG nie skalują się dobrze. Jeśli obrazem jest wykres w formacie SVG, skalowanie działa bardzo dobrze. Oto kod znaczników, który tutaj zastosowaliśmy:

<div class="figure">
  <p><img class="scaled" src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Saint Tropez i fort w promieniach wieczornego słońca</div>

A oto kod w arkuszu:

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

Jedynym dodatkiem jest ostatnia reguła: Dopasowuje ona obraz do wielkości DIV (powierzchnia środkowa wewnątrz border i padding).

Umieszczanie opisu na gÓrze

Opisy m,ożna umieszczać u góry poprzez informowanie przeglądarek o tym, że figura ma być formatowana jak tabelka. Dodaj następujące reguły do arkusza z poprzedniej sekcji:

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

Znak '+' powoduje to, że reguła pasuje do P, który następuje po innym P. Oznacza to, że w tym wypadku pasuje do drugiego P figury, tzn tej, która zawiera opis.

(Technika ta może powodować problemy w starszych przeglądarkach, w szczególności, kiedy połączy się ją ze skalowaniem obrazu, jak w moim przykładzie.)

Figury w XHTML

Obecna (styczeń 2003) propozycja XHTML2 posiada element CAPTION, który może być używany z OBJECT. Jeśli propozycja zostanie zaakceptowana nie trzeba będzie używać DIV i CLASS, przynajmniej w XHTML2, będzie można napisać:

<object data="eiffel.jpg">
  <caption>Model wieży Eiffel w Parc
    Mini-Francja</caption>
</object>