Foi de Stil Web
Indrumari si Trucuri CSS

Figuri & subtitluri

HTML nu are un element care permite inserarea unei figuri cu un subtitlu. A fost propus odata (vedeti HTML3), dar nu a ajuns niciodata in HTML4. Iata un mod de a simula un asemenea element figura:

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="turnul Eiffel">
  <p>Model la scara al turnului 
    Eiffel in Parcul Mini-France
</div>

Apoi in foaia de stil utilizati clasa "figure" pentru a formata figura in modul in care doriti. De exemplu, pentru a deplasa o figura catre dreapta, intr-un spatiu egal cu 25% din latimea paragrafelor inconjuratoare, aceste reguli vor aranja trucul:

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

De fapt, numai primele doua declaratii (float si width) sunt esentiale, restul este numai pentru decorare.

Scalarea imaginii

Exista o problema, si aceasta e ca imaginea ar putea fi prea larga. In acest caz, imaginea este intotdeauna lata de 136 px si DIV este 25% din textul inconjurator. Asa ca daca faceti fereastra mai ingusta, se poate intampla ca imaginea sa depaseasca DIV (incercati!).

Daca cunoasteti latimea tuturor imaginilor din document, puteti adauga o latime minima pentru DIV, ca aceasta:

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

Un alt mod este sa se scaleze imaginea insasi. Asta e ceea ce am facut cu imaginea de aici din dreapta. Dupa cum probabil puteti vedea, daca faceti fereastra prea larga, imaginile JPEG nu se scaleaza foarte bine. Dar daca imaginea este o diagrama sau un grafic in format SVG, scalarea lucreaza de fapt foarte frumos. Iata marcajul pe care l-am utilizat:

<div class="figure">
  <p><img class="scaled" src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Saint Tropez si fortul
    lui in soarele serii
</div>

Si aceasta este foaia de stil:

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

Singura adaugare este ultima regula: ea face imaginea atat de larga cat interiorul DIV (zona din interiorul granitei si captuselii).

Punerea titlului deasupra

Puteti chiar sa puneti titlul deasupra, spunand browserului ca figura ar trebui formatata ca un tabel. Adaugati doar aceste reguli la foia de stil din sectiunile precedente:

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

Semnul '+' determina regula sa scaleze (potriveasca exact) continutul unui P care urmeaza un alt P. Asta inseamna in acest caz ca scaleaza al doilea P al figurii, acel care contine titlul.

(Aceasta tehnica poate expune anumite buguri in browserele mai vechi, in mod special cand sunt combinate cu scalarea imaginii, asa cum am facut aici.)

Figuri in XHTML

Propunerea curenta (Ianuarie 2003) pentru XHTML2 are un element CAPTION, care poate fi utilizat cu OBJECT. Daca acea propunere este acceptata, nu va mai fi necesar sa se utilizeze DIV si CLASS, dar, cel putin in XHTML2, puteti scrie:

<object data="eiffel.jpg">
  <caption>Model la scara al 
    turnului Eiffel in Parcul 
    Mini-France</caption>
</object>