5 Permasalahan yang membingungkan bagi CSS Newbie 30 August 2011 23 Komentar Bagikan ke teman Anda : Dulu, sebelum saya mengerti CSS, saya selalu mencari berbagai referensi yang berhubungan dengan CSS dan HTML. jika hanya mengandalkan membaca dari referensi tersebut saya rasa saya masih belum bisa untuk membuat desain web mandiri. Kadang masih bingung, apa yang harus dilakukan selanjutnya. Tidak cukup hanya dengan membaca dan tahu, bagi anda yang ingin belajar CSS / webdesign, anda harus membuat kasus sendiri, latihan menggunakan berbagai property dan value dari CSS atau tag dan attribut dari HTML agar pada akhirnya anda mengerti sendiri untuk apa semuanya. Berikut ini adalah 5 permasalahan bagi seorang CSS Newbie (yang masih belum tau apa-apa tentang CSS) yang sering ditemukan, termasuk oleh saya dulu. . Masalah ke-1 : CSS Reset Sewaktu latihan CSS, saya berniat untuk membuat bar yang berada di atas halaman web, seperti pada gambar berikut ini.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
5 Permasalahan yang membingungkan bagi CSS Newbie
30 August 201123 Komentar
Bagikan ke teman Anda :
Dulu, sebelum saya mengerti CSS, saya selalu mencari berbagai referensi yang berhubungan dengan CSS dan HTML. jika hanya mengandalkan membaca dari referensi tersebut saya rasa saya masih belum bisa untuk membuat desain web mandiri. Kadang masih bingung, apa yang harus dilakukan selanjutnya.Tidak cukup hanya dengan membaca dan tahu, bagi anda yang ingin belajar CSS / webdesign, anda harus membuat kasus sendiri, latihan menggunakan berbagai property dan value dari CSS atau tag dan attribut dari HTML agar pada akhirnya anda mengerti sendiri untuk apa semuanya.Berikut ini adalah 5 permasalahan bagi seorang CSS Newbie (yang masih belum tau apa-apa tentang CSS) yang sering ditemukan, termasuk oleh saya dulu. .
Masalah ke-1 : CSS Reset
Sewaktu latihan CSS, saya berniat untuk membuat bar yang berada di atas halaman web, seperti pada gambar berikut ini.
Lalu saya buat sebuah div dengan id topbar,dan Dengan gesitnya saya langsung menerapkan style seperti berikut .
#topbar{width:100%;
height:30px;background:#333;
}
saya save dan langsung melihat previewnya di browser. yes topbarnya udah diatas, tingginya bener, lebarnya udah bener 100%, tapi kok serasa ada yang mengganjal . apaa yah.. ?
Ada jarak !!??, gimana nih. coba pake margin:0 juga g mau nempel tuh topbar.
Solusi
Untuk kasus diatas, anda harus mengerti apa yang sebenarnya terjadi. hal ini terjadi karena setiap browser memiliki css defaultnya masing-masing. file css bawaan ini akan diterapkan disetiap halaman web yang di load pada browser.pernahkan anda bertanya, dari mana datangnya besar huruf H1 sampai H6 ?, atau jarak antara Ul atau Ol, atau kenapa tag i bisa miring, tag b bisa tebal dan seterusnya dan seterusnya?.Untuk itulah CSS reset hadir. CSS reset digunakan untuk mereset ulang nilai-nilai yang telah diterapkan pada file CSS bawaan browser.sekarang coba anda tambahkan, baris style berikut :
*{margin:0;padding:0;
}
Tanda bintang (*) adalah selector untuk semua element html, sama halnya dengan memberikan style pada html.
If “Reset” sounds complicated, don’t worry. it’s quite simple. Mostly it involves zeroing out margins and padding.-Jeffrey Way-
dan liat apa yang terjadi, kini topbarnya merapat ke sisi browser .CSS Reset tidak hanya itu, jika anda ingin memulai memformat halaman web dari awal berari anda juga harus mereset seluruh value dari setiap property yang ada menjadi normal.Kika anda malas, mereset seluruh property setiap tag, gunakan CSS Reset dari pihak ketiga. contohnya.
Yahoo UI (YUI) CSS Reset Meyer Web CSS Reset
Masalah ke-2 : ID dan Class
Ketika membuat markup HTML ada attribut ID ada juga Class, keduanya digunakan untuk menandai suatu tag. yang menjadi pertanyaan adalah, apa bedanya ID dan Class ? toh keduanya digunakan untuk menandai tag.Untuk memahami apa perbedaan antara ID dan Class, kita analogikan dengan Manusia. siap?ID digunakan untuk menandai suatu tag, katakanlah ID itu Nama seseorang, misalnya “Rian” atau “Ariona”, nama digunakan untuk membedakan antara satu sama lain. dan tidak boleh ada sama (meskipun ada nama yang sama). sedangkan Class bisa kita analogikan dengan manusia, mau “Rian”, mau “Ariona”, mau “Ahmad” semuanya memiliki Class sejenis yaitu Manusia. mulai ngeh ??.
Dalam sebuah markup, tidak boleh terdapat dua atau lebih ID yang sama, misalnya :
<div id="judul"><ul id="judul">
<li>item1</li></ul>
</div>
<h1 id="judul">Ini Ibu Budi</h1>
ID hanya boleh digunakan satu kali karena sifatnya yang unik. (meskipun pada browser modern, hal ini tidak menjadi masalah. tapi hal ini sangatlah salah).
Jika suatu markup memiliki karakteristik yang sama, misalnya warnanya sama , ukuran hurufnya sama, jenis hurufnya sama. maka gunakanlah Class sebagai penanda. misalnya :
Class “merah” dapat digunakan berkali-kali dalam markup, karena karakteristiknya yang sama, yaitu memiliki background merah.
.merah{background:red;
}
Masalah ke-3 : Margin dan Padding?
Masalah ketiga adalah, apa sih bedanya Margin dan Padding??, keduanya kan digunakan untuk memberikan Jarak.Perbedaanya terletak pada jarak yang diberikan. Margin memberikan jarak pada setiap element sedangkan Padding memberi jarak Antara Konten dengan Element. biar lebih “oohh” kita pakai contoh .Buatlah markup seperti berikut.
<div class="box">Saya Kotak dengan Empat Sudut</div><div class="box">Saya Kotak dengan Empat Sudut</div><div class="box">Saya Kotak dengan Empat Sudut</div>
Kita menerapkan margin sebesar 20 pixel, dan anda dapat melihat setiap box (element) memiliki jarak antara satu sama lainnya. inilah yang dimaksud jarak antar element.
Perhatikan, teks yang ada di dalam Box, tidak ada jarak sama sekali bukan? Teks mentok ke pinggiran Box. disinilah Padding beraksi . padding digunakan untuk memberikan jarak antara konten (teks) dengan sisi element itu sendiri. coba anda tambahkan padding pada class box sebelumnya.
Permasalahan barupun muncul, kok, kotaknya jadi Gede?? kan saya beri ukuran 100px, kalo diukur pake mistar kok jadi lebih dari 100 .ini disebabkan oleh karena padding akan menambahkan jaraknya dengan ukuran element itu sendiri. misalnya paddingnya 20px dan width dari box 100px maka ukuran akhir box adalah, 140 X 140px. selain padding, yang mempengaruhi ukuran dari box adalah border, perhatikan diagram berikut.
Lalu bagaimana solusinya agar ukuran box selalu sama meskipun kita menambahkan padding. Cara pertama adalah dengan menentukan ukuran width dan height terlebih dahulu, lalu dikurangi padding yang akan ditambahkan.cara kedua adalah menerapkan padding pada child, bukan pada parentnya langsung. misalnya:
<div class="box"><div class="content">Ini Ibu Budi</div>
</div>
kita berikan padding pada Class Content, jadi ukuran box masih tetap sama .
Masih semangat membaca?? Lanjuut!!
Masalah ke-4 : Relative atau Absolute?
Ini yang memang membingungkan. apa sih bedanya Relative dan Absolute??Untuk menjelaskan perbedaan Relative dan Absolute kita langsung ke contoh kasus. buatlah markup seperti berikut ini:
jika ditampilkan di browser tampilannya akan menjadi seperti berikut.
Setiap element secara default memiliki position static, ketika position bernilai static anda tidak dapat menentukan jarak satu element dengan element lain menggunakan property Top, Bottom, Left, atau Right. sebagai contoh, tambahkan property left:100px; di class .dua , maka tidak akan terjadi perubahan sama sekali.
Dengan menambahkan position:relative anda dapat menentukan posisi suatu elemen berada. lalu bagaimana dengan Absolute ?.Absolute position akan mengeluarkan elemen tersebut dari parentnya (.satu). jika anda perhatikan, sebelumnya kita menambahkan 100px dari kiri, 100px ini dihitung/dimulai dari box .Satu, bukan dihitung dari ujung browser. dengan menambahkan position absolute, 100px akan ditambahkan mulai dari element terdekat yang memiliki position:relative, dalam kasus ini adalah browser itu sendiri.
jika anda masih belum mengerti, silahkan tambahkan properti bottom dengan nilai 0 (bottom:0;), maka box akan menempel ke bawah browser, karena kita menentukan jarak dari bawah dengan 0px.
“CSS is easy. Anyone can do it!”. it may not be rocket science, but CSS is Powerful enough to make you rip your hair out. -Jeffrey Way-
Property Float digunakan untuk meratakan element ke kiri atau ke kanan, untuk penggunaan biasa memang tidak menjadi masalah. jika kita ingin meratakirikan element kita tinggal menambahkan float:left, begitu juga sebaliknya. tapi ketika kita menambahkan floating pada element maka element parent akan bertingkah aneh. (penasaran ?? ), kita pakai suatu kasus. .Misalnya kita punya sebuah Div dengan Id Container, lalu didalam div tersebut kita tambahkan dua Div dengan ID Content dan Sidebar. seperti berikut :
jika ditampilkan di browser maka tampilannya seperti berikut ini :
Sekilas tidak ada yang salah bukan?, semuanya berjalan seperti seharusnya. Content berada disisi kiri, dan sidebar berada di sisi kanan. tidak ada yang salah memang, tapi sebenarnya parent dari content dan sidebar yang bermasalah. loh kok?? , coba anda beri background pada #container misalnya.
#container {width:960px;margin:0 auto; /* agar container berada di tengah browser*/padding:20px;background:green;
}
apa yang terjadi?? ternyata tinggi #container tidak ikut membesar, seharusnya tinggi #container ikut membesar sesuai dengan tinggi #content bukan ? .
sebelum ke solusi, kita tambahkan lagi satu div dengan id footer.
13. Overflow:HiddenCara ini adalah cara paling sederhana, anda tinggal menambahkan overflow:hidden pada style #container. Masalahpun terpecahkan
14. #container {15. width:960px;16. margin:0 auto; /* agar container berada di tengah browser*/17. padding:20px;18. overflow:hidden;
}
Solusi untuk Footer
Jika anda mengerti tentang solusi sebelumnya, anda dapat menebak bukan bagaimana solusi untuk permasalahan footer ini. atau masih bingung ? , untuk masalah footer ini, cukup dengan menambahkan clear:both pada #footer .
Itulah permasalahan-permasalahan yang sering ditemukan oleh para “pelajar baru CSS”, seperti saya dulu. tapi setiap ada permasalahan pasti ada solusinya . semoga artikel singkat (< bohong) ini bermanfaat bagi anda para CSS newbie .
Referensi
From Photoshop to HTML : “How to slice your design like a pro” (Jeffrey Way) www.w3schools.com/css/ New Riders: The CSS Detective Guide (Denise Jacobs)