objek-wisata|free-download|tokoh-dunia|c++|css|blogger|free-artikel|tutorial|program|indonesia: LAYOUT TEMPLATE DENGAN CSS

MENGATUR LAYOUT DENGAN CSS

Sekarang akan membahas mengatur layout dengan CSS,
sekedar memahami penyusunan layout sebuah Template

tutor ini merupakan dasar dari pembuatan Template, untuk contoh
sederhana dan agar mudah dipahami

penulisan kode CSSnya berada satu dengan HTMLnya

Mulai dengan kode ini

<hthl>

<head>

<title>latihan layout dengan CSS</title>

</head>

<body>

<style>

body{
background: #000000;
}

#header{
background: #F22D24;
width: 980px;
height: 150px;
}

#top{
background: #332AEF;
width: 980px;
height: 50px;
}

#main{
width: 980px;
height: 550px;
}

#left{
background: #3EEF23;
width: 630px;
height: 550px;
float: left;
}

#right{
background: #EFEF61;
width: 330px;
height: 550px;
float: right;
}

#potter{
background: #3719BC;
width: 980px;
height: 90px;
}

</style>

<div id="header"></div>

<div id="top"></div>

<div id="main">

<div id="left"></div>

<div id="right"></div>

</div>

<div id="potter"></div>

</body>

</html>

kode ini simpan dengan nama apa aja titik HTML

Kita membuat halaman dengan header, topmenu, contain, right menu, dan
potter

sedangkan <div id="main"> adalah alas atau tempat untuk <div
id="left"></div>(contain) dan <div id="right"></div>(right menu)

kode div semua diatur oleh CSS diatasnya sesuai id masing-masing

bagi yang sudah mengerti HTML kode CSS diatas mungkin tidak terlalu
bingung karena sangat sederhana

cuma background dengan warna, lebar, dan tinggi saja, tapi yang perlu di
ingat,

kode CSS ditilis didalam tanda { (kurawal buka) dan } (kurawal tutp)
dan jangan lupa ; (titik koma)

sekarang coba kita modif dikit kode diatas

Tambahkan margin-top dan margin-bottom 10px di top seperti ini

#top{
background: #332AEF;
width: 980px;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
}

agar ada jarak antara atas dan bawahnya semayak 10 px,jika ingin jarak di
kiri ganti pake left dan kanan dengan right

dan untuk isinya tulis aja kode HTML diantara DIV buka dan DIV
tutup seperti contoh

masukan tulisan TOP MENUdi DIV top seperti ini <div
id="top">TOP MENU</div>

kemudian tambahkan beberapa kode di CSSnya untuk mengatur Text

beri warna dengan menambahkan color: #F22D24; jenis huruf
dengan font-family: georgia;

ukuran text dengan font-size: 50px; posisi text
dengan text-align: center; seprti dibawah ini

#top{
background: #332AEF;
width: 980px;
height: 50px;
margin-top: 10px;
margin-bottom: 10px;
color: #F22D24;
font-family: georgia;
font-size: 50px;
text-align: center;
}