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 ; }
html head
titleUkuran Elementitle link rel=stylesheet type=textcss href=ukurelem.css
head body
pUnchained Melody p p class=alphaDesperadoc p
p class=bravoMoonriver p p class=charlieSinaran p
p class=deltaSeptember Ceria p pSemua adalah judul lagu p
body html
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
html head
titleUkuran Elementitle link rel=stylesheet type=textcss href=ukurelem.css
head body
pUnchained Melody p p class=alphaDesperadoc p
p class=bravoMoonriver p p class=charlieSinaran p
p class=deltaSeptember Ceria p pSemua adalah judul lagu p
body html
.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
html head
titleInfo Tanamantitle link rel = stylesheet type = textcss href=infotnm.css
head body
img src = gambarexoticaMutasi.png class = gambar div
bigiBegonia Masonianaibig hr
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. div
div class = pemisah div img src = gambarexoticaMutasi.png class = gambar
div bigiCodieum Variegatumibig
hr 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. div
div class = pemisah div img src = gambarexoticaMutasi.png class = gambar
div bigiSanseviera Trifasciata iStreakerbig
hr 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.
div body
html
3. Menggunakan Properti position
Kategori