Mengatur Tata Letak Website Dengan CSS

Layout Website

Tata letak atau layout website sering kali dibagi menjadi bagian header, menu, konten, dan footer.

Ada banyak pilihan untuk desain layout yang berbeda. Namun, struktur di atas merupakan salah satu yang paling umum, pada bagian ini kita akan melihat lebih detil.

Header

Header biasanya terletak di bagian atas situs web (atau tepat di bawah menu navigasi atas). Sering kali berisi logo atau nama situs web:

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<div class="header">
<h1>Judul</h1>
</div>

</body></html>

Jalankan Contoh

Navigation Bar

Navigation Bar berisi daftar link atau menu untuk membantu pengunjung menjelajahi website :

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
</style>
</head>
<body>

<div class="header">
<h1>Judul</h1>
</div>

<div class="topnav">
<a href="#">Tautan</a>
<a href="#">Tautan</a>
<a href="#">Tautan</a>
</div>

</body></html>

Jalankan Contoh

Konten

Layout di bagian ini, adalah bagian inti dari suatu website, yang berisi konten website sebenarnya. Isi bagian ini seringkali bergantung pada jenis pengguna website itu sendiri. Layout yang paling umum untuk konten adalah salah satu atau beberapa dari bagian berikut ini:

1-kolom (sering digunakan untuk browser seluler)
2-kolom (sering digunakan untuk tablet dan laptop)
Layout 3 kolom (hanya digunakan untuk desktop)

Pada contoh kali ini akan dibuat layout 3 kolom dan akan diubah secara responsive menjadi layout 1 kolom pada layar yang lebih kecil:

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 15px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
<h1>Judul</h1>
<p>Ubah ukuran jendela browser untuk melihat efek responsif.</p>
</div>

<div class="topnav">
<a href="#">Tautan</a>
<a href="#">Tautan</a>
<a href="#">Tautan</a>
</div>

<div class="row">
<div class="column">
<h2>Kolom</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>

<div class="column">
<h2>Kolom</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>

<div class="column">
<h2>Kolom</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>
</div>

</body></html>

Jalankan Contoh

Unequal Columns

Konten utama adalah bagian terbesar dan terpenting dari website.

Umumnya dengan lebar kolom unequal, sehingga sebagian besar ruang dicadangkan untuk konten utama. Konten samping (jika ada) sering digunakan sebagai navigasi alternatif atau untuk menentukan informasi yang relevan dengan konten utama. Lebar bagian konten disesuaikan dengan kebutuhan, dan lebar total tetap harus mencapai 100%:

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
<h1>Judul</h1>
<p>Ubah ukuran jendela browser untuk melihat efek responsif.</p>
</div>

<div class="topnav">
<a href="#">Tautan</a>
<a href="#">Tautan</a>
<a href="#">Tautan</a>
</div>

<div class="row">
<div class="column side">
<h2>Samping</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite..</p>
</div>

<div class="column middle">
<h2>Konten Utama</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>

<div class="column side">
<h2>Samping</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite..</p>
</div>
</div>

</body></html>

Jalankan Contoh

Footer

Footer ditempatkan di bagian bawah halaman. Sering kali berisi informasi seperti hak cipta dan info kontak:

Contoh

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Style the header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Style the top navigation bar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Style the topnav links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

/* Style the footer */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}
</style>
</head>
<body>

<div class="header">
<h1>Judul</h1>
<p>Ubah ukuran jendela browser untuk melihat efek responsif.</p>
</div>

<div class="topnav">
<a href="#">Tautan</a>
<a href="#">Tautan</a>
<a href="#">Tautan</a>
</div>

<div class="row">
<div class="column side">
<h2>Samping</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite..</p>
</div>

<div class="column middle">
<h2>Konten Utama</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
</div>

<div class="column side">
<h2>Samping</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elite..</p>
</div>
</div>

<div class="footer">
<p>Footer</p>
</div>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Mengatur Elemen Form Dengan CSS
Semua Tutorial CSS : Tutorial CSS