Step by Step Materi Layout CSS 2014-01-03

Membuat Layout dengan CSS (Sample 1)

Dasar-dasar Layout

Welcome to my site

Menu Navigasi

Link 1

Link 2

Link 3

Link 4

Link 5

Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi

Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi

Sampai sini lihat hasilnya Layout

HEADER

ISINAVIGASI

FOOTER

Kemudian untuk yang pertama kita akan membuat sel untuk bagian header dan footer, berikut style untuk bagian header dan footer.Lalu tambahkan script di bagian ini

Dasar-dasar Layout

#header {

padding:10px; /*jarak teks dari tepi kotak*/

border:1px solid #000000; /*membuat garis tebal 1 pixel dengan pilihan bentuk solid, dashed,groove,double,ridge*/

background-color:#CCCCCC; /*memberi warna latar*/

#footer {

padding:10px;

border:3px dashed #000000;

background-color:#CCCCCC;

Sampai sini lihat hasilnya, tampil hasil style dari header dan footer Kemudian buat style untuk bagian isiLalu tambahkan script dibagian ini

#header {

padding:10px;

border:1px solid #000000;

#footer

padding:10px;

Sampai sini lihat hasilnya Lalu tambahkan script dibagian ini

Buat style untuk navigasi krn bagian tersebut ingin di letakkan disebelah kanan, maka berikan properti float:right

#header {

padding:10px;

#footer {

padding:10px;

#navigasi {

float:right;

padding:10px;

background:yellow;

Sampai sini lihat hasilnya

Lalu tambahkan script dibagian ini pada bagian isi,#isi{

width:830px; /* lebar element Jika terlalu dempet bikin saja 820px */

margin-botton:10px;

padding:10px;

Sampai sini lihat hasilnya Lalu tambahkan script dibagian header,footer,isi dan navigasi margin-top yang berfungsi mengatur jarak antara navigasi dengan header dan agar seimbang dengan yang lain kita beri 10 pixel.#header {

padding:10px;

margin-top:10px;

#footer {

padding:10px;

margin-top:10px;

width:820px;

margin-top:10px;

margin-botton:10px;

padding:10px;

#navigasi {

float:right;

padding:10px;

margin-top:10px;

background:yellow;

Sampai sini lihat hasilnya Lalu tambahkan script dibagian iniSekarang saatnya modifikasi gambar untuk mengatasi masih ada space kosong yang besar disebelah kanan image. Tahap selanjutnya adalah meletakkan paragraf di sebelah kanannya. Untuk keperluan ini kita buat class untuk imagenya agar dapat menyisipkan image2 lainnya jika image yang ingin disisipkan lebih dari satu. ( tambahkan di Div Isi.gambar {/* Properti float : left di berikan karena ingin gambar berada disebelah kiri element yang mengikutinya dalam hal ini paragraf */

float: left;

margin-top: 0px;

margin-right: 10px;margin-bottom: 10px;

margin-left: 0px;

} ( tambahkan di dalam StyleKeterangan

Properti float : left di berikan karena ingin gambar berada disebelah kiri element yang mengikutinya dalam hal ini paragraf. Sedangkan posisi margin digunakan untuk mengatur gambar terhadap element disekitarnya. Contoh margin-left mengatur jarak tepi kanan image dengan teks paragraf yang ada disebelah kanannya. Meskipun margin-left diberi nilai 0px tetapi masih ada jarak tepi kiri image dengan garis border bagian isi. Hal ini dikarenakan efek dari properti padding:10px dari style untuk isi sebelumnya begitu juga untuk top sebelumnya. Sampai sini lihat hasilnya Lalu tambahkan script dibagian iniUntuk membuat paragraf memiliki alignment justify, maka kita dapat buat stylenya. Properti line-height digunakan untuk mengatur jarak antar baris teks paragraf.#isi p {

text-align:justify;

line-height: 22px;

} ( tambahkan di dalam Style

Sampai sini lihat hasilnya Lalu tambahkan script dibagian iniPada tahap ini gambarnya menyembul keatas terhadap teks paragrafnya, kita modifikasi lagi style nya agar paragraf dinaikkan sedikit agar sejajar dengan gambarnya#isi p {

margin-top:0px; /*Jika gambar belum seperti yang di inginkan beri nilai (min)* atau pada .gambar {margin-top:2px}/

text-align:justify;

line-height: 22px;

Sampai sini lihat hasilnyaHasilnya disini belum sempurna jika dicoba gunakan Monitor PC (model lanscape), untuk memperbaiki lakukan#isi

margin-botton:10px;

margin-top:10px;

padding:10px;

width:1150px; /* ini agar isi menyamping atau membesar */Kemudian atau tahapan ini diabaikan saja krn agar memanjang kita bisa tambahkan datanya Untuk selanjutnya tambahkan kalimat-kalimat berikut ini sebanyak 3 paragraf hingga total paragraf menjadi 5.Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi

Agar terdapat keseimbangan antara height pada bagian isi dan navigasi maka lakuakan konfigurasi selanjutnya

#navigasi {

margin-top:10px;

float:right;

padding:10px;

background:yellow;

height:410; /* optional tingginya sesuai kebutuhan */

} Untuk selanjutkan letakkan script dibawah ini di dalam style

/* Barisan script dibawah ini modifikasi isi kalimat yang terkandung dalam tiap paragraph */

{ font-family: Arial Black;

font-size:20px;

color:red;

}Kemudian lihat hasilnya

Script dibawah ini agar gambar tertata rapih di dalam paragraf.gambar {

float: left;

margin-top: 10px;

margin-right: 10px;

margin-bottom: 10px;

margin-left: 10px;

height:120px; /* atau 80 saja kalu terlalu panjang */

}Kemudian lihat hasilnya

hilangkan tag pada footer, jika isi dari footer tdk ingin di berimodifikasi

Sampai sini lihat hasilnya

Modifikasi dengan fitur yang berbeda untuk paragraph berikutnya dengan menambahkan script berikut ini didalam p.a {

font-family: Aharoni;

font-size:30px;

font-style:italic;

color:blue;

text-transform:lowercase;

text-decoration:line-through;

text-indent:2cm;

text-align:left;

border:3px;

border-color:black;

border-style:dotted;

background-color:orange;

border-width: 10 5 20 5;

} Dan berikat atribut berupa class a pada bagian paragraph yang diinginkan

... Agar fungsi dari text-align:left; Jangan lupa lakukan #isi p {

margin-top:0px;

/*text-align:justify; */ ( Di nonaktifkan

line-height: 22px;

}Sampai sini lihat hasilnya

Modifikasi dengan fitur yang berbeda untuk paragraph berikutnya dengan menambahkan script berikut ini didalam

font-family: Comic Sans MS;

font-style:Bold;

color:yellow;

text-transform:uppercase;

text-decoration:underline;

text-indent:2cm;

text-align:right;

border:3px;

border-color:red;

border-style:solid;

background-color:green;

word-spacing:20px;letter-spacing:15px;

} Dan berikat atribut berupa class b pada bagian paragraph yang diinginkan

