Membuat layout sederhana dengan css

Membuat layout dengan css

Berikut ini saya akan berbagi tentang cara membuat layout/tampilan halaman web sederhana dengan html dan css. Layout yang saya buat sangat sederhana dengan susunan 2 kolom yang dilengkapi pula dengan header, menu pada bagian atas serta bagian footer.

Selain waktu penampilan halaman web lebih cepat, cara membuat layout dengan html dan css juga sangatlah mudah. Silahkan lihat kode berikut.

Membuat kode html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Contoh Layout Sederhana dengan html dan css</title>
</head>
<body>
<div id="utama">
  <div id="header"> 
    <h1>NAMA HALAMAN / SITUS</h1>
  </div>
  <div id="menu-atas"> <a href="#">MENU 1</a> <a href="#">MENU 2</a> <a href="#">MENU 3</a></div>
  <div id="informasi">
    <div id="leftcolumn">
      <h2>KOLOM KIRI</h2>
      <p> INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI</p>
    </div>
    <div id="rightcolumn">
      <h2>KOLOM TENGAH</h2>
      <p>INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI INFORMASI</p>
    </div>
    <div class="clear"></div>
  </div>
  <div id="footer"> Dibuat oleh <a href="www.zainalhakim.web.id">www.zainalhakim.web.id</a></div>
</div>
</body>
</html>

Kemudian kita buat kode cssnya untuk mengatur susunan tampilan html diatas. Caranya, sisipkan pada bagian <head>..</head>

Kode css untuk layout

<style type="text/css">
* {
	padding: 0;
	margin: 0;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
}
#utama {
	margin: 0 auto;
	width: 800px;
	padding:10px;
}
#informasi {
	margin-bottom: 5px;
	overflow: auto; 
	width: 800px;
	background-color:#ECFEEB;
}
#header {
	color: #333;
	padding: 10px;
	height: 100px;
	margin: 10px 0px 5px 0px;
	background:#BEFBBB;
}
#menu-atas {
	color: #333;
	padding: 10px;
	margin: 10px 0px 5px 0px;
	background:#BEFBBB;
}
#leftcolumn {
	display: inline;
	color: #333;
	margin: 10px;
	padding: 5px;
	width: 195px;
	float: left;
	background-color:#CCCCCC
}
#rightcolumn {
	float: right;
	color: #333;
	margin:0;
	padding: 0px;
	width: 580px;
	display: inline;
	position: relative;
	padding:10px;
}
#footer {
	clear: both;
	color: #333;
	background: #BEFBBB;
	margin: 0px 0px 10px 0px;
	padding: 10px;
}
.clear {
	clear: both;
	background: none;
}
</style>

Hasilnya bisa dilihat pada gambar berikut :

contoh layout dengan css

Lihat Demo

Semoga bermanfaat

Zainal Hakim

Baca juga :

** Bebas disunting dengan menyebutkan sumber **

Komentar

Halaman Lainya

Kiriman terbaru