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 <p> pertama

• Juga akan terambil <p> 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– 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 class="none">No border.</p>

<p class="dotted">A dotted border.</p>

<p class="dashed">A dashed border.</p>

<p class="solid">A solid border.</p>

<p class="double">A double border.</p>

<p class="groove">A groove border.</p>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;}

</style>

<p class="groove">A groove border.</p>

<p class="ridge">A ridge border.</p>

<p class="inset">An inset border.</p>

<p class="outset">An outset border.</p>

<p class="hidden">A hidden border.</p>

Hasil

Menyembunyikan Element

• Ada dua cara yang berbeda:

• visibility:hidden menyembunyikan elemen, tetapi

memakan ruang sehingga mempengaruhi layout

secara keseluruhansecara 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– 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• Tables are not suits for printing

CSS for printing

• <link rel="stylesheet" type="text/css" href="print.css" media="print"> – Media can be: “print” or “screen”

• For printing:– Change colors to black on white.

– Change the font to serif.– 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

Remove unnecessary element

Link underline

Font : serif, black, back white

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

One column

layout

HTML:

<div id="header">

<h1>One Column Layout</h1>

</div>

<div id=“onecol">

bla bla bla bla

</div>

CSS:

#onecol {

width:600px;

margin:0 auto;

background-color:#CCC;background-color:#CCC;

border:#000

}

#header {

width: 600px;

margin: 0 auto;

background-color: #999;

padding: 2px 0;

}

h1 {

text-align: left;

}

Two Column Header

<div id=“header”>

</div>

<div id=“left">

</div></div>

<div id=“right”>

</div>

<div id="footer">

</div>

Lanjutan#header {

width: 100%;

margin: 0 auto;

padding: 2px 0;

background-color:#666;

}

#left {

float: left;

#right {

padding-left: 2px;

margin-top: 0;

padding-top: 0;

}

h1 {

margin-top: 0;

padding-top: 0;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;

}

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

Struktur

HTML• <div>

– <div>

• <H1>site name</H1>

– <div>

• <ul>

– <li></li>

• </ul>• </ul>

• <div>

– <h2>Page Heading</h2>

– <p></p> ...

• </div>

• <div>Copyright</div>

– </div>

• </div>

Header

Navigation

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

Footer

Layouting Tutorial 2

Hasil Akhir

Langkah

• Buat tiga kolom:

– <div id="leftnavigation"> </div>

– <div id="rightnavigation"> </div>

– <div id="content"> </div>– <div id="content"> </div>

HTML

CSS

Hasil akhir

Studi Kasus 2

Pembagian Area Gambar

Penamaan Area

• container

• header

• mainnav

• menu• menu

• contents

• footer

HTML Awal

CSS Awal

Hasil CSS Awal

kasus2-1.css

CSS Screen

kasus2.css

CSS Print

kasus2print.css

More resources on CSS layouting

• http://layouts.ironmyers.com/

• http://designshack.net/articles/css/715-

awesomely-simple-and-free-css-layouts/

• http://css.maxdesign.com.au• http://css.maxdesign.com.au

• http://960.gs/

Next

• Javascript dan JQuery