Dokumen ini adalah terjemahan dari CSS tips & tricks - CSS: figures & captions dan mungkin terdapat kesalahan penerjemahan.

Dokumen aslinya dapat di temukan di: http://www.w3.org/Style/Examples/007/figures

Penerjemah: Edwin Rene

Web Style Sheets
CSS tips & tricks

(This page uses CSS style sheets)

Menambah keterangan

Membuat gambar mengikuri skala

Keterangan di atas

XHTML

Gambar dan keterangan gambar

Eiffel tower

Scale model of the Eiffel tower in Parc Mini-France

HTML tidak memiliki sebuah elemen yang memungkinkan kita untuk memasukkan sebuah gambar dengan keterangannya. Meskipun pernah diusulkan (lihat HTML3), tapi tidak berhasil muncul di HTML4. Berikut adalah sebuah cara untuk mensimulasi elemen gambar seperti itu:

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

Lalu di dalam style sheet tersebut anda menggunakan class "figure" untuk menformat gambar tersebut seperti yang anda inginkan. Sebagai contoh, untuk menposisikannya di sebelah kanan, dengan tempat sebesar 25% dari paragraf yang mengelilinginya, aturan berikut bisa melakukan trik tersebut:

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

Bahkan hanya dua deklarasi pertama yang (float and width) yang penting, sisanya hanyalah dekorasi.

Membuat gambar mengikuti skala

Ada satu masalah disini, dan itu adalah bahwa gambarnya mungkin terlalu lebar. Dalam hal ini, gambarnya akan selalu berukuran 136px untuk lebarnya dan DIV berukuran 25% dari teks yang mengelilinginya. jadi bila anda membuat jendelanya lebih kecil maka gambar tersebut akan keluar  dari DIV tersebut (cobalah!).

Bila anda mengetahui lebar dari semua gambar di dokumen, anda dapat memberikan sebuah lebih minimum untuk DIV, seperti ini:

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

Sebuah cara lain adalah untuk membuat gambar itu mengikuti skala. Itulah hal yang kita lakukan dengan gambar di sini. Seperti yang mungkin dapat anda lihat. bila anda membuat jendelanya sangat lebar, JPEG tidak mengikuti skala dengan baik. Tetapi bila gambar tersebut adalah sebuah diagram atau grafik dalam bentuk format SVG, gambar tersebut akan mengikuti skala dengan baik bahkan dengan sangat bagus. Berikut mark-up yang kita gunakan:

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

St. Tropez

Saint Tropez and its fort in the evening sun

Dan ini adalah style sheet tersebut:

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

Tambahannya adalah aturan yang terakhir: Hal tersebut membuat gambar bertambah lebar sesuai dengan bagian dalam DIV (daerah didalam border dan padding).

Menaruh keterangan gambar diatas

Cap Ferrat

The Mediterranean Sea near Cap Ferrat

Anda juga bisa menambahkan gambar diatas, dengan memberitahukan browser bahwa gambar tersebut harus diformat sebagai sebuah tabel. Cukup tambahkan aturan berikut pada style sheet dari bagian sebelumnya:

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

Tanda '+' menyebabkan aturan tersebut akan berlaku untuk sebuah P yang berada setelah sebuah P lainnya. Dalam hal ini berarti bahwa P kedua setelah gambar, yaitu yang mengandung keterangan gambar.

(Tehnik ini dapat menyebabkan kesalahan pada browser lama, khususnya ketika dikombinasikan dengan memberi skala pada gambar, seperti yang saya lakukan disini.)

Angka pada XHTML

Proposal tekini (January 2003) dari XHTML2 mempunyai elemen CAPTION, yang dapat digunakan dengan OBJECT. Jadi bila proposal tersebut diterima, tidak dibutuhkan lagi untuk menggunakanDIV dan CLASS, tetapi, setidaknya pada  XHTML2, anda dapat menulis:

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

CSS Valid CSS!Valid HTML 4.0!

Bert Bos
created 17 Jan 2001;
last updated $Date: 2007/10/27 00:47:16 $ GMT