5 contoh ke dua layout menggunakan css · contoh ke dua layout menggunakan css ... mengapa...

Contoh ke dua layout menggunakan CSS

Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat

layout yang lain. Berikut ini adalah desain layout yang akan kita buat

Bagian background (warna abu abu) akan kita beri gambar.

Langkah pertama, seperti biasa kita harus membuat bagian-bagian elemen dahulu

menggunakan division (div). berikut ini adalah code dasar untuk setiap elemennya.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Layout 2 CSS</title>

<link rel="stylesheet" type="text/css" href="style2.css">

</head>

<body>

<div id="content">

<div id="header">

<h1>selamat datang</h1>

</div>

<div id="menu">

<div class="navigasi">

<h3>Menu Navigasi A</h3>

<ul>

<li><a href="link1.html">Link 1</a></li>




</ul>

</div>

HEADER

ISI

NAVIGASI 1

FOOTER

NAVIGASI 2

<div class="navigasi">

<h3>Menu Navigasi B</h3>

<ul>





</ul>

</div>

</div>

<div id="isi">

<img src="css.jpg" width="100" height="150" class="gambar">

<p>Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah

bagian isi.Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah

bagian isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah




bagian isi. Ini adalah bagian isi. Ini adalah bagian isi.

</p>








</p>




Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian

isi. Ini adalah bagian isi. Ini adalah bagian isi. Ini adalah bagian



isi.

</p>

</div>

<div id="footer">

<p>Copyright © 2011 by masrur</p>

</div>

</div>

</body>

</html>

Pada contoh kedua layout web kali ini, bahwa semua sel (header, isi, footer dan navigasi)

merupakan bagian dari bagian content. Mengapa dimasukkan ke dalam bagian content?

Hal ini dikarenakan akan dibuat style untuk tersebut, misalnya meletakkan ditengah

halaman dan juga mengatur lebar bagian content nya.

Terlebih dahulu membuat style untuk body nya. Dikarenakan ada penembahan efek

background gambar pada seluruh halaman, maka berikut ini adalah style nya.

Body {

background:url(background.jpg);

}

Hasilnya sebagai berikut

Selanjutnya adalah membuat style untuk bagian content dengan mengatur lebarnya yaitu

750 pixel dan berada ditengah halaman.

#content {

width:750px;

margin:auto; /* membuat posisi ditengah*/

}

Hasilnya adalah

Kalau sudah seperti diatas, tahap berikut nya adalah membuat style pada bagian header

terlebih dahulu supaya lebih rapi. Berikut kode membuat header dibawah ini

#header {

border:1px solid #000000;

background-color:#000000;

padding:10px;

}

h1 {

color:#ffffff;

font-size:40px;

line-height:4px;

}

Header akan tampak sebagai berikut

Header selesai dibuat, dilanjutkan membuat style untuk footer dan teks paragraph nya,

berikut kode css untuk footer.

#footer {

padding:10px;


background-color:#cccccc;

}

#footer p {

text-align:justify;

font-weight:bold;

}

Selanjutnya bagian navigasi, karena ingin diletakkan di kanan, maka kode style nya

sebagai berikut

#menu {

float:right;

}

Dibawah ini adalah kode untuk setiap class navigasinya

.navigasi {

border:1px dashed #000;

margin-top:10px;

background:yellow;

}

Jika sudah dibuat, efek dari style diatas sesuai dengan gambar dibawah ini

Tahap demi tahap selesai, selanjutnya pada bagian isi, buat style nya agar lebih rapi,

berikut ini kode nya.

#isi {

width:550px;

margin-top:10px;

margin-bottom:10px;

padding:10px;


background:white;

}

Lihat hasil gambar ini, lebih bagus bukan !

Tampak nya semakin semangat untuk melanjutkan koding CSS nya, dari gambar diatas

yang perlu disentuh lagi adalah bagian gambar, supaya lebih baik lagi maka kode nya di

bawah ini.

.gambar {

float:left;

margin-top:0px;

margin-right:10px;

margin-bottom:20px;

margin-left:0px;


}

Kira kira hasil gambarnya seperti ini, gambar pada bagian isi sudah tertata dengan baik.

Sentuhan terakhir adalah pada paragrafnya supaya rata justify serta bagian atas sejajar

dengan gambar, oleh karena itu style nya dibawah ini

#isi p {

text-align:justify;

line-height:18px;

margin-top:0px;

}

Gambar dibawah ini adalah hasil sentuhan CSS, dan berhasil lebih baik setelah bagian

teks paragraph diberikan sentuhan terakhirnya. Ini adalah layout menggunakan CSS

tanpa menggunakan table di html.

CSS lebih konsiten dan lebih mudah dalam pengkodean dan tampilannya

Jikalau anda menyimpulkan hasil style pada CSS, pastinya membuat layout itu mudah,

tinggal anda melanjutkan kreatifitas nya. Tentunya tidak lupa menggunakan CSS

5 contoh ke dua layout menggunakan css · contoh ke dua layout menggunakan css ... mengapa...

Documents