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 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;} </style> <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 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:hiddenmenyembunyikan elemen, tetapi memakan ruang sehingga mempengaruhilayout secara keseluruhan Contoh: div.sembunyi {visibility:hidden;} display:nonemenyembunyikan 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 forlayout Tables are inflexible Nested tables load more slowly Table can hurts Search Engine optimization 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. 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: <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; 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 id= right > </div> <div id="footer"> </div>
#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; } Lanjutan #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
<div> <div> <H1>site name</h1> <div> <ul> <li></li> </ul> <div> <h2>page Heading</h2> <p></p>... </div> <div>copyright</div> </div> </div> Struktur HTML
Header
Navigation
#navigation li a:hover { background:#383; } Konten
Footer
Layouting Tutorial 2 Hasil Akhir
Langkah Buat tiga kolom: <div id="leftnavigation"> </div> <div id="rightnavigation"> </div> <div id="content"> </div>
HTML
CSS
Hasil akhir
Studi Kasus 2
Pembagian Area Gambar
Penamaan Area container header mainnav 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://960.gs/
Javascript dan JQuery Next