Cascading Style Sheets Positioning

Cascading Style Sheets (CSS) adalah dasar bagi Dynamic HTML pada baik Netscape Navigator 4.0 dan Internet Explorer 4.0. CSS memberikan cara untuk menciptakan seperangkat "gaya" yang mendefinisikan bagaimana elemen-elemen di halaman Anda tampil. Cascading Style Sheets Positioning (CSS-P) merupakan sebuah perluasan atas CSS yang memberikan pengembang kendali hingga piksel atas lokasi apa pun yang ada di layar. Karena sebenarnya sudah ada dokumentasi dan tutorial CSS dan CSS-P yang baik saya tidak akan menggandakannya — melainkan saya akan membangun di atas mereka.

Inilah dua dokumen/tutorial yang menjelaskan sintaksis CSS dan CSS-P:

Situs-situs tersebut akan memberikan pandangan menyeluruh yang lengkap dari CSS dan bagaimana mengimplementasikannya. Tetapi saya hanya akan secara cepat mengulangi bagian-bagian CSS yang akan digunakan di sepanjang tutorial ini.

Menggunakan Tag DIV:

Ketika menggunakan CSS-Positioning, properti-properti biasanya diterapkan atas tag DIV (divisi) — tag yang kosong, tak memberikan format, yang paling cocok bagi CSS. Ketika Anda meletakkan HTML atau teks ke dalam tag DIV, biasanya disebutkan sebagai salah satu dari "blok DIV", "elemen DIV", "lapisan CSS", atau saya menyebutnya hanya sebagai "lapisan". Ketika Anda membaca mengenai Dynamic HTML pada situs web atau newsgroup, jika seseorang berbicara tentang sesuatu dari istilah-istilah ini mereka semua berbicara tentang hal yang sama — cuplikan HTML yang ada di dalam tag "DIV" yang diposisikan.

Untuk menandai tag DIV yang kosong tidak berbeda dengan tag lainnya:

<DIV>
Ini tag DIV
</DIV>

Menggunakan tag DIV sendiri saja mempunyai hasil yang sama dengan menggunakan <P></P>.

Tetapi dengan menerapkan CSS kepada tag DIV kita dapat mendefinisikan di mana di layar cuplikan HTML ini akan ditampilkan, menggambar persegi atau garis, atau bagaimana menampilkan tulisan di dalamnya. Anda melakukannya dengan pertama-tama memberikan ID (seperti nama) kepada DIV yang bersangkutan:

<DIV ID="truk">
Ini sebuah truk
</DIV>

Terserah apa yang Anda gunakan untuk ID Anda. ID dapat merupakan rangkaian karakter-karakter (a-z, A-Z, 0-9, dan garis bawah), tetapi diawali dengan huruf.

Lalu Anda terapkan CSS Anda dengan salah satu dari dua cara berikut:

Inline CSS:

Inline adalah cara yang paling umum digunakan, dan merupakan cara yang saya gunakan untuk memulai menunjukkan bagaimana menulis DHTML dan JavaScript.

<DIV ID="truk" STYLE="gaya masuk di sini">
Ini sebuah truk
</DIV>

Tag STYLE eksternal:

Menggunakan metode eksternal akan bekerja juga, tetapi ada beberapa masalah yang mungkin timbul dengan menuliskan CSS seperti ini. Maka saya sarankan Anda tunggu sampai Anda tiba di pelajaran Lapisan Bersarang sebelum mencobanya sendiri. Untuk sekarang cukuplah untuk melihat bagaimana hal ini dilakukan....

<STYLE TYPE="text/css">
<!--
#truk {gaya masuk di sini}
-->
</STYLE>

<DIV ID="truk">
Ini sebuah truk
</DIV>

Perhatikan bagaimana ID digunakan di tag STYLE untuk menugaskan gaya-gaya CSS.

Properti-properti CSS Lintas Browser:

Karena tujuan situs ini adalah menghasilkan DHTML yang bekerja di baik Netscape dan Internet Explorer, kita agak terbatas dalam gaya/properti CSS yang dapat kita gunakan. Secara umum, properti-properti berikut adalah yang bekerja (sangat mirip) dengan standar yang didefinisikan oleh W3C.

