Dokument http://www.accountzen.com/007/figures.html, je prijevod i može sadržati pogreške. Originalni službeni dokument može se vidjeti na https://www.w3.org/Style/Examples/007/figures.html. Pogreške možete prijaviti na moj e-mail matthewjon75@yahoo.com
Gatlinburg Cabins For Sale www.tampahomes.us.com www.300yards.com

Web Style Sheet
CCS savjeti i trikovi

(This page uses CSS style sheets.)

Dodavanje opisa

Razmjeravanje slika

Opis pri vrhu

XHTML

Slike i opisi

Ajfelov toranj

Maketa Ajfelova tornja u parku Mini-Francuska

HTML nema element koji omogućuje umjetanje slike sa opisom. Ovo je jednom bilo predloženo (vidi HTML3), ali nikada nije dospjelo u HTML4. Ovo je jedan od načina za simuliranje takvog elementa slike:

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Ajfelov toranj">
  <p>Maketa Ajfelova tornja u parku Mini-Francuska
</div>

Zatim u style sheet-ovima se koristi klasa "figure" za formatiziranje slike na način koji želite. Na primjer, da bi pomjerili sliku na desno, u prostoru jednakom 25% širine okolnog stavka, poslužiće ova pravila:

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

Zapravo samo prva dva stavka (float i width) su ključna, ostalo je samo za dekoraciju.

Razmjeravanje slike

Ovdje postoji jedan problem, a to je da slika može biti previše široka. U ovom slučaju slika je uvijek široka 136 px, a DIV je 25% okolnog teksta. Tako da ako napravite prozor užim, slika može prekoračiti DIV (probajte!).

Ako znate širinu slike u dokumentu, možete dodati minimalnu širinu u DIV, kao ovdje:

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

Drugi način je da se slika smanji. To je ono što smo uradili sa slikom ovdje na desnoj strani. Kako vjerojatno možete i vidjeti, ako napravite prozor veoma širokim, JPEG slike neće razmjeravati baš najbolje. Ali ako je slika dijagram ili grafikon u SVG formatu, razmjeravanje fukcionira odlično. Ovdje je oznaka koju smo mi iskoristili:

<div class="figure">

  <p><img class="scaled" src="st-tropez.jpg"
    alt="Saint Tropez">
  <p>Saint Tropez i njegova utvrda na večernjem suncu
</div>

Saint Tropez

Saint Tropez i njegova utvrda na večernjem suncu

A ovo je style sheet:

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

Jedini dodatak je posljednje pravilo: ono pravi sliku širokom koliko i unutrašnjost DIV (prostor unutar ruba i postave).

Postavljanje opisa na vrh

Cap Ferrat

Sredozemno more blizu Cap Ferrata

Opis možete postaviti čak i na vrh, obavještavanjem preglednika da slika treba biti formatizirana kao tabela. Samo dodajte ova pravila u style sheet prijethodnog odjeljka:

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

"+" prouzrokuje da pravilo sparuje P sa još jednim P. Što znači u ovom slučaju da sparuje drugo P slike. Ono koje sadržava opis.

(Ova tehnika može otkriti neke greške u starijim preglednicima, posebice kada je kombinirano sa razmjeravanjem slike, kao što sam uradio ovdje.)

Slike u XHTML

Trenutačni (January 2003) prijedlog za XHTML2 sadržava element CAPTION, koji mođe biti korišten sa OBJECT. Ako taj prijedlog bude usvojen, više neće biti nužno koristiti DIV i CLASS, ali, barem u XHTML2, možete napisati:

<object data="eiffel.jpg">
  <caption>Maketa 
	Ajfelova tornja u parku 
	Mini-Francuska</caption>
</object>

CSS Valid CSS!

Bert Bos
Dokument sastavljen 17 siječnja 2001
Posljednja izmjena $Data: 2009/02/03 14:39:10 $GMT