css – mengatur tata letak elemenlecturer.fikom.umi.ac.id/irawati/wp-content/uploads/...css –...

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>

</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>

<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 {

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

} // elemen di sebelah kiri maupun kanan

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> </body> </html>

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 /> 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. </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 ; } .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

<html> <head> <title>Properti display</title>  </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

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 }

<html> <head> <title>Menengahkan Tabel</title>  </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> </tbody> </table> <body> </html>

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 { border : solid ; width : 75px ; padding-left : 10px ; }

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 {


top : 100px ;

left : 15px ;

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 {


top : 200px ;

right : 15px ;

width : 150px ;

padding : 5 px ;

color : white ;

}

#sungaiInn {


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> </div>

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 ; } .semboyan { margin : 0 ; font-weight : bold ; font-style : italic ;

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 ; background-color : #DDFFDD ; }

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 ; background-color : #DDFFDD ; }

css – mengatur tata letak elemenlecturer.fikom.umi.ac.id/irawati/wp-content/uploads/...css –...

Documents