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" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://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 **

Artikel Lainnya

  • Mengatur tingkat transparan objek dengan css
    Berikut ini adalah script css yang digunakan untuk mengatur tingkat transparan objek. Misal anda punya sebuah tulisan atau kotak header atau footer yang ingin ditampilkan secara transparan maka anda bisa gunakan cara berikut.
  • Menampilkan kiriman twitter dengan php
    Twitter adalah salah satu media sosial terbesar yang sering digunakan oleh pengguna internet. Twitter menyediakan banyak fasilitas yang bisa digunakan untuk berbagai keperluan dalam bentuk widget atau plugin yang bisa dengan mudah ditempel pada halaman web termasuk untuk menampilkan status yang sudah dikirim user tertentu. Karena sifatnya fasilitas umum dengan fitur yang sama maka tentunya kita tidak bisa mengubah format tampilanya sesuai keperluan kita. Tapi ini bisa kita lakukan dengan menggunakan php. SIlahkan baca atikel berikut.
  • Memformat angka dengan php
    Nilai yang dihasilkan dalam perhitungan di php bisa kita format sesuai keperluan dengan menggunakan fungsi number_format(). Berikut contoh penggunaanya.
  • Berpindah halaman otomatis dengan durasi tertentu
    Berpindah halaman otomatis dengan durasi tertentu kadang kita lakukan pada kasus pembuatan halaman intro atau menampilkan halaman dengan durasi waktu tertentu kemudian langsung membuka halaman lainya.
  • Cara menyimpan data kedalam database mysql dengan php
    Berikut ini contoh kode php singkat, mudah dan serderhana untuk menyimpan data kedalam mysql database.

Kiriman terbaru