CSS – Mengatur Tata Letak – Mengatur Tata Letak Elemen 1. Mengatur Lebar dan Tinggi Elemen Beberapa

  • View
    223

  • Download
    0

Embed Size (px)

Text of CSS – Mengatur Tata Letak – Mengatur Tata Letak Elemen 1....

CSS Mengatur Tata Letak Elemen

1. Mengatur Lebar dan Tinggi Elemen

Beberapa elemen secara bawaan akan diletakkan dengan menempati hamper keseluruhan

browser, sedangkan tingginya disesuaikan dengan isi. Namun, sesungguhnya kita bias mengatur

lebar suatu elemen dengan menggunakan properti width dan mengatur tingginya melalui

height.

Perhatikan contoh berikut ini :

ukurelem.css

ukurelem.html

.alpha { border : solid 1px gray ; text-align : center ; } .bravo { border : solid 1px gray ; text-align : center ; width : 150px ; height : 100px ; } .charlie { border : solid 1px gray ; text-align : center ; width : 300px ; } .delta { border : solid 1px gray ; text-align : center ; width : 300px ; }

Ukuran Elemen

Unchained Melody

Desperadoc

Moonriver

Sinaran

September Ceria

Semua adalah judul lagu

Efeknya bisa dilihat pada gambar berikut

2. Meggunakan Properti float dan clear

Sekarang kita akan mencoba untuk menaruh Sinaran di sebelah kanan Moonriver, perhatikan

berkas berikut

float.css

Properti clear inilah yang digunakan untuk mengatur agar di sebelah kiri atau kanan elemen

tidak ada elemen lain. Nilainya bisa berupa :

