Pada artikel sebelumnya Membuat design layout website bagaimana kita membahas design layout website dengan 960 css framework akan tetapi masih belum ada content – content pada layout tersebut pada artikel kali ini kita akan menambahkan design – design content agar layout terlihat lebih bagus. Pada Header menu kita akan menggabungkan juga dengan artikel yang juga sudah kita pelajari sebelumnya Membuat Dropdown menu tanpa Javascript, agar layout website yang kita bangun lebih menarik lagi. Ada sedikit tambahan dari sisi CSS dan dari sisi html tapi ini hanya bersifat pelengkap saja agar layout kita terlihat penuh dan menarik.
Berikut ini baris – baris kode yang perlu kita tambahkan
1. Pada File Html kalian dapat tambahkan code dibawah ini pada #content
<div id=”left_column” class=”grid_5″>
<div class=”block first”>
<h3>Article Category</h3>
<ul class=”menu_category”>
<li> <a href=”#”>Indonesia</a></li>
<li> <a href=”#”>Culture</a></li>
<li> <a href=”#”>Nature</a></li>
<li> <a href=”#”>People</a></li>
</ul>
</div>
<div class=”block iklan”>
Advertise
</div>
</div>
<div id=”right_column” class=”grid_11″>
<h2 class=”title”>Welcome to Indonesia </h2>
<p class=”welcome”>
Sudah merupakan fakta bahwa seorang pembaca akan terpengaruh oleh isi tulisan dari sebuah halaman saat ia melihat tata letaknya. Maksud penggunaan Lorem Ipsum adalah karena ia kurang lebih memiliki penyebaran huruf yang normal, ketimbang menggunakan kalimat seperti
“Bagian isi disini, bagian isi disini”, sehingga ia seolah menjadi naskah Inggris yang bisa dibaca. Banyak paket Desktop Publishing dan editor situs web yang kini menggunakan Lorem Ipsum sebagai contoh teks. Karenanya pencarian terhadap kalimat “Lorem Ipsum” akan berujung pada banyak situs web yang masih dalam tahap pengembangan.
Berbagai versi juga telah berubah dari tahun ke tahun, kadang karena tidak sengaja,
kadang karena disengaja (misalnya karena dimasukkan unsur humor atau semacamnya)
</p>
<div class=”list_category”>
<div class=”alpha grid_5″>
<h3>Indonesia</h3>
<ul class=”list_data”>
<li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
<li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
<li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
<li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
<li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
</ul>
</div>
<div class=”grid_6 omega”>
<h3>Culture</h3>
<ul class=”list_data”>
<li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
<li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
<li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
<li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
<li> <a href=”#”>Lorem ipsum dolor sit amet</a></li>
</ul>
</div>
</div>
</div>
bila kalian lihat pada browser akan sangat berantakan, karna kita belum menambahkan CSS.
2. Tambahkan code CSS agar html yang sudah kalian masukkan tadi menjadi bentuk yang sesuai dengan yang kita inginkan.
/* left column */
.first{margin:0!important;}
.iklan{height:90px;line-height:90px;hidden;background-color:#999;
display:block;text-align:center; color:#FFF;
}
.block{display:block;border:1px solid #999;margin:10px 0;}
.block h3{padding: 5px;text-align:left;text-transform:uppercase;
background-color:#FFF;
}
.block ul.menu_category{padding:5px;}
ul.menu_category li:before{content:”