Penggunaan Div dan Float
Di dalam menggunakan File CSS, kita sering menggunakan pengelompokan suatu area, misalnya group header, article, footer, selain menggunakan tag-tag standar HTML 5 untuk melakukan pengelompokan diperlukan tag DIV,
Penggunaan Div dan float
tag DIV
- tag div digunakan untuk melakukan pengelompokan suatu area
- Seperti kita ketahui sebelumnya saat membuat suatu halaman web kita memiliki 3 area yaitu header, article dan footer,
- ketiga tag diatas adalah tag standard HTML 5, pada HTML 4 tag tersebut tidak ada maka biasanya pada HTML sebelumnya untuk mengelompokkan suatu area web menggunakan div seperti contoh berikut
<div class="header"> <h1>Nicola Tesla</h1> </div> <div class="article"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, sapiente!</p> </div> <div class="footer"> ... </div>
Penggunaan Float dan clear
- float digunakan agar area berikutnya yang akan diletakkan disamping objek yang ada saat ini, bisa diletakkan di samping kiri / kanan
- pilihan perataan pada perintah float adalah left, right, none
- default pilihan float adalah none.
- secara default float nilainya adalah none, yang artinya bila kita menempatkan objek selalu diletakkan dibawah dari objek yang ada saat ini.
- berikut contoh penggunaannya
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dokument 2</title> <link rel="stylesheet" href="style2.css"> </head> <body> <div class="group-satu"> <div class="kotak-merah">1</div> <div class="kotak-hijau">2</div> <div class="kotak-ungu">3</div> </div> <div class="group-dua"> <div class="kotak-biru"><h1>4</h1></div> <div class="kotak-kuning">5 <h1>Judul</h1> <div class="kotak-coklat"> 6 </div> </div> </div> </body> </html>
- berikut adalah file style2.css yang akan digunakan html diatas
* { margin: 0; padding: 0; } .group-satu div { float:left; } .group-dua div { clear: left; } .kotak-merah { height: 100px; width: 100px; background-color: #F00; } .kotak-hijau { height: 150px; width: 150px; background-color: #0F0; } .kotak-ungu { height: 100px; width: 100px; background-color: #F0F; clear: left; } .kotak-biru { height: 200px; width: 200px; background-color: #00F; } .kotak-kuning { height: 200px; width: 200px; background-color: #FF0; margin: 20px; border-style: solid; border-width: 30px; border-color: #f00; padding-top: 50px; } .kotak-kuning h1 { font-family: sans-serif; font-size: 50px; text-align: center; color: brown; background-color: black; } .kotak-coklat { height: 50px; width: 50px; background-color: brown; margin-left: auto; margin-right: auto; }
- kalau anda perhatikan pada css di dalam group-satu terdapat perintah float: left yang artinya kotak-kotak yang ada di salamnya akan diletakkan merapat ke kiri, jadi kotak hijau akan berapa di sebelah dari kotak merah.
- akan tetapi apabila kotak ungu tidak ingin diletakkan di samping tetapi dibawah, maka di dalam kotak-ungu harus ditulis clear: left;
- untuk menengahkan suatu tulisan dapat menggunakan tag text-align: center,
- sedangkan apabila kita sudah berada di dalam objek tersebut dan ingin menjadikan posisi tengah maka digunakan tag berikut
margin-left: auto; margin-right: auto;
Praktek siswa
- buka kembali file index.html dan style.css
hgroup { float: left; } article { clear: left; } nav { height: 2em; text-align: right; padding-top: 1em; } header li { margin: 0 0.5em 0 0.5em; } footer li { margin: 0 0.5em 0 0.5em; }