Solusi Masalah Yang Sering Muncul Dalam Css

Permasalahan Yang Sering Muncul Dalam Css Styling - Dalam menangani kasus styling interface pada web desain, sering kali muncul masalah masalah yang kadang membuat pemula kelimpungan. Tidak hanya pemula, karena otak manusia punya keterbatasan dalam mengingat, kadang yang sudah master pun lupa pada hal-hal sepele yang ternyata membuat desain menjadi tidak sempurna bahkan berantakan.

Terutama pada bagian Css yang berfungsi sebagai pengatur style dari setiap elemen HTML. Meskipun tidak menutup kemungkinan hal yang paling mendasar yakni HTML juga seringkali mendapati masalah karena kesalahan dalam menulis (typo).

Sebenarnya apa saja biang kerok dari permasalah Css yang sering ditemui Newbie dalam mengatur style desain website ?

Permasalahan Yang Sering Muncul Dalam Css Styling

Css Reset

Setiap browser sudah memiliki aturan sendiri dalam memformat halaman sebuah website, itulah mengapa ada istilah Cross Browser. Dan masing-masing dari browser umumnya menggunakan satu cara mendasar dalam menampilkan halaman website yakni pada default styling, seperti membuat secara otomasti tag <b> menjadi huruf tebal, <i> miring serta mengatur pada bagian margin dan juga padding yang sering mengganggu.

Solusinya ? Gunakan Css Reset

*{
 margin:0;
 padding:0;
}

Tanda bintang (*) diatas berfungsi sebagai selector semua tag elemen html atau sama dengan mengatur dokumen html itu sendiri secara keseluruhan.

Sebenarnya Css Reset tidak hanya itu, anda bisa mencari kelengkapannya seperti contohnya disini.

ID dan Class

Masalah lain yang kadang muncul adalah ketidak pahaman mengenai selector ID dan Class.
Selengkapnya mengenai pembahasan selector ID dan Class bisa ditemui di halaman ini.

Padding dan Margin

Tidak sedikit pemula yang kebingungan dengan dua hal ini yakni Margin dan Padding dan perbedaan serta fungsinya. Anggapnya hal ini sama yakni untuk memberikan jarak sebuah konten.

Yang pada dasarnya hal ini adalah dua hal yang berbeda, gambarannya dibawah ini

Penjelasan singkatnya adalah bahwa :
Katakanlah kita punya dua elemen dengan nama <div class="box">, dimana formatnya seperti dibawah ini

<div class="box">
// disini padding
<p>Ini sebuah box 1</p>
// padding
</div>
// disini letak margin
<div class="box">
// padding
<p>Ini sebuah box 2</p>
// padding
</div>

Dengan kata lain yang lebih sederhana bahwa padding adalah jarak dari batas tepi ke bagian konten di dalam box, sementara margin bertugas mengaturn jarak antar box.

Masalah yang muncul terkait padding adalah ukuran box tidak sesuai dengan ukuran yang sudah ditentukan. Misal kita beri styling seperti ini,

.box {
        width:100px;
        height:1000px;
        margin:10px;
        padding:20px; // dengan tujuan konten lebih rapi di bagian dalam
}

Namun pada hasilnya , ukuran box menjadi lebih lebsar dari ukuran yang sudah ditentukan yakni 100px ?
Hal itu disebabkan oleh penambahan padding sebesar 20px sehingga besar box menjadi 140px, selain itu, penggunaan border juga turut menambah besarnya ukuran box.

Solusi agar ukuran tetap ?
Gunakan ini,

*,*:before, *:after {
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}

Untuk membuat konten apa saja berada di tengah elemen induk, gunakan margin:0 auto; yang berarti:

.content {
  margin-top:0;// bisa diatur sesuai keinginan
  margin-right: auto;
  margin-bottom:0;// bisa diatur sesuai keinginan
  margin-left: auto;
}

Note : untuk mempersingkat penggunaan margin, padding dan lainnya seperti box-shadow gunakan format seperti ini margin:0 0 0 0; (margin: top right bottom left;), dampaknya halaman lebih ringan saat dimuat.

Css Position

Secara default, setiap element html menggunakan nilai static. Posisi static tidak akan terpengaruh dengan properti top, right, bottom, left. Melainkan harus digunakan padding ataupun margin untuk mengatur jarak.

Posisi Fixed berfungsi untuk mematenkan sebuah elemen tidak terpengaruh dengan kondisi halaman, seperti saat halaman di gulung kebawah dan keatas, konten dengan posisi fixed akan tetap berada di tempat yang sudah ditentukan.

Posisi Relative sama halnya dengan posisi static, hanya saja posisi relative akan terpengaruh pada nilai properti top, right, bottom, left.

Posisi absolute merupakan posisi yang dipastikan dengan mengambil konten dengan posisi relative sebagai induk. Dengan artian posisi absolute harus ditentukan di dalam elemen induk dengan posisi relative. Jika tidak ada posisi relative yang mengurung elemen absolute, maka ia akan bergantung pada elemen body sebagai induk.

Floating Content
Penggunaan float pada suatu element digunakan untuk mengatur apakah yang harus dilakukan oleh suatu elemen. Float hanya memiliki dua properti yakni left dan right.

Namun hal yang biasanya terjadi saat mengatur floating adalah elemen induk menjadi aneh. seperti contoh dibawah ini..

Kita buat markup seperti ini atau jika dalam template blogger biasanya konsepnya juga sama seperti dibawah ini

<div class="container">
 <div class="main-wrap"></div>
 <div class="sidebar"></div>
</div>

Kemudian  kita buat stylingnya,

.container {
 width:100%;
 max-width:500px;
 margin:0 auto; /* agar container berada di tengah browser*/
 padding:20px;
 background:blue;
}

.main-wrap {
 background:red; 
 width:65%;
 height:300px;
 float:left;
}

.sidebar{
 background:green;
 width:30%;
 height:300px;
 float:right;
}

Maka hasil yang kita dapatkan adalah seperti ini

Dalam kondisi seperti ini, yang jadi masalah adalah .container tidak membungkus dua elemen di dalamnya yakni .main-wrap dan .sidebar.

Solusi untuk masalah ini, kita bisa menggunakan beberapa opsi, seperti diantaranya menambahkan elemen <div class="clear"></div> sebelum penutup container dan menambahkan css baru yakni
.clear {clear:both;}. Biasanya di dalam template sudah tertanam css tersebut.
Opsi kedua adalah memberikan atribut overflow:hidden pada element .container.
Maka hasilnya seperti ini

Sampai disini ada pertanyaan ?

Baiklah, semoga artikel ini bisa sedikitnya membantu para pemula yang mungkin masih kebingungan dan bertanya-tanya mengenai masalah yang sering muncul saat berurusan dengan Css.