progremer

Kamis, 14 Maret 2013

Home » » Membuat Layout Dengan CSS

Membuat Layout Dengan CSS

07.42    No comments

Selamat Sore Sahabat IP, kali ini saya akan memberikan tutorial tentang pembuatan layout web tanpa table, tetapi menggunakan CSS. Lebih mudah dan lebih SImple, Check it out. sebernarnya sih saya juga masih belajar Hehehe,,,


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>
-->
    
seperti biasa, file html harus diawali dengan tag dan di akhiri dengan
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;
}
oke, udah belum?
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>
Letakin kode diatas diantara tag dan Kalo udah ya di save, kemudian jalanin / klik file index.html nya. Kalo ada yang mau nanya, koment dibawah ya.. ^_^

Hasilnya adalah ,,jreng,, jreng..


0 komentar:

Posting Komentar