Kali ini saya mau berbagi
sedikit tentang css posisioning. Yaitu teknik mengatur posisi tau letak
dengan css.
Pertama buat index.html
Tulis code di bawah :
<html>
<head>
<title>programmer-junior.blogspot.com</title>
<link rel="stylesheet"
type="text/css" href="index.css" />
</head>
<body>
<div class=”bingkai”>
HEADER
</div>
<div class=”tengah”>
<div
class=”kanan”>
KANAN
</div>
<div
class=”kiri”>
KIRI
</div>
</div>
<div class=”footer”>
FOOTER
FOOTER
</div>
</div>
</body>
</html>
Lalu simpan.
Lihat bagian <link rel="stylesheet"
type="text/css" href="index.css" /> ini adalah link css
yang kita gunakan, karena kita menggunakan css di file lain, Yaitu index.css.
tag <div class=””> ini adalah cara pemanggilan css dan di tutup dengan
tag </div>. sekarang kita membuat index.css, tulis code di bawah:
.bingkai {
width:1000px;
margin-left:163px;
margin-top:40px;
height:800px;
}
.header {
width:1000px;
height:150px;
background-color:#00E;
}
.tengah {
height:500px;
width:1000px;
}
.kiri {
Width:300px;
height:500px;
background-color:#444;
float:left;
}
.kanan{
width:700px;
height:500px;
background-color:#777;
float:left;
}
.footer{
width:1000px;
height:50px;
background-color:#999;
}
Lalu simpan dengan nama index.css,
Keterangan:
width:1000px;//lebar bingkai
margin-left:163px;//jarak keluar ke kiri
margin-top:40px;//jarak keluar ke atas
height:800px;//tinggi bingkai
background-color:#00E;//warna latar belakang header
float:left;//melakat/nempel di kiri
Hasil:
Sekian tutorial dari saya terima kasih.
0 komentar:
Posting Komentar