Silahkan buka IDE anda, boleh notepad, notepad++, Dreamweaver, atau yang lainnya sesuai selera anda.
1. Buat sebuah file HTML
<!DOCTYPE html>
<html>
<head>
<title>Layout CSS Dasar</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- Agar layout berada di tengah-tengah layar, maka gunakan tag <center>-->
<center>
<!--Untuk membatasi layout-->
<div id="pembatas">
<!--HEADER-->
<div id="header">
<h1>LOGO</h1>
</div>
<!-- Menu -->
<div id="menu">
menu menu menu
</div>
<!--konten kiri-->
<div id="kiri">
<br />
<br />
Konten kiri
</div>
<!--konten utama-->
<div id="utama">
<br />
<br />
Konten Kanan
</div>
<!--FOOTER-->
<div id="footer">
Footer
</div>
</div>
<!--Akhir center-->
</center>
</body>
</html>
Simpan dengan nama index.html
2. Buat File CSS-nya
@charset "utf-8";
/* CSS Document */
/*RESET untuk membuat setelan default untuk semua halaman*/
html {
margin:0;
padding:0;
}
#pembatas {
width:800px; /*sesuaikan dengan kebutuhan*/
height:auto; /* Otomatis Mengikuti konten*/
}
#header {
width:800px; /*sesuiakan dengan pembatas*/
height:100px;
border:solid 1px #000;
}
#menu {
width:800px;
height:40px;
border:solid 1px #000;
margin-top:5px; /*Memberikan jarak dengan header*/
}
#kiri {
width:250px;
height:auto;
min-height:500px;
border:solid 1px #000;
margin-top:5px; /*memberikan jarak dengan menu*/
float:left /* Diletakan di sebelah kiri*/
}
#utama {
width:540px;
height:auto;
min-height:500px;
border:solid 1px #000;
margin-top:5px; /*memberikan jarak dengan menu*/
float:right; /* Diletakan di sebelah kanan*/
margin-bottom:5px;
}
#footer {
width:800px;
height:40px;
border:solid 1px #000;
margin-top:5px;
clear:both;
}Simpan dengan nama style.css pada folder yang sama dengan file HTML-nya
Mudah Bukan?
Jika anda ingin file yang sudah jadi, silahkan klik link download dibawah ini
0 komentar:
Post a Comment