CSS Layouting Antonius RC – Pemrograman Web

CSS Selector Tambahan • Tanda > artinya select child element • Contoh: ul > li

• Maka akan terambil 2 elemen li

CSS Selector Tambahan • Tanda + artinya select adjecent element • Adjecent artinya immediatelly following element • Contoh: h2 + p

• Maka akan terambil

pertama

• Juga akan terambil

pertama walaupun ada pemisah teks

CSS Box Model

• Margin – Tidak memiliki warna background dan bersifat transparan • Border – Memiliki warna background dan berada diantara margin dan padding • Padding – Membatasi area dengan konten, terpengaruh oleh warna background dari kotak • Content – isi konten (teks dan gambar)

Cara menghitung ukuran element

CSS Margin dan Padding

W3C box model vs IE box model

IE < 8 BUG! (includes padding and border in the width) To fix always add DOCTYPE

CSS Margin • Margin is default set on order: top, right, bottom, left • margin:25px 50px 75px 100px; – – – –

top margin is 25px right margin is 50px bottom margin is 75px left margin is 100px

• margin:25px 50px 75px; – top margin is 25px – right and left margins are 50px – bottom margin is 75px

• margin:25px 50px; – top and bottom margins are 25px – right and left margins are 50px

• margin:25px; – all four margins are 25px

Contoh CSS Box model

CSS Border <style type="text/css"> p.none {border-style:none;} p.dotted {border-style:dotted;} p.dashed {border-style:dashed;} p.solid {border-style:solid;} p.double {border-style:double;} p.groove {border-style:groove;} p.ridge {border-style:ridge;} p.inset {border-style:inset;} p.outset {border-style:outset;} p.hidden {border-style:hidden;}

No border.

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

A hidden border.

Hasil

Menyembunyikan Element • Ada dua cara yang berbeda: • visibility:hidden menyembunyikan elemen, tetapi memakan ruang sehingga mempengaruhi layout secara keseluruhan Contoh: div.sembunyi {visibility:hidden;} • display:none menyembunyikan elemen dan tidak memakan ruang, sehingga seolah-olah elemen itu tidak ada Contoh: div.sembunyi {display:none;}

Contoh hidden

Contoh none

CSS Table • Urutan Border property: – Border-width – Border-style – Border-color

• Border-Collapse: – Collapse: garis batas tabel menyatu – Separate: garis batas tabel terpisah

• Table layout: – Auto: lebar tabel mengikuti konten cell yang terpanjang; redering lambat – Fixed: lebar tabel tetap, berdasarkan width & height; rendering cepat

• Empty-cell – Show: border terlihat – Hide: border tidak terlihat

Contoh CSS Tabel

Tabel

Contoh lain

Why Don't Use Tables for Layout • • • •

Tables are inflexible Nested tables load more slowly Table can hurts Search Engine optimization Tables are not suits for printing

CSS for printing • – Media can be: “print” or “screen”

• For printing: – – – – – – – – –

Change colors to black on white. Change the font to serif. Watch the font size. Underline all links. Remove non-essential images. Remove navigation. Remove some or most of the advertising. Use page-break-before: always for page-break Remove all JavaScript, Flash, and animated images.

CSS for printing example

Font : serif, black, back white

Link underline

#comments {page-break-before: always;}

Remove unnecessary element

One column layout

HTML: CSS: #onecol { width:600px; margin:0 auto; background-color:#CCC; border:#000 } #header { width: 600px; margin: 0 auto; background-color: #999; padding: 2px 0; } h1 { text-align: left; }

Two Column Header

Lanjutan #header { width: 100%; margin: 0 auto; padding: 2px 0; background-color:#666; } #left { float: left; width: 67%; background: #fff; margin-top: 0; margin-right: 1.67px; border-right: 1px solid black; padding-top: 0; padding-right: 1px; padding-bottom: 20px; }

#right { padding-left: 2px; margin-top: 0; padding-top: 0; } h1 { margin-top: 0; padding-top: 0; } #footer { clear: both; padding-bottom: 1px; border-top: 1px solid #333; text-align: center; background-color:#999999; }

The clear property specifies which sides of an element where other floating elements are not allowed.

Layouting Tutorial 1

http://www.maxdesign.com.au/articles/css-layouts/one-fixed/

Langkah 1 – HTML biasa

•