position
Mendefinisikan bagaimana tag DIV akan ditempatkan — "relative" artinya tag DIV akan mengalir seperti tag HTML lainnya, sementara "absolute" berarti DIV akan ditempatkan pada koordinat tertentu. Penempatan absolut akan menjadi topik dari kebanyakan tutorial ini.
left
Lokasi kiri (jumlah piksel dari tepi kiri window browser).
top
Lokasi atas (jumlah piksel dari tepi atas window browser).
width
Lebar tag DIV. Semua teks/HTML yang dimasukkan ke dalam DIV akan dibungkus menurut isi nilai ini. Jika lebar tidak disebutkan semuanya akan berada dalam satu baris.

Penting:
Ketika menggunakan lapisan untuk animasi Anda harus selalu mendefinisikan lebar. Ini karena di IE nilai defaultnya adalah seluruh lebar layar. Jika Anda memindahkan layar di sepanjang layar sebuah scroll bar akan muncul di bawah, yang sangat menjengkelkan dan membuat animasinya lambat.

height
Tinggi tag DIV. Properti ini jarang digunakan kecuali jika Anda ingin memotong lapisan.
clip
Menyatakan wilayah persegi bagi pemotongan lapisan. Membuat DIV tampil pada persegipanjang yang telah didefinisikan. Anda menyebutkan ukuran persegipanjang dengan nilai dari keempat sisi:
clip:rect(atas,kanan,bawah,kiri);
visibility
Menentukan apakah tag DIV akan tampak ("visible"), tersembunyi ("hidden"), atau mengikuti leluhurnya ("inherit") yang merupakan nilai default.
z-index
Urutan penumpukan tag DIV.
background-color
Warna latar belakang DIV. Pada Netscape properti ini hanya berlaku bagi latar belakang tulisan. Ketika Anda ingin menggambar persegipanjang dengan CSS Anda harus juga mendefinisikan properti layer-background-color yang nilainya sama.
layer-background-color
Warna latar belakang DIV pada Netscape.
background-image
Gambar latar belakang pada Internet Explorer. Pada Netscape properti ini hanya berlaku bagi gambar latar belakang tulisan.
layer-background-image
Gambar latar belakang DIV pada Netscape.

Sintaksis CSS berbeda dari HTML. Anda dapat menggunakan titik dua untuk memisahkan properti dan nilainya, dan titik koma untuk memisahkan properti yang berbeda:

position: absolute;
left: 50px;
top: 100px;
width: 200px;
height: 100px;
clip: rect(0px 200px 100px 0px);
visiblity: visible;
z-index: 1;
background-color:#FF0000;
layer-background-color:#FF0000;
background-image:URL(namafile.gif);
layer-background-image:URL(namafile.gif);

Anda mempunyai sedikit keluwesan dalam mengisikan properti CSS. Anda tidak perlu menyebutkan semuanya. Spasi putih diabaikan, jadi Anda dapat menuliskan semuanya pada baris yang sama atau pada baris yang berbeda, memberikan tab di antara nilai-nilai, dsb. Seperti biasanya, satuan defaultnya adalah piksel, sehingga Anda tidak benar-benar perlu menuliskan "px" setelah nilai-nilai left, top, width dan height, meskipun hal ini disarankan.

position:absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); background-color:#FF0000; layer-background-color:#FF0000;

Contoh Inline:

<DIV ID="namadiv" STYLE="position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1;">
</DIV>

Contoh Eksternal:

<STYLE TYPE="text/css">
<!--
#namadiv {position: absolute; left:50px; top:100px; width:200px; height:100px; clip:rect(0px 200px 100px 0px); visiblity:visible; z-index:1;}
-->
</STYLE>

<DIV ID="namadiv">
</DIV>

Sebuah demo berharga sejuta kata:

Halaman Muka Pelajaran Berikutnya: JavaScript Lintas Browser
hak cipta 1998 Dan Steinman
Diterjemahkan oleh Mark P. Eliasaputra