Memang gw belajar membuat web dari tahun 2000 dan mulai mengimplementasikan kedalam projek – projek yang gw kerjakan dari tahun 2003, tapi semua layout web dibangun dengan menggunakan standar HTML Tag yaitu <TABLE>.
Setelah trend dari membuat web menggunakan tag <DIV> makan tahun 2008 gw beranikan diri untuk membuat layout website dengan menggunakan <DIV> dan CSS untuk layout dan tampilannya tidak menggunakan <TABLE> lagi, karena katanya banyak kekurangan setelah membaca postingan – postingan para designer website apabila menggunakan <TABLE>.
Gw pelajari standar – standar penggunaan DIV + CSS dalam membangun layout, dan semuanya mudah dan baik – baik aje pada mulanya, dan suatu saat gw akhirnya menemukan sebuah permasalahan yang asli gw udah cari – cari ke web2 orang tapi hasilnya nihil (mungkin karena keywords yang gw gunakan pada saat search kurang mantep deh yah, hehehe…), yaitu permasalahan pada saat gw menggunakan style FLOAT untuk menggeser sebuah <DIV>, salah satunya gw kasih contoh di bawah ini:
Gw buat sebuah CSS seperti ini:
.container {
border: 2px solid #ff4000;
width: 400px;
padding: 5px;
background: #ff9f00;
}
.block_kiri {
float: left;
border: 2px solid #000000;
width: 100px;
height: 200px;
background: #d1d1d1;
}
.block_kanan {
float: right;
border: 2px solid #000000;
width: 100px;
height: 200px;
background: #d1d1d1;
}
.konten_web {
border: 2px solid #000000;
margin: 0px 110px;
background: #ffffff;
margin-bottom: 2px;
}
.konten_web_kiri {
float: left;
border: 2px solid #000000;
margin: 2px;
}
Dan HTML dengan DIV seperti ini:
<div class="container">
<div class="block_kiri">Sidebar Kiri</div>
<div class="block_kanan">Sidebar Kanan</div>
<div class="konten_web">
<div class="konten_web_kiri">Konten Web Float Kiri</div>
<div class="konten_web_kiri">Konten Web Float Kiri</div>
<div class="konten_web_kiri">Konten Web Float Kiri</div>
</div>
<div class="konten_web">Isi Konten Lainnya</div>
</div>
Read the rest of this entry »
Popularity: 16%