CSS Layouting

Antonius RC Pemrograman Web

CSS Selector Tambahan

Tanda > artinya select child element Contoh: ul > li

Maka akan terambil 2 elemen: <li>item dan <li><ol><li> ...

CSS Selector Tambahan

Tanda + artinya select adjecent element djecent artinya immediatelly !ollo"ing element Contoh: h2 + #

Maka akan terambil <#> #ertama

$uga akan terambil <#> #ertama "alau#un ada #emisah teks

Soal CSS Selector

section#review { background-color: #eee;

Soal CSS Selector

! { "ont-si#e: $%&em;

Soal CSS Selector

!%aut'or { "ont-si#e: $%&em;

Soal CSS Selector

! a { "ont-si#e: (%)&em;

Soal CSS Selector

section a { border: $!* solid #aaa

CSS Selector

section + a { border: $!* solid #aaa

CSS Selector

', - !{ border: $!* solid #aaa

CSS Selector

!:"irst-letter{ "ont-si#e: $%.em;

CSS %o& Model

/argin ' Tidak memiliki "arna background dan bersi!at trans#aran 0order ' Memiliki "arna background dan berada diantara margin dan #adding Padding ' Membatasi area dengan konten( ter#engaruh oleh "arna background dari kotak Content ' isi konten )teks dan gambar*

CSS 0o* /odel : /argin

1'$+2orem i!sum dalum13'$+ margin-top margin-left 1!+walla walla walla 13!+ margin-right

margin-bottom 1'$+2orem i!sum dalum13'$+

CSS 0o* /odel : Padding

!adding-to!

2orem i!sum
!adding-le"t

!adding-rig't

!adding-bottom

CSS 0o* /odel .bo& + "idth: ,--#&. height: 2--#&. #adding: /-#&. border: /#& solid 0---. margin: /1#&. 2

3,C bo& model 4s 56 bo& model

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

CSS Margin
Margin is de!ault set on order: to!4 rig't4 bottom4 le"t Cara baca: margin:,&!* &(!* 5&!* $((!*;
to# margin is 21#& right margin is 1-#& bottom margin is 71#& le!t margin is /--#&

margin:,&!* &(!* 5&!*;

to# margin is 21#& right and le!t margins are 1-#& bottom margin is 71#&

margin:,&!* &(!*;
to# and bottom margins are 21#& right and le!t margins are 1-#&

margin:,&!*;
all !our margins are 21#&

Contoh CSS %o& model

CSS 0order
<style ty#e89te&t:css9>
#.none +border;style:none.2 #.dotted +border;style:dotted.2 #.dashed +border;style:dashed.2 #.solid +border;style:solid.2 #.double +border;style:double.2 #.groo4e +border;style:groo4e.2 #.ridge +border;style:ridge.2 #.inset +border;style:inset.2 #.outset +border;style:outset.2 #.hidden +border;style:hidden.2
<# class89none9><o border.<:#> <# class89dotted9> dotted border.<:#> <# class89dashed9> dashed border.<:#> <# class89solid9> solid border.<:#> <# class89double9> double border.<:#> <# class89groo4e9> groo4e border.<:#> <# class89ridge9> ridge border.<:#> <# class89inset9> n inset border.<:#> <# class89outset9> n outset border.<:#> <# class89hidden9> hidden border.<:#>

<:style>

=asil

/en6embun6ikan 7lement
da dua cara yang berbeda:
visibilit6:'idden menyembunyikan elemen( teta#i memakan ruang sehingga mem!engaru'i layout secara keseluruhan Contoh: di4.sembunyi +4isibility:hidden.2 dis!la6:none menyembunyikan elemen dan tidak memakan ruang( sehingga seolah;olah elemen itu tidak ada Contoh: di4.sembunyi +dis#lay:none.2

Contoh hidden

Contoh none

CSS Table
>rutan 0order #ro#erty:
%order;"idth %order;style %order;color

0order-Colla!se:
Colla#se: garis batas tabel menyatu Se#arate: garis batas tabel ter#isah

Table la6out:
uto: lebar tabel mengikuti konten cell yang ter#anjang. redering lambat ?i&ed: lebar tabel teta#( berdasarkan "idth @ height. rendering ce#at

7m!t6-cell
Sho": border terlihat =ide: border tidak terlihat

Contoh lain

3hy 8on9t :se ;ables "or 2a6out

Tables are in!le&ible <ested tables load more slo"ly Table can hurts Search 6ngine o#timiAation Tables are not suits !or #rinting

Layout dgn CSS

Plus: Breater ty#ogra#hy control Style is se#arate !rom structure Cotentially smaller documents 6asier site maintenance 5ncreased accessibility bility to de!ine styles !or multi#le media ty#es /inus: There still remain issues "ith the lack o! uni!orm bro"ser su##ort o! CSS

CSS !or #rinting

<link rel89stylesheet9 ty#e89te&t:css9 hre!89#rint.css9 media89#rint9>
Media can be: <!rint= or <screen=

?or #rinting:
Change colors to black on "hite. Change the !ont to seri". 3atch the !ont siAe. >nderline all links. Demo4e non;essential images. Demo4e na4igation. Demo4e some or most o! the ad4ertising. >se #age;break;be!ore: al"ays !or #age;break Demo4e all $a4aScri#t( ?lash( and animated images.

CSS !or #rinting e&am#le

Font : serif, black, back white

Link underline

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

Remove unnecessary element

CSS Positioning
Setia# element da#at ditentukan #osisinya )secara 2E mau#un ,E* dengan nilai:
Static: de!ault #osition Relative: #osisi relati! terhada# #osisi a"alnya )#ada static #ositioning* Absolute: element yang bersangkutan akan dikeluarkan dari document !lo" dan membentuk blok sendiri >i*ed: berdasarkan koordinat( #osisinya akan selalu teta# )tidak ikut geser jika discroll halamannya* >loat: mengambang

Delati4e Cositioning

h1 { background-color:#cccccc; padding:5px; color: #000000; } #myContent { position: relative; left:30px; font-family:Arial,sans-serif; }

Changes the location o! an element in relation to "here it "ould other"ise a##ear

,/

bsolute Cositioning
Crecisely s#eci!ies the location o! an element in the bro"ser "indo"

h1 { background-color:#cccccc; padding:5px; color: #000000; } #content {position: absolute; left:200; top:100; font-family:Arial,sans-serif; width:300; }

,2

?loat Cro#erty

h1 { background-color:#cccccc; padding:5px; color: #000000; } p { font-family:Arial,sans-serif; } #yls {float:right; margin: 0 0 5px 5px; border: solid; }

6lements that seem to F!loat9 on the right or le!t side o! either the bro"ser "indo" or another element are o!ten con!igured using the !loat #ro#erty.

,,

>i*ed or >luid 2a6out?

GH- grid system !luid

http://onepcssgrid.mattimling .com/

Setting t'e widt' and 'eig't "i*ed and "luid

?or !i&ed layout: width: value; height: value; ?or !luid layout: min-width: value; min-height: value; max-width: value; max-height: value;

Ine column layout

@;/2: <di4 id89header9> <h/>Ine Column Layout<:h/> <:di4> <di4 id8Fonecol9> bla bla bla bla <:di4> CSS: 0onecol + "idth:GH-#&. margin:- auto. background;color:0CCC. border:0--2 0header + "idth: GH-#&. margin: - auto. background;color: 0GGG. #adding: 2#& -. 2 h/ + te&t;align: le!t. 2

T"o Column =eader

<di4 id8FheaderJ><:di4> <di4 id8Fle!t9><:di4> <di4 id8FrightJ><:di4> <di4 id89!ooter9><:di4>

Lanjutan
0header + "idth: /--K. margin: - auto. #adding: 2#& -. background;color:0HHH. 2 0le!t + !loat: le!t. "idth: H7K. background: 0!!!. margin;to#: -. margin;right: /.H7#&. border;right: /#& solid black. #adding;to#: -. #adding;right: /#&. #adding;bottom: 2-#&. 2 0right + #adding;le!t: 2#&. margin;to#: -. #adding;to#: -. 2 h/ + margin;to#: -. #adding;to#: -. 2 0!ooter + clear: bot'; #adding;bottom: /#&. border;to#: /#& solid 0,,,. te&t;align: center. background;color:0GGGGGG. 2

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

Layouting Tutorial /

htt#:::""".ma&design.com.au:articles:css;layouts:one;!i&ed:

Langkah / ' =TML biasa

 <di4>
<di4>
<=/>Site name<:=/>

Struktur =TML

<di4>
<ul>
<li>=ome<:li> ...

<:ul> <di4>
<h2>Cage =eading<:h2> <#>Lorem i#sum<:#> ...

<:di4> <di4>Co#yright ...<:di4>

<:di4>

<:di4>

=eader

Aavigation

#navigation li a:hover { background:#383; }

Lonten

?ooter

Layouting Tutorial 2
Hasil Akhir

Langkah
%uat tiga kolom:
<di4 id89le!tna4igation9> <:di4> <di4 id89rightna4igation9> <:di4> <di4 id89content9> <:di4>

=TML

CSS

=asil akhir

<e&t
$a4ascri#t dan $Muery

Studi Lasus #bacasendiri

Cembagian rea Bambar

Cenamaan rea
container header mainna4 menu contents !ooter

=TML "al

CSS "al

=asil CSS "al

kasus2-1.css

CSS Screen

kasus2.css

CSS Crint

kasus2print.css

More resources on CSS layouting

htt#:::layouts.ironmyers.com: htt#:::designshack.net:articles:css:7/1; a"esomely;sim#le;and;!ree;css;layouts: htt#:::css.ma&design.com.au htt#:::GH-.gs:

<e&t
$a4ascri#t dan $Muery