Lihatlah tampilan contoh paragraf pada artikel dibawah ini…!
Jika anda tertarik untuk membuatnya, silahkan ambil contoh kode html dan css sintak-nya dibawah ini……..

Caranya adalah sebagai berikut:

• Pertama, buatlah sebuah dokumen baru pada Notepad, lalu ketikan <div class=”kolom-wrap></div>.
• Ketik <h1>JUDUL ARTIKEL</h1><hr/>diantara tag <div class=”kolom-wrap></div>.
• Dibawah tag </hr/>, ketik lagi sebuah tag <div class=”kolom”></div>.
• Diantara tag <div class=”kolom”></div> adalah isi paragraf dari sebuah artikel yang diawali dengan tag <p> dan ditutup dengan tag </p>.

Contoh kode HTML nya seperti ini:

<div class=”kolom-wrap>
<h1>JUDUL ARTIKEL</h1>
<hr/>
<div class=”kolom”>
<p>Sebulan sebelum hari raya NYEPI,
biasanya anak muda di Bali mulai sibuk untuk membuat Ogoh ogoh dalam rangka menyambut tahun baru Caka.</p>
<p>Seingat saya, sekitar tahun 1996 saya sudah mulai mengenal cara pembuatan ogoh ogoh,
saat itu bahan yang digunakan adalah Bambu sebagai kerangka utama dan kertas pembungkus semen sebagai penutup kerangka,
sedangkan kepala dari ogoh ogoh terbuat dari spon atau stereo foam.</p>
</div>
</div>

Setelah selesai membuat file HTML nya, sekarang kita buat style untuk mengatur tampilan nya agar seperti artikel di surat kabar, dengan menggunakan CSS seperti dibawah ini:

div.kolom-wrap {
border:1px solid #333333;
background: #ccc;
margin:0;
box-shadow: 3px 3px 3px #333333;
-moz-box-shadow: 3px 3px 3px #333333;
-webkit-box-shadow: 3px 3px 3px #333333;}

div.kolom-wrap h1 {
text-align:center;
color:#999999;
text-shadow: 2px 2px 0 #000;}

div.kolom-wrap hr {
border:3px solid #666666;
margin:0 2em;}

div.kolom {
-moz-column-count: 2;
-webkit-column-count: 2;
padding:5px 10px 0 10px;}

Langkah selanjutnya adalah melakukan test pada Browser anda…!
Catatan: Tampilan ini hanya berlaku pada Browser Mozilla versi 3.5.3 ke-atas, Google Chrome, Safari versi terbaru. Tidak berlaku untuk Intrenet Explorer.

I myself have experienced such a case to make me stress, and finally to the efforts and hard work, I found a software / freeware, called CSS Tab Designer.

I have to say that I was pleasantly surprised with the interface of this program. Pretty nice and easy to use, and the most important thing, it generates strict xhtml compliant code. That means you can be sure that your web site will be seen in any browser in the same way.

Another important feature is that you can edit the generated code to customize some properties when needed. Only one features is not present in the interface, you can’t make sub menus, which is a pity and sometimes needed, but you can make similar sub menus based on the original without too much effort.

You can Download CSS Tab for Web Designer here:

CSS Tab  Designer 2.0

Baiklah untuk lebih memperjelas fungsi z-index, saya akan memberikan ilustrasi seperti ini, Dalam sebuah halaman web terdapat 3 div yaitu:

<div class=”layer_1″>BERWARNA BIRU</div>
<div class=”layer_2″>BERWARNA HIJAU</div>
<div class=”layer_3″>BERWARNA KUNING</div>

Selanjutnya masing-masing class selector diberi style sepertti berikut:

div.layer_1 {
background-color:blue;
position:relative;
left:0;
top:0;
z-index:0;
}
div.layer_2 {
background-color:green;
position:relative;
left:20px;
top:-20px;
z-index:1;
}
div.layer_3 {
background-color:yellow;
position:relative;
left:40px;
top:-40px;
z-index:2;
}

div.layer_1, div.layer_2, div.layer_3 {
width:200px;
padding:20px 15px;
text-align:center;
font-size:14px;
font-weight:bold;
color:#000000;}

hasilnya akan tampak seperti dibawah ini:

Bila anda ingin merubah susunan layer tersebut, anda tinggal meng edit bilangan integer yang menjadi nilai z-index. dan kalau belum jelas tentang penggunaan z-index, silahkan isi comment form dibawah…! mudah mudahan Saya bisa bantu anda.

Properti Display, befungsi untuk mengatur tampilan suatu elemen pada browser. Nilai nilai yang dapat ditulis pada properti display adalah: inline, block, list-item, run-in, inline-block, compact, inline-table, marker, table, table-caption, table-cell, table-column, table-row, table-footer-group, table-header-group, table-column-group, table-row-group, inherit dan none.

contoh:

div#topMenu {display:inline;}

Properti Overflow, berfungsi untuk menentukan keadaan yang diperlakukan pada suatu elemen apabila isinya melebihi box diluarnya. Nilai nilai yang dapat ditulis pada properti overflow adalah: auto, visible, scroll, hidden dan inherit.

contoh:

.content { overflow:scroll;}

Properti Visibility, berfungsi untuk menentukan penampilan suatu elemen pada browser. Nilai nilai yang dapat ditulis pada properti visibility adalah: collapse, visible,  hidden dan inherit.

contoh:

.content img  { visibility:hidden;}

Properti Cursor, berfungsi untuk menentukan penampilan cursor ketika mouse melewati suatu elemen. Nilai nilai yang dapat ditulis pada properti cursor adalah: crosshair, pointer, move, text, wait, auto, default, help, e-resize, n-resize, ne-resize, nw-resize, se-resize, sw-resize, s-resize, w-resize, progress dan inherit.

contoh:

img a:hover  { cursor:pointer;}

Jika anda ingin melihat tampilan cursor yang lain pada browser, cobalah satu persatu dari nilai nilai properti cursor tersebut.

Properti Padding

Cara penulisan properti padding, hampir sama dengan cara penulisan properti margin, yaitu:

1.

div#sidebox {padding:10px;}

maksud dari code diatas adalah menunjukan bahwa ke empat sisi dari selector sidebox bejarak 10 pixel antara border dan content.

2.

div#sidebox {padding:10px 20px;}

maksud dari code diatas adalah menunjukan bahwa jarak antara border dan content pada sebelah atas dan bawah dari selector sidebox adalah 10 pixel sedangkan pada sebelah kiri dan kanan berjarak 20 pixel.

3.

div#sidebox {padding:10px 20px 30px 40px;}

atau bisa juga dengan cara seperti dibawah ini:

div#sidebox {padding-top:10px; padding-right:20px;
padding-bottom:30px; padding-left:40px;}

maksud dari code diatas adalah menunjukan bahwa jarak antara border dan content dari selector sidebox pada sebelah atas 10 pixel, kanan 20 pixel, bawah 30 pixel, dan kiri  adalah 40 pixel.

4.

div#sidebox {padding-top:10px;}

maksud dari code diatas adalah menunjukan bahwa border dan content dari selector sidebox pada sebelah atas adalah 10 pixel, sedangkan batas yang lainnya bernilai Default. Dan selain padding-top, juga bisa dengan properti padding-right, padding-bottom dan padding-left.

Selain dengan satuan px (pixel) juga bisa dengan satuan emphasis (em) atau persentase (%), seperti contoh:

div#sidebox {padding:1em 2%;}

Hasilnya ?…
anda bisa melakukan eksperimen sendiri kemudian test pada browser anda. dengan cara demikian akan membuat permainan anda semakin menantang.