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
titleProperti displaytitle -- link rel=stylesheet typetextcss href=dispinline.css --
head body
ul liAglaonema li
liAlocasia li liBegonia li
liPhilodendron 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
titleMenengahkan Tabeltitle -- link rel=stylesheet type=textcss href=center.css --
head body
table summary=Tabel dipakai untuk memberikan contoh penengahan tabel
caption class=kelabuData Negaracaption tbody
tr tdAustriatd
tdEropatd tr
tr tdItaliatd
tdEropatd tr
tr tdMesirtd
tdAfrikatd tr
tbody table
body html
Hasilnya dari coding diatas Sekarang tambahkan dokumen css berikut ini
center.css Hasilnya jadi seperti berikut
6. Desain Asimetris
