Belajar CSS

posted by Dini Shanti on May 26

Hari ini lagi ngerjain design untuk salah satu web baru ku, dan design nya tuh headernya full lebar screen gitu…

Ini ya, kode buat headernya:

#header {
position:absolute;
left:0;
top:0;
width:100%;
}

Dan letak kode headernya, di luar bagian yang lebarnya ditentukan (fix width) yaa.., misalnya:

<div id=header>
… isi header
</div>

<div id=content>
… isi content yang fix width
</div>

Contoh hasil bisa di lihat di www.dBC-Online.com

posted by Dini Shanti on Apr 12

Jika kita menggunakan design dengan lebar tetap, akan terlihat lebih cantik kalau design tersebut berada di tengah tampilan browser.

Hal ini bisa dengan mudah dicapai dengan menggunakan kode:

#outer {
margin: 10px auto;
}

Pasang kode css ini di sebagai property dari bagian paling luar yang menampung isi konten. Dalam contoh diatas, berarti digunakan id  #outer sebagai wadah paling luar. Nilai 10px di contoh adalah jarak antara id #outer dengan tepi atas browser.

Namun demikian, kode di atas tidak berjalan dengan baik di IE (Internet Explorer), jadi jika ingin tampilan di internet explorer juga rata tengah, maka perlu di panggil file css khusus IE dan gunakan kode:

#outer{
top: 44%;
left: 50%;
margin-top: -25%;
margin-left: -35%;
}

posted by Dini Shanti on Mar 16

Kode css ini akan memformat blok menu link dengan background dan warna font yang berubah ketika kursor mouse berada di atasnya. Read the rest of this entry »