April 6th, 2005
Ya, saya banyak dihubungi seputar masalah posting kemarin tentang layout 2 kolom. Mungkin bagi yang mempunyai pengetahuan tentang CSS atau sering menggeluti CSS, tulisan yang saya buat bisa dimengerti. Tapi diluar sana ternyata masih banyak yang tidak mengerti apa yang saya tulis. Untuk itu, akan saya coba untuk memperjelasnya disertai dengan kode XHTML dan CSS. Semoga banyak membantu.
Bagaimana merealisasikannya? Gambar yang bisa menjelaskan mungkin akan saya taruh kembali, sehingga bisa memperjelas tulisan saya. Tutorial dasar didapatkan dari sini
Langkah pertama
Yang perlu disiapkan, hanya sebuah editor. Tidak perlu memakai Dreamweaver, karena Dreamweaver lumayan memakan banyak memori. Carilah Editor yang ringan, dan tak banyak makan memori, gratis, tapi powerfull. Saya sendiri, karena sehari hari menggeluti PHP, memakai PHPEdit. Tapi, Crimson Editor sudah cukup bagi anda, karena dia termasuk keluarga EditPlus.
Langkah kedua
Buat sebuah file, beri nama coba.htm, kita akan membuat file XHTML. Perlu diingat, file XHTML ini hanya sebuah data, jadi, perbedaan mendasar dari XHTML dan CSS adalah, XHTML menampilkan data, sedangkan CSS, menyusun bagaimana data itu ditampilkan.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “xhtml11.dtd”>
<html>
<head>
<title>Ini judulnya, cuma test doang kok!</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<meta name=”author” content=”siape aje” />
<meta name=”description” content=”ape aje” />
<meta name=”keyword” content=”ape, ye” />
<link rel=”stylesheet” type=”text/css” href=”ini.css” />
</head>
<body>
<div id=”kotakbesar”>
<div id=”sidebar”>ini bagian sidebarnya, bagian samping, juga bisa dijadikan tempat menu</div>
<div id=”content”>nah, ini isi-nya, juga bisa disebut konten, atau apalah namanya, ya terserah anda.</div>
<!–<div id=”bottom”>ini bagian bawah</div>–>
</div>
</body>
</html>
Langkah ketiga
Buat file CSS, nama file yang sudah saya tentukan adalah ini.css. Ingat, file XHTML dan CSS ini harus dalam
satu folder. Berikut, adalah contoh Layout CSS berdasarkan masing-masing kotak pada gambar diatas.
Kotak pertama
Pada kotak pertama, kotak sidebar dibuat float, maka, tinggi kotakbesar akan mengikuti tinggi dari kotak content. Berikut CSS yang bisa ditulis.
body { text-align:center; }
div { border:1px solid #000; padding:5px; }
#kotakbesar { width:500px; text-align:left; border-color:#FF0000; }
#sidebar { float:right; width:200px; }
#content { width:280px; }
Yang terjadi adalah, kotak sidebar yang lebih tinggi dari kotakbesar, karena, isi dari kotak konten yang lebih sedikit dari kotak sidebar.
Kotak kedua
Pada kotak kedua, kotak sidebar dan kotak content dibuat float. Tugas anda hanyalah menambahkan satu baris sintak saja pada kotak content, menjadi :
body { text-align:center; }
div { border:1px solid #000; padding:5px; }
#kotakbesar { width:500px; text-align:left; border-color:#FF0000; }
#sidebar { float:right; width:200px; }
#content { width:280px;float:left; }
Kotak ketiga
Pada kotak ketiga, kita tak perlu tergantung lagi, siapa yang lebih banyak isinya, karena kotakbesar akan selalu mengikuti tinggi dari kotak yang paling tinggi. Caranya, lihat pada file XHTML pada bagian ini:
<!–<div id=”bottom”>ini bagian bawah</div>–>
hapus bagian komentar dari <!– sampai –>, agar menjadi seperti ini:
<div id=”bottom”>ini bagian bawah</div>
kemudian, tambahkan pada file ini.css, baris berikut pada akhir file.
#bottom { clear:both }
Yang perlu diingat adalah, tutorial ini tidak berlaku untuk IE, karena IE tidak menerapkan
standar web dari W3C. Makanya, IE Sucks!
10 Responses
wah mas didat, pertama saya tetap belom mengerti yang mas didat jelaskan (..maklum bolot pisan euy). kedua, saya pake IE di kantor…heeheheheuhe. ntar kalo ada tutorial yang laen deh, sy coba ikutin…:p
Didat, saya baru belajar CSS.. tapi basic sekali.
Saya boleh link ya…
I see your new layout :) owesome, expert!
hua! smarty + php! :D
salam kenal aja dats ^_^
materinya bagus, gue diajarin ya!
makasih lagi didat’s atas sharingnya..wassalam
Nice Tutorial.. Selama ini aku cuma pake tabel, ternyata diluar sana semua pake css layer. Salam kenal Dats, keep coding :)
kok content nabrak sidebarnya ya?
Akan tetapi, mas Didats… bisakah hal tersebut diantisipasi supaya dokumen tersebut dapat tersaji dengan baik pada sebarang browser? Nuwun.
Wahhh…jangan sampe anda begitu berat membenci IE :D…IE juga kan manusia ehh browser, semasa jaya2xnya IE, saya pengguna IE dan membenci FF ‘couse emang blm belajar CSS waktu itu :D..
salam damai