...Sampai sini lihat hasilnya Agar lebar isi bersinergi dengan navigasi maka lakukan

margin-top:10px;

margin-botton:10px;

padding:10px; /*jarak teks dari tepi kotak*/

width:1150px;

}Sampai sini lihat hasilnya Modifikasi dengan fitur yang berbeda untuk paragraph berikutnya dengan menambahkan script berikut ini didalam

#bab1 {

font-family: Bernard MT Condensed;

font-size:40px;

font-style:normal;

color:blue;

text-transform:Capitalize;

text-decoration:overline;

text-indent:3cm;

text-align:center;

border:1px;

border-color:orange;

border-style:groove;

word-spacing:10px;

line-height:50pt; } Dan berikat atribut berupa id bab1 pada bagian paragraph yang diinginkan

Sampai sini lihat hasilnya Agar fungsi dari line-height:50pt; Jangan lupa lakukan #isi p {

margin-top:0px;

/*text-align:justify; */ ( Di nonaktifkan

/*line-height: 22px; */ ( Di nonaktifkan

}Sampai sini lihat hasilnya

Modifikasi body dengan di beri background berikan script berikut ini pada didalam

body {

background-image:url(a1.png);

background-repeat:repeat-x;

background-position:top;

background-attachment:fixed

a:visited { color:red}

a:hover { color:orange}

a:active { color:gray} Modifikasi pada

www.detik.com

Sampai sini lihat hasilnya Untuk membuat format Dropcap maka buat fungsi css sebagai berikut

p.styleku:first-letter {float:left;font-family:"Lucida Grande";font-size:80px;}Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi

Sampai sini lihat hasilnya Konfigurasi di footer#footer {

font-family: Bodoni MT Black;

font-size:30px;

font-style:normal;

color:green;

text-decoration:blink;

text-align:center;

padding:10px;

margin-top:10px;

} Konfigurasi di div

Rubah menjadi

Sampai sini lihat hasilnya Agar tercipta keseimbangan antara isi dan navigasi maka lakukan pengeditan#navigasi {

margin-top:10px;

float:right;

padding:10px;

background:yellow;

height:1437

} Agar isi footer ada di bagian tengah#footer {

text-align:center;

margin-top:10px;

padding:10px;

}Sampai sini lihat hasilnyaMATERI LANJUTAN Backgroun Warna Layarbody {

/*background-image:url(a1.png);

background-repeat:repeat-x;

background-position:top;

background-attachment:fixed*/

} Jarak Antar Kata Dan Huruf p.b {text-decoration:underline;

border:3px; border-color:black;

border-style:groove;

word-spacing:20px;letter-spacing:15px; /*jarak antar kata dan huruf*/

border-width: 10 5 20 5

} Format Dropcap

p.styleku:first-letter {float:left;font-family:"Lucida Grande";font-size:80px;}Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi

Cara yang lebih efektif untuk konfigurasi Image

( tambahkan di Div Isi.gambar {

float: left;

margin-top: 0px;

margin-right: 10px;margin-bottom: 10px;

margin-left: 0px;

}Kita ganti scriptnya.gambar {

float: left;

margin-top: 10px;

margin-right: 10px;

margin-bottom: 0px;

margin-left: 10px;

/*height:80px; */

width:90px; height:70px;

} ( Di dalam style

(Bisa di letekkan di salah satu tempat (lihat background berwarna kuning)Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi

Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian isi

Documents

Step by Step Materi Layout CSS 2014-01-03