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)
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
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>
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;}
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
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.
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>
Langkah
• Buat tiga kolom:
– <div id="leftnavigation"> </div>
– <div id="rightnavigation"> </div>
– <div id="content"> </div>– <div id="content"> </div>
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/