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>
<title>Ukuran Elemen</title>
<link rel="stylesheet" type="text/css" href="ukurelem.css" /> </head>
<body>
<p>Unchained Melody </p> <p class="alpha">Desperadoc </p> <p class="bravo">Moonriver </p> <p class="charlie">Sinaran </p> <p class="delta">September Ceria </p> <p>Semua adalah judul lagu </p> </body>
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”
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>
<title>Ukuran Elemen</title>
<link rel="stylesheet" type="text/css" href="ukurelem.css" /> </head>
<body>
<p>Unchained Melody </p> <p class="alpha">Desperadoc </p> <p class="bravo">Moonriver </p> <p class="charlie">Sinaran </p> <p class="delta">September Ceria </p> <p>Semua adalah judul lagu </p> </body>
</html>
.gambar {
float : left ; //agar elemen yg berkelas “gambar” diatur mengambang di kiri }
.pemisah {
infotnm.html
<html> <head><title>Info Tanaman</title>
<link rel = "stylesheet" type = "text/css" href="infotnm.css" /> </head>
<body>
<img src = "gambar/exoticaMutasi.png" class = "gambar" /> <div>
<big><i>Begonia Masoniana</i></big> <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 = "gambar/exoticaMutasi.png" class = "gambar" /> <div>
<big><i>Codieum Variegatum</i></big> <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 = "gambar/exoticaMutasi.png" class = "gambar" /> <div>
<big><i>Sanseviera Trifasciata </i>'Streaker'</big> <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>
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
<html> <head>
<title>Posisi Gambar</title>
<link rel ="stylesheet" type = "text/css" href = "posisi.css" /> </head>
<body>
<div class = "satu">
<img src = "gambar/exoticaMutasi.png" /> </div>
<div class = "dua">
<img src = "gambar/exoticaMutasi.png" /> </div>
</body> </html>
<html> <head>
<title>Properti Position</title>
<link rel="stylesheet" type="text/css" href="position.css" /> </head>
<body> <div>
<big><i>Begonia Masoniana</i></big> <hr />
position.css
Hasilnya
Media berupa humus bambu.
Tidak menyukai air yang terlalu banyak. tetapi juga tidak tahan kekeringan. </div>
<div class="divKhusus">
<big><i>Codiaeum Variegatum</i> 'Angel Wings'</big> <hr />
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.
</div> <div>
<big><i>Sanseviera Trifasciata</i> 'Streaker'</big> <hr />
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> </body> </html>
div {
border : solid ;
background-color : #CCFF99 ; margin : 2px ;
}
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 )
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
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
<html> <head>
<title>Properti display</title>
<!-- <link rel="stylesheet" type"text/css" href="dispinline.css" --> </head>
<body> <ul>
<li>Aglaonema </li> <li>Alocasia </li> <li>Begonia </li> <li>Philodendron </li> </ul>
</body> </html>
Elemen inline 1
Elemen blok
Elemen inline 2 Elemen inline 3
Elemen ortu
Elemen blok membuat ditampilkan tersendiri tanpa menggunakan ruang tersisa di atasnya
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 }
<html> <head>
<title>Menengahkan Tabel</title>
<!-- <link rel="stylesheet" type="text/css" href="center.css" /> --> </head>
<body> <table
summary="Tabel dipakai untuk memberikan contoh penengahan tabel"> <caption class="kelabu">Data Negara</caption>
<tbody> <tr>
<td>Austria</td> <td>Eropa</td> </tr>
<tr>
<td>Italia</td> <td>Eropa</td> </tr>
<tr>
<td>Mesir</td> <td>Afrika</td> </tr>
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 ; }
td {
asimetrik.html
asimetrik.css
<html><head>
<title>Desain Asimetrik</title>
<link rel ="stylesheet" type ="text/css" href="asimetrik.css" /> </head>
<body>
<div id = "infoNegara">
Austria adalah sebuah negara yang berada
di tengah-tengah Eropa Tengah. Berbatasan dengan Jerman, Slovakia, Hungaria, Slovenia, Italia, dan Swiss. Ibukotanya yaitu Vieanna. Merupakan negara federal. Terdiri atas 9 negarabagian.
</div>
<div id = "negaraBagian"> <p id = "">Negara Bagian</p> <ul>
<li>Burgerland</li> <li>Karintia</li> <li>Austria Bawah</li> <li>Austria Atas</li> <li>Stiria</li> <li>Wina</li> </ul>
</div>
<div id = "SungaiInn"> Sungai Inn </div> </body> </html>
body {
background-image : url(gambar/inn2.jpg) ; background-repeat : no-repeat ;
}
#infoNegara {
7.
Contoh Aplikasi Sederhana
Contoh yang menggunakan berbagai properti yang telah dibahas, pertama-tama buat dokumen
berikut tanpa menyertakan css
infoflora.html
width : 200px ; padding : 5 px ;border : groove 5px blue ; background-color : #CCDDCC ; }
#negaraBagian { position : absolute ; top : 200px ; right : 15px ; width : 150px ; padding : 5 px ; color : white ; }
#sungaiInn {
position : absolute ; bottom : 20px ; right : 400px ; width : 100px ; border : solid 1px red ; background-color : #FFCCFF ; color : navy ;
text-align : center ; }
<html> <head>
<title>Info Flora </title>
<link rel="stylesheet" type="text/css" href="infoflora.css" /> </head>
<body>
<div class="judul">
<img src="gambar/infoflora.png" class="logo" />
<p class="semboyan">Informasi Tanaman Hias yang Mempesona</p> <ul>
<li><a href="">Home</a> |</li> <li><a href="">Tentang Kami</a> |</li> <li><a href="">Kontak</a> |</li> </ul>
</div>
<div class = "menuUtama"> Daftar Tanaman Hias : <ul>
<li><a href = "">Aglaonema</a></li> <li><a href = "">Alocasia</a></li> <li><a href = "">Begonia</a></li> <li><a href = "">Caladium</a></li> <li><a href = "">Cryptanthus</a></li> </ul>
Hasilnya seperti dibawah ini
Sekarang lengkapi dengan berkas css berikut ini
Infoflora.css
<div class = "informasi"> <div>Berita Aktual</div> <div>
<p><i>Alocasia cucullata</i> 'Variegata'</p> <p>
Alocasia ini berdaun varigata. Warna daun tersusun atas hijau dan kuning. Termasuk jenis yang langka </p>
<p class = "lanjut"><a href = "">Baca lebih lanjut</a></p> </div>
<div>
<p><i>Codiaeum variegatum</i> 'Kasamba'</p> <p>
Puring silangan yang menarik untuk dipelihara. Namanya diabadikan dari istilah 'Kesumba'. Tak mengherankan, warna daun beraneka bak terkena bermacam-macam kesumba. </p>
<p class = "lanjut"><a href = "">Baca lebih lanjut</a></p> </div>
</div> <body> </html>
body {
background-color : #CCFFCC ; }
.logo {
display : block ; }
Hasilnya seperi berikut ini
float : left ; }
.judul {
height : 80 px ; }
.judul ul { margin : 0 ; padding : 0 ; float : right ; }
.judul li {
display : inline ; }
.menuUtama {
position : absolute ; top : 150px ; left : 5px ; margin-top : 10px ; padding : 5px ; width : 150px ;
background-color : #003300; color : white ;
}
.informasi {
margin-left : 170px ; margin-top : 25px ; padding : 5px ;
8.
Menukarkan Posisi Menu
Bila dikehendaki menu bisa ditukarkan sehingga letaknya menjadi seperi berikut
Perubahan pada infoflora.css terdapat pada selektor “.menuUtama” dan “.informasi”
.menuUtama {
position : absolute ; top : 150px ;
right : 5px ; /* Bagian yang berubah */
margin-top : 10px ; padding : 5px ; width : 150px ;
background-color : #003300; color : white ;
}
.informasi {
margin-left : 10px ; /* Bagian yang berubah */ margin-right : 170px ; /* Tambahan */
margin-top : 25px ; padding : 5px ;