hisman.org newsletter

Dapatkan tips-tips menarik tentang web design langsung ke e-mail Anda (Gratis...)

All About CSS Float Technique (2)

posted by hisman in January 16th, 2010

category : CSS, layout, webdesign

Tags: , , ,

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

CSS Box Model

posted by hisman in January 14th, 2010

category : CSS, layout, webdesign

Tags: , ,

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?

css box model

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

All About CSS Float Technique (1)

posted by hisman in January 13th, 2010

category : CSS, Uncategorized, layout

Tags: , ,

Yup, kali ini saya akan mencoba membahas tentang teknik float di css. Artikel ini merupakan artikel berseri yang gak tau kapan selesainya :Peace: . Pokoknya saya akan coba bahas segala yang saya tau tentang float. Kalau ada yang mau mengoreksi silahkan :D . 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 :o .

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

Memahami Whitespace dalam Suatu Situs

posted by hisman in February 16th, 2009

category : layout, webdesign

Tags: , , ,

Mungkin Kamu dah pada tau apa itu (pengertian dari) whitespace ya.. tapi gak ada salahnya saya bahas sedikit pengertian whitespace itu, yah itung-itung biar artikelnya agak panjang dikit, hehe…

Whitespace ini hanya istilah sih sebenernya. Istilah untuk suatu area pada halaman suatu situs yang gak ada tulisannya ataupun gambar-gambar atau bisa juga dibilang area kosong.

Sadar atau tidak sadar, ketika mendesain sebuah situs kita sering melupakan keberadaan whitespace ini pada situs yang kita desain tersebut. Kita sering kali ingin selalu mengisi setiap ruang pada situs kita dengan tulisan, gambar, foto2 dll.. yang pada akhirnya hal ini akan membuat situs kita menjadi sumpek dan terlalu padat.

Atau kadang kala kita juga secara tidak sadar menggunakan whitespace ini. Misalnya ketika menggunakan padding, atau saat kita kehabisan ide untuk mengisi sidebar pada situs kita dan membiarkannya tetap kosong. Nah, saat itu sebenernya kita sudah menciptakan suatu whitespace. Selengkapnya..

Membuat layout yang ada menunya

posted by hisman in October 18th, 2008

category : CSS, HTML, layout, webdesign

Tags: , , , ,

Kemaren saya dah posting tentang cara ngebuat layout tanpa tabel, dan juga cara ngebuat menu horizontal. Nah, sekarang kita coba gabungin menu yang dah kita buat dengan layout yang udah kita buat juga. Selengkapnya..

copyright © 2010 hisman.org | web design and icon by hisman