Dengan penjelasan tadi saya harap dapat membuat Anda semakin tertarik untuk mempelajari materi-materi yang nantinya diperlukan dalam membuat website. Seperti judul artikel kali ini, kita akan membahas tentang hal wajib yang harus diketahui sebagai bekal untuk membuat sebuah website yaitu mengenai CSS Layouting. Mungkin ada dari kalian yang sudah pernah belajar tentang HTML dan CSS namun masih belum bisa membuat template website dengan baik. Penyebabnya adalah kurangnya pemahaman memngenai CSS Layouting ini. Karena memang pada dasarnya implementasi dari pembelajaran mengenai HTML dan CSS terletak pada bagaimana cara kita melayout struktur website. Oleh karena itu diperlukan pemahaman yang baik mengenai CSS Layouting ini. Selebihnya tentang menghias dan mempercantik tampilan website dilakukan nanti setelah struktur dan layoutnya sudah baik.
Sebaiknya sebelum benar-benar belajar mengenai pembahasan kali ini, saya sarankan sudah pernah belajar HTML dan CSS dasar. Karena tanpa mengetahui strukturnya terlebih dahulu tidak mungkin bisa dilayout. Bagi yang belum belajar silahkan saja searching, sudah banya website yang menyediakan pembelajaran gratis. Meskipun tidak paham detail, paling tidak sudah mengetahui dasar-dasarnya.
Perlu diingat sebenarnya mengenai pembahasan kali ini lebih tepatnya bukan membuat website, akan tetap membuat template website. Mengapa begitu? Karena membuat website bukan hanya mengenai tampilannya saja, akan tetapi tentang bagaimana membuatnya bekerja. Pembahasannya akan lebih kompleks dan luas. Belum lagi mengenai hosting dan domain. Jadi kali ini kita membahas tentang bagaimana cara membuat template website yang nantinya akan sangat berguna untuk membuat sebuah website yang benar-benar bisa di akses secara live oleh umum.
Oke agar tidak terlalu lama, saya akan membahas beberapa topik penting yang akan kita pelajari. Berikut beberapa topik atau properti pokok pada CSS Layouting.
- Box Model
- Float
- Position
Ketiga topik atau properti di atas merupakan yang paling pokok dan penting. Bisa dikatakan inti dari CSS Layouting itu sendiri. Meskipun sebenarnya masih ada lagi topik dan properti lainnya. Namun saya anggap sebagai pendukung saja XD. Jangan khawatir, saya akan membahasnya juga nanti.
Pertama mengenai Box Model. Pada dasarnya setiap elemen di halaman berada di dalam sebuah box atau kotak. Kita bisa mengatur ukuran, memberi jarak, posisi, dan juga memberi warna atau gambar background. Misalnya kita buat tag h1 yang di dalamnya terdapat text, lalu pada CSSnya kita beri style background-color blue, maka otomatis ada warna biru berbentuk kotak yang membungkus text pada h1. Yang mana lebar atau ukuran awalnya sesuai pada display masing-masing elemennya. Karena h1 displaynya adalah block maka lebar background-colornya tadi akan selebar browser. Jika kita ubah displaynya menjadi inline, maka ukurannya hanya selebar tulisannya. Itulah konsep dasar mengenai Box Model. Penulisan kodenya seperti di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title> Belajar Box Model </title>
<style>
h1{
/* Kasih warna pada backgroundnya, karena displaynya block ukurannya selebar browser */
background-color: blue;
/* ubah display menjadi inline untuk melihat perbedaan */
display: inline;
/* atur lebar dan tingginya. sebelum itu ubah dulu displaynya menjadi block lagi */
/* karena display inline tidak bisa di atur ukuran dan posisnya */
width: 700px;
height: 300px;
}
</style>
</head>
<body>
<h1>Ini adalah text yang ada pada h1.</h1>
</body>
</html>
Demikian penjelasan sederhana mengenai konsep dasar dari Box Model. Berdasarkan penggunaannya CSS Box Model terdiri margin, border, padding, dan content. Bagi yang tidak terlalu atau belum paham mengenai beberapa properti tadi, kita akan membahasnya bersama-sama. Selanjutnya mari ke pembahasan yang lebih kompleks dan kasus-kasus sebenarnya dari Box Model. Berikut ini adalah gambaran sederhana dari beberapa properti CSS tadi yang akan kita bahas.
- margin-top = mengatur jarak atau posisi bagian atas pada elemen
- margin-right = mengatur jarak atau posisi bagian kanan elemen
- margin-bottom = mengatur jarak atau posisi bagian bawah elemen
- margin-left = mengatur jarak atau posisi bagian kiri elemen.
Atau bisa juga ditulis dengan shorthandnya seperti berikut ini.
margin = top, right, bottom, left (searah jarum jam).
Jadi penulisan kodenya adalah seperti di bawah ini.
margin: 10px, 20px, 30px, 40px;
Mari kita coba implementasikan pada sebuah contoh kasus. Buatlah file HTML seperti di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title> Belajar Box Model </title>
<style>
.kotak-1{
background-color: blue;
width: 300px;
height: 250px;
}
.kotak-2{
background-color: red;
width: 250px;
height: 200px;
}
.kotak-3{
background-color: green;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<div class="kotak-1"></div>
<div class="kotak-2"></div>
<div class="kotak-3"></div>
</body>
</html>
Pada contoh di atas terdapat tiga kotak yang masing-masing sudah diberi style berbeda. Jika kita kasih style properti margin-top pada kotak-1 sebesar 100px, maka otomatis jarak elemen kotak-1 ke elemen paling atas yaitu body itu sendiri sekarang adalah 100px. Begitu pula jika kita gunakan properti margin right bottom dan left.
Overlapping Margin
Sekarang coba kalian beri margin-bottom pada kotak-1 misalkan 20px, lalu tambahkan juga margin-top pada kotak-2 20px juga. Coba lihat hasilnya. Menurut perhitungan, seharus ada jarak vertical 40px antara elemen kotak-1 dengan kotak-2. Namun seperti yang kita lihat, jaraknya tidak berubah tetap 20px. Itulah yang disebut dengan Overlapping Margin. Karena sifat margin tidak bisa saling menambahkan. Overlapping Margin ini hanya berlaku pada posisi vertical, jika horizontal jarak marginnya akan tetap ditambahkan.
Jika ingin membuktikan bahwa Overlapping Margin tidak berpengaruh pada posisi horizontal, silahkan rubah display ke tiga elemen tadi menjadi inline-block agar elemennya berjejer kesamping. Kenapa inline-block? Seperti yang kita bahas di awal bahwa display inline tidak bisa di beri style ukuran dan posisi, jadi margin tidak akan berpengaruh. Silahkan beri margin-right pada kotak-1 dan margin-left pada kotak-2. Otomatis jaraknya akan sesuai dengan nilai jumlah pada margin setiap elemen karena marginnya akan saling ditambahkan.
Negatif Margin
Kita juga bisa memmberikan nilai negatif pada margin. Hasil yang akan diperoleh adalah posisi yang berlawanan. Misalnya elemen div kotak-2 kita beri margin-top -30px, maka ia akan bergeser ke atas sebanyak 30px dan otomatis akan menutupi sebagian dari elemen kotak-1.
Margin Auto
Margin auto merupakan nilai yang hanya bisa diberikan pada margin kanan dan kiri. Biasanya digunakan untuk membagi rata jarak margin kanan dan kiri sehingga berada di posisi tengah. Margin auto akan berfungsi jika kedua properti yakni margin-right dan left sama-sama diberi nilai auto. Jika hanya salah satu maka tidak akan bisa berfungsi. Penulisan kodenya seperti berikut ini.
margin-right: auto;
margin-left: auto;
/* atau menggunakan Shorthand */
margin: auto;
Shorthand
Sekarang kita akan belajar bagaimana cara menyingkat penulisan kode menjadi satu baris agar lebih rapi dan lebih simple. Seperti yang sudah dijelaskan di awal tadi, penulisan Shorthand dari margin cukup ditulis dengan margin. Berikut beberapa penambahan contoh penulisan dari contoh yang sudah dijelaskan di awal.
margin: 20px;
Dengan penulisan seperti di atas, nilai 20px akan diberikan kepada seluruh properti margin baik top right bottom dan left.
margin: 10px 20px;
Dengan penulisan seperti di atas, nilai 10px akan diberikan kepada margin top dan bottom sedangkan nilai 20px diberikan kepada margin right dan left.
margin: 10px 0 20px;
Dengan penulisan seperti di atas, nilai 10px akan diberikan kepada margin top, nilai 0 diberikan kepada margin right dan left dan nilai 20px diberikan kepada margin bottom.
margin: 10px auto;
Dengan penulisan seperti di atas, nilai 10px akan diberikan kepada margin top dan bottom sedangkan auto untuk margin right dan left.
margin: 20px auto 30px;
Dengan penulisan seperti diatas, nilai 20px akan diberikan kepada margin top, nilai auto diberikan kepada margin right dan left sedangkan 30px diberikan kepada margin bottom.
Demikian penjelasan tentang margin pada CSS Box Model. Berhubung artikelnya sudah sangat panjang, pembahasan mengenai border, padding, dan content akan dijelaskan di part selanjutnya. Semoga bermanfaat.
