Jika kita menguasai float dalam CSS maka untuk kita tidak akan mengalami kesulitan dalam membuat layout/tampilan gallery. Contoh style untuk layout untuk gallery :
.gbr_kecil
{
float: left;
width: 100px;
height: 100px;
margin-top: 10px;
margin-left: 10px;
border:solid 1px #a0a0a4;
background-color: #f1db8d;
}
Kemudian coding dalam <body> nya :
<div class=”gbr_kecil”>Thumb 01</div>
<div class=”gbr_kecil”>Thumb 02</div>
<div class=”gbr_kecil”>Thumb 03</div>
Coding lengkapnya:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<style type=”text/css”>
body
{
margin: 0px;
padding: 0px;
}
#header
{
width:743px;
margin-left: 5px;
background-color: #e3e191;
border: 1px #a0b1a0 solid;
padding: 5px;
}
#kiri
{
float: left;
width: 200px;
padding: 9px;
margin-left: 5px;
margin-top: 5px;
margin-right: 5px;
background-color:#b3fd9d;
border: 1px #a0b1a0 solid;
}
#tengah
{
float: left;
width: 500px;
padding: 9px;
border: 1px #a0b1a0 solid;
margin-top: 5px;
margin-left: 10px;
background-color:#8ad3ec;
margin-bottom: 5px;
}
.gbr_kecil
{
float: left;
width: 100px;
height: 100px;
margin-top: 10px;
margin-left: 10px;
border:solid 1px #a0a0a4;
background-color: #f1db8d;
}
#footer
{
clear: left;
width:743px;
margin-left: 5px;
background-color: #ffceff;
border: 1px #a0b1a0 solid;
padding: 5px;
}
.clear_left
{
clear: left;
}
</style>
<title>Layout Gallery</title>
</head>
<body>
<div id=”header”>Menu 1| Menu 2 | Menu 3 | Menu 4 | Menu 5 </div>
<div id=”kiri”>Artikel lain:
<br/>Lagu 1
<br/>Lagu 2
<br/>Lagu 3
</div>
<div id=”tengah”>
<div class=”gbr_kecil”>Thumb 01</div>
<div class=”gbr_kecil”>Thumb 02</div>
<div class=”gbr_kecil”>Thumb 03</div>
<div class=”clear_left”></div>
<div class=”gbr_kecil”>Thumb 04</div>
<div class=”gbr_kecil”>Thumb 05</div>
<div class=”gbr_kecil”>Thumb 06</div>
<div class=”clear_left”></div>
<div class=”gbr_kecil”>Thumb 07</div>
<div class=”gbr_kecil”>Thumb 08</div>
<div class=”gbr_kecil”>Thumb 09</div>
</div>
<div id=”footer”>Development by PT Proweb Indonesia</div>
</body>
</html>
Hasilnya bisa dilihat pada http://aris.proweb.asia/layout_gallery.html atau seperti gambar di bawah ini:
Perhatikan bahwa setelah Thumb 03, gambar berikutnya turun. Ini karena ada coding <div class=”clear_left”></div> . Dengan tambahan coding ini maka jumlah gambar pada tiap baris bisa kita tentukan.
Kunjungi www.proweb.co.id untuk menambah wawasan anda.