PEMPROGRAMAN BERBASIS WEB

CSS BOX MODEL,

FLOAT DAN POSITION
M. ADNAN NUR, S.KOM., MT.
BLOCK LEVEL DAN INLINE ELEMENT

 Block Level Element merupakan elemen HTML yang selalu dimulai pada
baris baru. Berikut beberapa elemen blok : <div>, <h1> s/d <h6>, <p>,
<form>, <header>, <footer> dan <section>

 Inline Element merupakan elemen HTML yang tidak membuat baris baru .
Elemen ini mengikuti alur dokumen sebagaimana mestinya dan memiliki
ukuran tinggi yang ditentukan serta ukuran lebar yang sesuai dengan isi
elemennya. Berikut beberapa elemen inline : <span>, <label>, <a> dan
<img>
BOX MODEL

 Semua Elemen HTML dapat dilihat sebagai sebuah persegi yang terdiri
atas content, padding, border dan margin. Berikut ilustrasinya

Margin
Border
Padding

Margin Padding Content Padding Margin

Padding
Border
Margin
Contoh Box Model:

Terdapat trik agar teks berada diposisi middle

pada sebuah elemen yaitu menambahkan
property line-height yang nilainya sesuai
dengan tinggi elemen
PROPERTY FLOAT & CLEAR

 Property Float digunakan untuk mengatur elemen HTML agar melayang

atau tidak. Secara default, setiap elemen yang dibuat pada HTML akan
ditempatkan dibawah dari elemen yang telah ada sebelumnya. Dengan
property float, beberapa elemen dapat ditempatkan diposisi yang sama.
Nilai dari property float terdiri atas : left, right dan none

 Property clear digunakan untuk mengatur elemen yang melayang oleh

float. Ketika sebuah elemen diberi property float maka lokasi dari elemen
akan diisi oleh elemen selanjutnya. Agar elemen selanjutnya tidak mengisi
elemen float tersebut maka dapat menggunakan property clear. Nilai dari
property clear terdiri atas : none, left, right, both, initial dan inherit
Contoh Block Element Tanpa Float :

Contoh Block Element Dengan Float Pada Div2 :

#div2 dengan float right

Contoh Block Element Dengan Float Pada Div2 dan Clear Pada Div3:

#div2 dengan float right

#div3 dengan clear sehingga

tidak mengisi posisi #div2
PROPERTY POSITION
Property position membantu memposisikan elemen HTML di lokasi apapun. Elemen dapat
diposisikan relatif terhadap posisi defaultnya atau absolut berdasarkan jendela browser .
Terdapat property tambahan ketika property position (relative, absolute dan fixed) ini digunakan
yaitu left, right, top dan bottom. Berikut nilai dari property position:

 RELATIVE POSITION
Dengan nilai relative, posisi sebuah elemen dapat diatur terhadap lokasi defaultnya dengan
menggunakan property left, right, top dan bottom.

#div2 dengan posisi relative,

jarak dari kiri(left) 75pixel
dan jarak dari atas (top) 75pixel
terhadap posisi aslinya
 ABSOLUTE POSITION
Pengaturan posisi pada nilai absolute didasarkan pada jendela browser dan mengabaikan elemen
induknya/sebelumnya. Elemen lain akan mengabaikan posisi dari elemen absolute ini sehingga
posisinya akan diisi oleh elemen selanjutnya

#div2 dengan posisi absolute,

jarak dari kiri(left) 75pixel
dan jarak dari atas (top) 75pixel
terhadap jendela browser
 FIXED POSITION
Hasil dari posisi fixed ini mirip dengan absolute namun posisinya tidak berubah walaupun
browser di scroll ke bawah jika tinggi halaman melebihi tinggi browser.

#div2 dengan posisi fixed,

jarak dari kiri(left) 150 pixel
dan jarak dari atas (top) 150pixel
terhadap jendela browser

Ketika Browser discroll kebawah,

posisi dari Div2 tetap
 STATIC POSITION
Nilai ini merupakan nilai default yang mana walaupun sebuah elemen tidak
menggunakan property position maka elemen tersebut menjalan position ini. Property
left, right, top dan bottom tidak berjalan pada static position.

 INHERIT POSITION
Nilai properti ini digunakan untuk menurunkan value yang ada di element parentnya.
Misalnya element parentnya bernilai absolute, maka element childnya akan
bernilai absolute pula.
PROPERTY Z-INDEX
 Properti z-index menentukan urutan tumpukan suatu elemen
 Elemen dengan urutan tumpukan lebih besar selalu di depan elemen dengan urutan
tumpukan lebih rendah.
 z-index hanya berfungsi pada elemen yang diposisikan dengan nilai absolute, relative dan
fixed

Misalkan terdapat 3 box dengan position seluruhnya relative seperti gambar dibawah ini :
Box biru (#div3) menimpa box hijau (#div2) karena didasarkan pada urutan penulisan elemennya.
Agar box hijau ada diatas box biru maka dapat menggunakan z-index untuk mengatur urutan
tumpukannya. Berikut contohnya:
LANJUT KE MATERI BERIKUTNYA