Di CSS itu ada beberapa satuan panjang yang dapat dipakai untuk mengisi value di beberapa property yang ada di css. Misalnya untuk mendefinisikan berapa lebarnya, tebal bordernya, besar font-nya, margin, padding dan lain-lain.

Ada tiga satuan panjang di CSS yang sering dipakai oleh orang-orang, yaitu pixel (px), em dan persen (%), selain ketiga itu sebenarnya masih ada lagi sih coba deh cari di gugel… hehe. Nah, di sini akan saya coba bahas tentang ketiga satuan panjang itu dan juga bedanya.

Untuk memperjelas, ada contoh penggunaannya :

Demo Contoh | Download Contoh

Selengkapnya..

Ini adalah bagian kedua dari artikel berseri : All About CSS Float Technique. Di bagian pertama, saya sudah menjelaskan konsep dasar dari float itu dan juga ada sedikit contoh di sana. Nah, kali ini saya akan membahas contoh penggunaan float lebih lanjut lagi. Pertama, saya pake dua tag div, yaitu box1 dan box2 yang nantinya kedua div ini akan dipakai untuk mencoba teknik float:

<div id="box1">
 <h1>Box1</h1>
 <p>Etiam eu est est,....</p>
</div>

<div id="box2">
 <h1>Box2</h1>
 <p>Etiam eu est est,....</p>
</div>

Selengkapnya..

Setiap kali kita membuat suatu tag html, css akan menganggap tag itu bagaikan sebuah kotak (box). Saat kita mendesain / mebuat layout, kotak ini yang nantinya akan ditata sesuai keinginan kita dengan css. Konsep ini sering disebut css box model. Lalu, apa saja isi kotak itu?

Gambar di atas merupakan penggambaran dari css box model. Dari gambar tersebut terlihat isi dari css box model ini adalah content, padding, border, dan margin.

Selengkapnya..

Yup, kali ini saya akan mencoba membahas tentang teknik float di css. Artikel ini merupakan artikel berseri yang gak tau kapan selesainya . Pokoknya saya akan coba bahas segala yang saya tau tentang float. Kalau ada yang mau mengoreksi silahkan . Langsung aja ya…

Apa itu float?

Float itu bahasa inggris, klo di indonesia-in tuh artinya mengambang atau melayang. contohnya aja klo di restoran mesen minuman avocado float, nah di minumannya khan selain ada alpukatnya ada juga yang mengambang-ngambang di atasnya .

Di css ada properti yang namanya float. Valuenya itu ada right, left dan none. Lah, trus kalau kita pake properti ini apa yang mengambang?? yang mengambang itu adalah selektor (bisa tag, id atau class) yang dikasih properti float di css. Mengambangnya bisa ke kiri atau ke kanan tergantung dari valuenya.

Selengkapnya..

Sebelumnya, saya pernah membahas tentang cara membuat menu horizontal dengan css. Pada artikel tersebut, menunya dibangun dengan list (di htmlnya) yang sejatinya terlihat ke bawah (vertikal) tidak horizontal. Nah, css-nya yang membuat menu itu menjadi terlihat horizontal, di artikel itu menggunakan teknik float. Lebih lengkapnya silahkan kunjungi aja artikelnya.

Nah, kali ini kita akan coba membuat menu horizontal juga tapi dengan cara yang sedikit berbeda dengan artikel sebelumnya. Untuk menunya, tetap menggunakan list, yang berbeda hanya pada css-nya saja, terutama teknik yang digunakan untuk membuat tampilan menunya menjadi horizontal.

Oke, untuk contohnya kita buat dua file yang pertama adalah file index.html untuk isi htmlnya dan file style.css untuk cssnya.

Selengkapnya..