.alpha { border : solid 1px gray ; text-align : center ; } .bravo { float : left ; //elemen yang berkelas bravo diatur mengam border : solid 1px gray ; //bang di kiri text-align : center ; width : 150px ; height : 100px ; } .charlie { float : right ; //elemen yang berkelas charlie diatur mengam border : solid 1px gray ; //bang di kanan text-align : center ; width : 300px ; } .delta { clear : left ; //tidak terdapat elemen lain disebelah kiri elemen border : solid 1px gray ; //yang berkelas delta text-align : center ; width : 300px ; }

left, berarti bahwa di sebelah kiri tidak boleh ada elemen

right, berarti bahwa di sebelah kanan tidak boleh ada elemen

both, berarti bahwa di sebelah kiri dan kanan tidak boleh ada elemen

float.html

Berikut contoh aplikasi float dan clear untuk menyajikan gambar dan keterangannya

infotnm.css

Ukuran Elemen

Unchained Melody

Desperadoc

Moonriver

Sinaran

September Ceria

Semua adalah judul lagu

.gambar {

float : left ; //agar elemen yg berkelas gambar diatur mengambang di kiri

}

.pemisah {

clear : both; //membuat elemen yg berkelas pemisah} berdiri sendiri tanpa

} // elemen di sebelah kiri maupun kanan

infotnm.html

Info Tanaman Begonia Masoniana Dikenal dengan nama populer begonia "Iron Cross". Daun seperti berbeludru. menyukai tempat yang agak teduh. media berupa humus bambu. Tidak menyukai air yang terlalu banyak, tetapi juga tidak tahan ekeringan. Codieum Variegatum Puring indah dengan daun tumbuh kompak. Bisa ditanam dalam pot dan diletakkan di teras rumah. paling tidak mendapat sinar matahari pagi. Media bisa mendapat campuran tanah, dan pupuk kandung. Kebutuhan air sedang. Sanseviera Trifasciata 'Streaker' Sansievera atau yang dikenal sebagai 'Lidah Mertua ini sebagai 'Lidah Mertua ini berukuran relatif kecil. Tumbuh kompak. Warna perpaduan hijau dan krem. Tanah Kering, cocok dipajang dalam ruangan. Seminggu sekalli keluarkan di teras sekitar 1 hari. Media berupa campuran tanah dan pupuk kandang.

3. Menggunakan Properti position

Property position erguna untuk mengatur peletakan elemen. Dengan menggunakan property ini

dimungkinkan untuk membuat dua elemen yang saling bertindihan semacam contoh berikut :

posisi.css

.satu { right : 50px ; top : 50px ; position : absolute ; border : solid ; background-color : #CCFF99 ; margin : 2px ; } .dua{ position : absolute ; right : 200px ; top : 200px ; border : solid ; background-color : #CCFF99 ; margin : 2px ; }

posisi.html

Contoh properti position :

position.html

Posisi Gambar

Properti Position Begonia Masoniana Dikenal dengan nama populer begonia "Iron Cross". Daun seperti berbludru. Menyukai tempat yang agak teduh.

position.css

Hasilnya

Media berupa humus bambu. Tidak menyukai air yang terlalu banyak. tetapi juga tidak tahan kekeringan. Codiaeum Variegatum 'Angel Wings' Puring indah dengan daun tumbuh kompak. Bisa ditanam dalam pot dan diletakkan di terasrumah. Paling tidak mendapat sinar matahari pagi. Media bisa berupa campuran tanah dan pupuk kandang. Kebutuhan air sedang. Sanseviera Trifasciata 'Streaker' Sanseviera atau yang dikenal sebagai 'Lidah Mertua' ini berukuran relatif kecil. Tumbuh kompak. Warna perpaduan hijau dan krem. Tahan kering. Cocok dipajang dalam ruangan. Seminggu sekali keluarkan di teras sekitar 1 hari. Media berupa campuran tanah dan pupuk kandang.

div { border : solid ; background-color : #CCFF99 ; margin : 2px ; } .divKhusus { position : static ; }

Dari hasil diatas tak ada yang istimewa. Properti position yang bernilai static identik kalau tidak

disebutkan. Makna static menyatakan bahwa peletakan elemen mengikuti alur normal, tanpa

memperhatikan nilai top, left, bottom, dan right.

Sekarang coba ganti

.divKhusus {

position : static ;

}

Menjadi

.divKhusus {

position : absolute ;

left : 40px ;

top : 75px;

background-color : #FFCC99 ;

}

Hasilnya

Sekarang position diisi dengan absolute. Nilai ini berarti bahwa posisi terhadap elemen yang

berkelas divKhusus memiliki letak yang bersifat absolut, yang ditentukan oleh :

Left : 40 piksel ( yang berartidari kiri 40 piksel )

Top : 75 piksel ( yang berarti dari atas 75 piksel )

Nilai lain yang bisa digunakan pada position adalah relative. Nilai ini berarti bahwa letak

pengaturan bersifat relatif terhadap posisi aslinya (kalau tidak diatur). Sebagai contoh, bila

absolute pada contoh di depan diubah menjadi relative maka hasilnya sebagai berikut

Kemungkinan nilai yang lain untuk position adalah fixed. Efek yang ditimbulkan seperti

absolute, tetapi kalau terjadi penggulungan, posisinya akan tetap. Contoh berikut menunjukkan

keadaan ketika layar bisa digulung

Nah, kalau kemudian kita menggeser ke bawah, posisi elemen yang berisi Angel Wings tetap

berada di situ. Contoh ditunjukkan pada gambar berikut

4. Mengenal Properti display

Suatu elemen dapat dikelompokkan menjadi 2 kategori, yaitu elemen blok dan elemen inline

Elemen blok adalah elemen yang memakan semua tempat tersisa dikanan pada ortunya.

Yang termasuk elemen ini adalah h1, h2, p, dan div

Elemen inline adalah elemen yang memungkinkan tempat tersisa di sebelah kanannya

pada elemen ortu bisa dipakai elemen yang lain bila memang mencukupi. Contoh

elemen ini adalah a, img, dan span

Elemen inline 1 Elemen inline 2 Elemen inline 3

Elemen inline 4

Elemen ortu

Karena Elemen inline 4

tidak cukup ditempatkan di

sisni maka diletakkan di

bawah

Dalam praktik, kita terkadang perlu mengubah elemen blok menjadi elemen inline secara

eksplisit, ataupun sebaliknya. Nah, properti display yang digunakan untuk keperluan seperti itu.

Isinya bisa berupa :

inline, untuk membuat elemen bersifat inline

blok, untuk membuat elemen sebagai elemen blok

Contoh untuk melihat efek inline

dispinline.html

Hasilnya :

Hasil tersebut diperoleh mengingat elemen li termasuk sebgai elemen blok, nah

sekarang kita ubah li agar menjadi elemen inline dengan cara menyertakan dokumen berikut

Properti display Aglaonema Alocasia Begonia Philodendron

Elemen inline 1

Elemen blok

Elemen inline 2 Elemen inline 3

Elemen ortu

Elemen blok membuat

ditampilkan tersendiri tanpa

menggunakan ruang tersisa di

atasnya

Walau ekemen inline 2 sbenarnya cukup

ditempatkan di sini, tetap saja diletakkan

dibawah. Hal ini disebabkan Elemen blok

akan menempati semua ruang tersendiri

dispinline.css

diperoleh hasil seperti berikut :

Terlihat bahwa semua bagian dari li diletakkan dalam satu baris mengingat li sekarang berupa

elemen inline

5. Menampilkan Elemen di Tengah

Misalnya kita punya sebuah tabel. Bagaimana cara agar tabel tersebut ditampilkan di bagian

tengah pada arah horizontal? Solusinya adalah dengan mengatur left-margin dan right-margin

agar bernilai auto. Perhatikan contoh ini

center.html

li { display : inline }

Menengahkan Tabel Data Negara Austria Eropa Italia Eropa Mesir Afrika

Hasilnya dari coding diatas

Sekarang tambahkan dokumen css berikut ini

center.css

Hasilnya jadi seperti berikut

6. Desain Asimetris

Posisi absolut dapat digunakan untuk menyusun desain yang bersifat bebas. Artinya, kita bisa

meletakkan elemen yang kita kehendaki pada posisi yang kita sukai. Contohnya dapat dilihat

pada gambar berikut ini

table { border : solid ; margin-left : auto ; margin-right : auto ;