1 CSS Mengatur Tata Letak Elemen 1. Mengatur Lebar dan Tinggi Elemen Beberapa elemen secara bawaan akan diletakkan dengan menempati hamper keseluruhan...
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 .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 ; }
ukurelem.html 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 .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 ; }
Properti clear inilah yang digunakan untuk mengatur agar di sebelah kiri atau kanan elemen tidak ada elemen lain. Nilainya bisa berupa :
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 Ukuran Elemen
Unchained Melody
Desperadoc
Moonriver
Sinaran
September Ceria
Semua adalah judul lagu
Berikut contoh aplikasi float dan clear untuk menyajikan gambar dan keterangannya infotnm.css .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 Posisi Gambar
Contoh properti position : position.html Properti Position
Begonia Masoniana Dikenal dengan nama populer begonia "Iron Cross". Daun seperti berbludru. Menyukai tempat yang agak teduh.
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.
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 ortu
Elemen inline 1
Elemen inline 2
Elemen inline 3
Elemen inline 4 Karena Elemen inline 4 tidak cukup ditempatkan di sisni maka diletakkan di bawah
Elemen ortu
Elemen blok membuat ditampilkan tersendiri tanpa menggunakan ruang tersisa di atasnya
Elemen inline 1
Elemen blok Elemen inline 2
Elemen inline 3
Walau ekemen inline 2 sbenarnya cukup ditempatkan di sini, tetap saja diletakkan dibawah. Hal ini disebabkan Elemen blok akan menempati semua ruang tersendiri
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 Properti display
Aglaonema
Alocasia
Begonia
Philodendron
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
dispinline.css li { display : inline }
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 Menengahkan Tabel
Data Negara
Austria
Eropa
Italia
Eropa
Mesir
Afrika
Hasilnya dari coding diatas
Sekarang tambahkan dokumen css berikut ini center.css table { border : solid ; margin-left : auto ; margin-right : auto ; } td { border : solid ; width : 75px ; padding-left : 10px ; }
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
asimetrik.html Desain Asimetrik
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.
Negara Bagian
Burgerland
Karintia
Austria Bawah
Austria Atas
Stiria
Wina
Sungai Inn
asimetrik.css body { background-image : url(gambar/inn2.jpg) ; background-repeat : no-repeat ; } #infoNegara { position : absolute ; top : 100px ; left : 15px ;
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 ; }
7. Contoh Aplikasi Sederhana Contoh yang menggunakan berbagai properti yang telah dibahas, pertama-tama buat dokumen berikut tanpa menyertakan css infoflora.html Info Flora
Puring silangan yang menarik untuk dipelihara. Namanya diabadikan dari istilah 'Kesumba'. Tak mengherankan, warna daun beraneka bak terkena bermacam-macam kesumba.
