Jumat, 04 Januari 2013
kali ini saya akan membeerika tutorial tentang pembuatan layout web
tanpa table, tetapi menggunakan CSS. Lebih mudah dan lebih SImple, Check
it out.
Langkah Pertama Buat Sebuah Folder WEB kamu, dan buat 2 buah file yaitu:
1 style.css
2. index.html
isi index.html sebagai beikut
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <!--<head> <link href="style.css" mce_href="style.css" rel='stylesheet' type='text/css' /></head><body></body>--> |
Selanjutnya buatlah isi dari style.css sebagai berikut :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| /*Untuk Merangkum Semua Elemen Web (Header/Content/Fotter) */#wrap { margin:0 auto; width: 960px; height: auto; }/*Akhir*/#header { height : 195px; background:#c7c7c7;}#sidebar { float : left; width : 250px; height : auto; padding:5px; background:pink; -moz-border-radius:10px 10px 10px 10px; -moz-box-shadow:0 0 3px #555555; }#content { float : left; width : 690px; height : auto; padding:5px; background:#e6e7e9; clear:both;}#footer { color : #ffffff; height : 50px; clear : both; background: #111; background: -moz-linear-gradient(#444, #111); background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444)); background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); padding:10px; border-radius:0 0 10 10;} |
lanjut untuk yang isi index.html lagi ya.
1
2
3
4
5
6
7
| <div id="wrap"> <div id="header">Ini Header</div> <div id="content">Ini Content</div> <div id="sidebar">Ini Sidebar</div> <div id="footer">Ini Footer</div></div> |
Hasilnya adalah ,,jreng,, jreng..
