Membuat Layout dengan DIV pada CSS
§ Seperti yang sudah disinggung pada pembahasan
tentang tabel, kalau pembuatan design website yang menggunakan tabel dapat
dikatakan sudah tidak relevan lagi.
§ Sebagai pengganti dari tabel adalah tag div.
§ Tag div memang
dikhususkan untuk membagi halaman kedalam beberapa segmen.
§ Jika kita gabungkan dengan penggunakan attribut id dan class, maka div dapat
kita gunakan untuk layout sebuah halaman.
§ Secara kasar setiap halaman yang “baik” pasti
memiliki beberapa bagian, misalnya halaman tersebut terdiri dari header, kemudian beberapa
kolom untuk content utama, dan sebagainya. Semua itu terserah pada designernya.
§ Pada contoh kasus yang akan kita buat nantinya, kita
akan membuat sebuah layout halaman yang terdiri dari:
1.
Header utama
halaman
2.
2 Kolom
3.
1 untuk content
utama
4.
1 untuk berita
atau lainnya
5.
lebar halaman
tidak lebih dari 800px (untuk berjaga-jaga, karena masih banyak user yang
resolusi monitornya 800x600)
6.
Footer halaman
§ Design halaman yang akan dibuat tidak melibatkan
penggunaan gambar, karena prioritas kita disini hanyalah bagaimana cara
mengatur tata letak komponen menggunakan tag div.
OK, langsung saja kita membuatnya.
§ Ketik kode berikut:
* {
padding: 0; margin: 0 }
body {
font-family:
Verdana, arial, serif;
font-size: 11px;
color:#333;
background:#fafafa;
}
/*pembatas
utama */
#container
{
margin: 6px
auto;
text-align: left;
clear: both;
background:
#fff;
border: 2px
solid #666;
width: 615px;
padding: 0 ;
}
#header {
clear: both;
margin: 2px;
background:
#5BBDFF;
border: 1px
solid orange;
height: 95px;
}
#header h1
{
font-size: 2em ;
font-family:
arial;
color:#c60000;
margin: 14px 6px
4 px 8 px;
}
#menu {
clear: both;
padding: 0;
margin: 0 0 25px
2px;
}
#menu ul {
float: left;
border: none;
list-style:
none;
font : bold 14px
arial;
}
#menu ul li
{
display: inline;
}
#menu ul li
a {
padding-right:
16px;
borderbottom:
4px solid orange;
}
#menu ul li
a:hover {
border-bottom:
4px solid #c60000;
}
#menu ul li
a.aktif {
border-bottom:
4px solid #c60000;
}
#footer {
position:
relative;
clear: both;
height: 40px;
border: none;
background:
#5BBDFF;
color: #000;
width: 100%;
text-align:
center;
}
#footer
span {
top: 15px;
position:
absolute;
}
#content {
margin: 2px 2px
6px 2px;
float: left;
width: 370px;
border: 1px solid
#ccc;
padding: 4px
6px;
}
#content h1
{
border-bottom:
2px dashed #ccc;
margin-bottom:
16px;
}
#side {
border: 1px
solid #ccc;
float: right;
margin: 1px;
width: 200px;
padding: 10px;
}
#side h1 {
border-bottom:
1px solid #fafafa;
}
#side h2 {
background:
#FF9933;
padding: 3px;
color: #333;
text-align:
center;
}
#side p {
border : 1px
solid #ccc;
padding: 4px;
}
a{
text-decoration: none;
color: #666;
}
a:visited {
color: #666 }
§
Simpan dengan nama layout.css
§
Buat file baru, lanjutkan dengan mengetik kode
berikut:
<?xml version="1.0"
encoding="UTF8"?>
<!DOCTYPE
html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dfd">
<html
xmlns="http://www.w3.org/TR/xhtml1">
<head>
<title>Layout
menggunakan DIV</title>
<link rel="stylesheet"
type="text/css" href="layout.css"
/>
</head>
<body>
<div
id="container">
<div
id="header">
<h1>Belajar
Design Website</h1><br>
</div>
<div
id="menu">
<ul>
<li><a
class="aktif" href="#"> Home </a></li>
<li><a
href="#">Books</a></li>
<li><a
href="#">Searrch</a></li>
<li><a
href="#">About</a></li>
<li><a
href="#">Contact Us</a></li>
</ul>
</div>
<div
id="content">
<h1>Working
Class Hero</h1>
<p>
As soon as you're born they make you feel small<br />
by
giving you no time instead of it all<br />
till
the pain is so big you feel nothing at all<br />
a
working class hero is something to be<br />
<br />
they hurt you at
home and they hit you at school<br />
they hated your
clever and despised a fool<br />
till you're so
fucking crazy you can't follow their rules<br />
a working class
hero is something to be<br />
when they've
tortured and scared you for twenty hard years<br />
then they expect
you to pick a career<br />
when you can't
really function you're full of fear<br />
a working class
hero is something to be<br />
<br />
keep you doped
with religion and sex and TV <br />
and you think
you're so clever and classless and free<br />
but you're still
fucking peasants as far as i can see<br />
a working class
hero is something to be<br />
a working class
hero is something to be<br />
<br/>
there's room at
the top they are telling you still<br />
but first you
must learn how to smile as you kill<br />
if you want to
be like all the folks on the hill<br />
<br/>
if you want to
be a hero well just follow me </p>
</div>
<div
id="side">
<h2>
IMAGINE...</h2>
<p>
Imagine there's no heaven
it's easy if you
try
no hell below
usemapabove us only sky
imagine all the
people
living for
today...
imagine there's
no countries
it isn't hard to
do
nothing to kill
or die for
and no religion
too
imagine all the
people
living life in
peace...
you may say i'm
dreamer
but i'm not the
only one
i hope someday
you'll join us
and the world
will be as one
imagine no
possessions
i wonder if you
can
no need for
greed or hunger
a brotherhood of
man
imagine all the
people
sharing all the
world...
you may say i'm
dreamer
but i'm not the
only one
i hope someday
you'll join us
and the world
will live as one...</p>
</div>
<div
id="footer">
<span> WEB Design : Safni
Agustina </span>
</div>
</div>
</body>
</html>
§
Simpan dengan nama layout.html
§
Maka Hasil
layoutnya sbb;
( Ket : Simpan File Layout.css dan Layout.html Harus di folder yang sama )
Komentar
Posting Komentar