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..

Dreamweaver merupakan tool/software pembuat website yang cukup terkenal dan powerfull. Beberapa webdeveloper menggunakan tool ini saat membuat suatu website. Saya juga awalnya menggunakan dreamweaver untuk membantu saya dalam pembuatan web.

Tapi lama-lama pake dreamweaver kadang bosen juga.. hehe. trus gak sengaja nemu webuilder 2010, tampilannya sederhana mirip kayak word 2003 kyknya, fungsi-fungsi yang ada di dreamweaver hampir ada semua di sini. Lumayan ringan juga installernya aja cuman sekitar 7 MB-an. Nih screenshotnya :

ini link resminya : http://www.blumentals.net/webuilder . Tapi sayang webuilder ini gak gratis alias bayar, yang bisa di download dari link resminya cuman demonya (limited 30 kali pake).

Tapi ada bajakannya kok, hehe… yang pengen coba bisa di download ada yang ngeshare nih di kaskus.

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..