Pada bagian 3 kita membuat halaman index.php berikut codenya dan pada bagian 4 kita membuat layout. tapi kenapa setelah kode pada bagian 3 kita jalankan hasilnya sama sekali tidak sama dengan layout pada bagian 4.
untuk membuat hasil runing dari index.php sama dengan layout kita membutuhkan sebuah file css.
yups file css ini yang mengtur tata letak dan semua design yang ada diweb kita nanti
ok langsung saja.
Buat file baru di dalam folder css dengan nama style.css
tulis kode dibawah ini kedalam file style.css
agar tampilannya berubah silahkan buka file index.php
hapus semua kode kemaren ganti dengan yang ini
nanti akan kita lanjutkan lagi...
untuk membuat hasil runing dari index.php sama dengan layout kita membutuhkan sebuah file css.
yups file css ini yang mengtur tata letak dan semua design yang ada diweb kita nanti
ok langsung saja.
Buat file baru di dalam folder css dengan nama style.css
tulis kode dibawah ini kedalam file style.css
body
{
background:url(../images/bg.jpg) no-repeat center top;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000;
}
#wrapper {
border:solid 1px #000;
width:900px;
margin:0 auto;
padding:10px; }
#header {
height:120px;
background-color:#ffffff;
}
#menu {
height:40px;
margin-top:5px;
padding:0px 0px 0px 0px;
background-color:#EBEBEB;}
#maincontent{
margin-top:10px;}
#content{
width:550px;
background:#ffcc00;
float:left;}
#sidebar{
width:340px;
background:#ff9900;
float:left;
margin-left:10px;
}
#lebar{
background:ff3300;
margin-bottom:10px;
}
#kiri{
background:#660000;
width:165px;
float:left;
margin-right:10px;
}
#kanan{
background:#660000;
width:165px;
float:left;
}
sekarang silahkan di coba lagi jalankan web kalian dengan cara buka alamat di web browser kalian "localhost/bedahspesifikasi" tanpa tanda kutip ya.. pasti tampilannya blum ada perubahan sama sekali... hehehe..{
background:url(../images/bg.jpg) no-repeat center top;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000;
}
#wrapper {
border:solid 1px #000;
width:900px;
margin:0 auto;
padding:10px; }
#header {
height:120px;
background-color:#ffffff;
}
#menu {
height:40px;
margin-top:5px;
padding:0px 0px 0px 0px;
background-color:#EBEBEB;}
#maincontent{
margin-top:10px;}
#content{
width:550px;
background:#ffcc00;
float:left;}
#sidebar{
width:340px;
background:#ff9900;
float:left;
margin-left:10px;
}
#lebar{
background:ff3300;
margin-bottom:10px;
}
#kiri{
background:#660000;
width:165px;
float:left;
margin-right:10px;
}
#kanan{
background:#660000;
width:165px;
float:left;
}
agar tampilannya berubah silahkan buka file index.php
hapus semua kode kemaren ganti dengan yang ini
<!DOCTYPE HTML>
<html>
<head>
<title> Bedah Spesifikasi</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body >
<div id="wrapper">
<div id="header">Header</div>
<div id="menu"> Menu </div>
<div style="clear:both;"></div>
<div id="maincontent">
<div id="content">content</div>
<div id="sidebar">
<div id="lebar">lebar</div>
<div id="kiri">kiri</div>
<div id="kanan">kanan</div>
</div>
</div>
<div style="clear:both;"></div>
<div id="footer">footer</div>
</div>
</body>
</html>
sebelum disimpan kode <br /> harus dihapus terlebih dahulu..<html>
<head>
<title> Bedah Spesifikasi</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body >
<div id="wrapper">
<div id="header">Header</div>
<div id="menu"> Menu </div>
<div style="clear:both;"></div>
<div id="maincontent">
<div id="content">content</div>
<div id="sidebar">
<div id="lebar">lebar</div>
<div id="kiri">kiri</div>
<div id="kanan">kanan</div>
</div>
</div>
<div style="clear:both;"></div>
<div id="footer">footer</div>
</div>
</body>
</html>
nanti akan kita lanjutkan lagi...