CSS: Floating and Positioning

Kamis, Desember 08, 2011

Mata kuliah web development kali ini membahas tentang properti FLOATING dan POSITIONING. Dimana kedua properti tersebut berguna untuk mengatur tata letak elemen-elemen html. Di sini saya akan share sedikit yang saya pahami dari masing-masing elemen tersebut.

Float, merupakan elemen yang berguna mengatur posisi elemen html secara horizontal yang berpatokan pada elemen-elemen yang membungkusnya, entah itu DIV, Table, Browser dan yang lain. Seperti yang sudah saya katakan sebelumnya, elemen ini hanya dapat mengatur posisi secara horizontal, sehingga hanya memiliki empat buah nilai yang bisa dipakai yaitu: LEFT, RIGHT, NONE dan INHERIT. Untuk mengetahui kegunaan dari masing-masing nilai silakan langsung coba misal:
float: left; //atau yang lain
Cara kerja elemen ini adalah mengambangkan secara horizontal jika diartikan dalam bahasa Indonesia. Jika di sebelah kiri elemen float ada elemen float lainnya, secara otomatis elemen float yang kedua akan bergeser di samping elemen float pertama selama jendela browser masih cukup, jika jendela browser tidak mencukupi maka dengan terpaksa elemen float kedua akan bergeser di bawah elemen float pertama. Ini yang biasa digunakan untuk membuat menu :).

Positioning, mirip dengan float yang membedakan hanyalah penempatan elemen, jika dengan float kita hanya dapat membuat elemen html saling berdampingan, dengan positioning kita dapat membuat elemen html untuk saling tindih. Ada beberapa nilai yang dapat digunakan dalam properti positioning yaitu:
  • Static, menempatkan elemen html sesuai defaultnya, tidak ada yang 'nyeleneh'.
  • Fixed, menempatkan elemen html relatif dengan browser, tidak akan ikut bergeser ketika kita lakukan scroling pada browser. Elemen dengan position fixed akan mengubah default html. Elemen ini dapat menindih elemen yang lain. Sebagai catatan, untuk browser IE7 dan IE8 tidak mendukung elemen ini jika tidak dideklarasikan !DOCTYPE.
  • Relative, menempatkan elemen html pada posisi normal. Elemen position dengan nilai relative dapat berpindah dan menindih elemen yang lain. 
  • Absolute, menempatkan elemen secara relatif terhadap elemen induk / bungkus utama kecuali elemen dengan position static.
Overlapping, menempatkan elemen html seperti layaknya layer. Overlapping sendiri bukan termasuk nilai dari properti Positioning, namun berguna untuk mengatur dimana kita meletakkan sebuah elemen entah itu di depan, di belakang. Untuk menggunakannya setelah positioning gunakan syntax
z-index:-1
Nilai pada properti ini dapat berupa positif maupun negatif

Berikut ada beberapa percobaan yang sudah saya lakukan terkait floating dan positioning. Mungkin dapat dipelajari.

Download Percobaan Floating dan Positioning

Sedangkan untuk file tugas yang dapat di download pada link diatas, nantinya akan tampak seperti ini




Setelah memahami beberapa percobaan tentang CSS, kita dapat mencoba membuat template-template website maupun blog. Ini ada salah satu contoh kasus dimana saya mendapat tugas untuk mencoba membuat layout seperti yang ada pada halaman ini. Berikut hasil percobaan saya dalam mengotak-atik template yang saya mulai dari nol sehingga mirip dengan contoh tersebut

Kasus Pembuatan Template 1


Jika kurang jelas langsung saja kunjungi sini. Karena penggunaan iframe yang berpengaruh pada tampilan. sehingga agak geje tampilan yang muncul. Sangat disarankan menggunakan browser chrome untuk hasil yang maksimal :D

You Might Also Like

0 comments

Komentar spam enggak bakal aku approve lho. Gunakan nama asli bukan keyword :p

Facebook

Subscribe