SMKN3 MAUMERE: Membuat Template 3 Kolom Layout Website dengan CSS

Untuk membuat template website 3 kolom dengan CSS caranya sama dengan membuat 2 kolom yang pernah dibahas sebelumnya. Perbedaannya hanya penambahan satu div untuk konten atau tengah pada file html maupun pada file css. berikut ini adalah langkah-langkah untuk membuat template cantik dengan CSS.

Buatlah sebuah file html, bisa menggunakan notepad, notepad ++ atau dengan macromedia dreamweaver dan masih banyak lagi editor html yang lain selain 3 buah editor yg disebutkan diatas.
Beri nama file jenis html atau dengan ekstension .html. contoh nama file adalah template.html.
File template.html yang dibuat seperti berikut ini :

   4. Bukalah notepad, notepad ++ atau dreamweaver dan buat lagi file dengan nama style.css
   5. Simpanlah file style.css satu folder dengan file template.html
   6. Berikut ini adalah isi dari file style.css

#wrapper {
 background-color: #DDEEFF;
 display: block;
 height: auto;
 width: 980px;
 margin-right: auto;
 margin-left: auto;
 position: relative;
}

#header {
width:auto;
margin-top:5px;
height:100px;
padding:5px;
-moz-border-radius:15px;
background:#9999FF;
border:#9966CC solid 1px;
}
#navigasi {
 display: block;
 height: 35px;
 width: 980px;
 background-color: #ccddee;
 float: left;
 position: relative;
 visibility: visible;
 z-index: 2;
 }
#kiri{
padding:5px;
height:300px;
width:210px;
margin-right:5px;
float:left;
margin-top:10px;
border-radius:15px;
-moz-border-radius:15px;
background:#99CCFF;
}
#tengah{
padding:5px;
height:300px;
float:left;
width:520px;
margin-top:10px;
border-radius:15px;
-moz-border-radius:15px;
background:#999999;
}
#kanan{
padding:5px;
float:right;
height:300px;
width:210px;
margin-top:10px;
border-radius:15px;
-moz-border-radius:15px;
background:#99CCFF;
}
#footer{
padding:5px;
height:35px;
text-align:center;
background:#0cf;
margin-top:5px;
clear:both;
-moz-border-radius:15px;
}
.clear{
height:5px;
clear:both;
}

Hasil template yang dibuat seperti gambar berikut ini !

Jumat, 02 Mei 2014

Membuat Template 3 Kolom Layout Website dengan CSS