Sunday, December 28, 2014

Tutorial CSS Part 18: Mengatur Alignment Elemen Blok

Ada beberapa cara yang bisa dipakai untuk mengatur alignment sebuah elemen blok secara horizontal. Seperti diketahui, untuk mengatur alignment sebuah teks kita bisa menggunakan properti text-align. Namun properti ini tidak bisa diterapkan pada elemen blok. Untuk itu kita bisa menggunakan beberapa kombinasi properti untuk mengatur elemen sebuah elemen blok.

Elemen blok adalah sebuah elemen yang bisa mengambil keseluruhan lebar halaman dan memiliki line break sebelum dan sesudahnya. Beberapa contoh elemen blok diantaranya <h1>, <p> dan <div>.
Untuk mengatur layout halaman kita memerlukan pengaturan alignment pada tiap-tiap elemen blok ini.

Berikut ini akan dijelaskan beberapa cara untuk mengatur elemen blok secara horizontal :

1. Membuat alignment rata tengah dengan properti margin.

Margin adalah area bebas yang berada diantara beberapa elemen pada halaman html. Margin bisa juga diartikan sebagai jarak/spasi antara dua elemen atau lebih. Posisi margin berada diluar border dan merupakan area yang transparan serta tidak bisa diberi warna background.

Kita bisa membuat sebuah elemen blok berada ditengah dengan menetapkan nilai auto pada properti margin atau kombinasi dari margin-left dan margin-right. Syarat yang harus diperhatikan agar cara ini bisa bekerja adalah kita harus menetapkan width dibawah 100%.

Contoh penggunaan properti margin untuk membuat alignment rata tengah :

.center {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}
Kita bisa belajar penggunaan properti margin untuk membuat alignment rata tengah disini >>

2. Membuat alignment rata kiri atau rata kanan dengan properti position.

Posisi sebuah elemen dapat diatur menggunakan CSS misalnya kita mau tempatkan diatas, kiri, kanan atau dibawah. Kita juga bisa menempatkan sebuah elemen secara bertumpuk (ovelap) dimana satu elemen berada diatas elemen yang lain. Dengan CSS kita juga bisa membuat aturan posisi saat elemen terlalu besar pada halaman html.

Kita bisa membuat sebuah elemen blok berada di kiri atau di kanan dengan menetapkan nilai absolute pada properti position. Kemudian untuk membuat rata kiri kita tetapkan nilai 0px pada properti left dan untuk membuat rata kanan kita tetapkan nilai 0px pada properti right.

Contoh penggunaan properti position untuk membuat alignment rata kiri :

.left {
    position: absolute;
    left: 0px;
    width: 500px;
}

Contoh penggunaan properti position untuk membuat alignment rata kanan :

.right {
    position: absolute;
    right: 0px;
    width: 500px;
}
Kita bisa belajar penggunaan properti position untuk membuat alignment rata kiri atau kanan disini >>

3. Membuat alignment rata kiri atau rata kanan dengan properti float.

Selain properti position, kita juga bisa menggunakan properti float untuk membuat sebuah blok elemen rata kiri atau rata kanan. Floating elemen adalah menempatkan elemen secara mengambang pada halaman dengan mengacu pada sebuah titik tambatan berada dikiri atau dikanan.

Contoh penggunaan properti float untuk membuat alignment rata kiri :

.left {
    float: left;
    width: 500px;
}

Contoh penggunaan properti float untuk membuat alignment rata kanan :

.right {
    float: right;
    width: 500px;
}
Kita bisa belajar penggunaan properti float untuk membuat alignment rata kiri atau kanan disini >>

Mengatasi perbedaan tampilan pada lain browser

Ketika kita mengatur alignment sebuah blok elemen dengan cara seperti ini, sebaiknya kita tetapkan dulu nilai margin dan padding untuk elemen <body> misal sebesar 0px. Ini mencegah perbedaan tampilan pada beberapa browser yang berbeda.

Contoh penulisan properti margin dan padding pada elemen body :

body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 500px;
}
Pada browser IE8 dan sebelumnya kita menjumpai saat menggunakan properti position dan float. Masalah tersebut adalah saat sebuah container elemen memiliki lebar tertentu dan deklarasi !DOCTYPE tidak ada maka pada halaman browser IE8 dan sebelumnya akan ditambahkan margin sebesar 17px pada sisi kanan.

Ini terlihat seperti spasi untuk sebuah scrol bar. Untuk mengatasi hal itu pastikan kita deklarasikan !DOCTYPE sebelum menggunakan properti position atau float.

Contoh penulisan DOCTYPE pada halaman HTML :

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 <html>  
 <head>  
 ... isi head  
 </head>  
 <body>  
 ... isi body  
 </body>  
 </html  

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :
  • http://www.w3schools.com/css/css_align.asp

0 komentar

Post a Comment