Bagaimana cara mengatur Layout halaman CSS

telah dibahas mengenai layout halaman web, akan tetapi di tutorial kali ini kita akan membahas desain layout yang responsif menggunakan CSS.


Sebuah situs web sering dibagi menjadi header, menu, konten dan footer. Berikut merupakan contoh layout halaman web yang sederhana:

Bagaimana cara mengatur Layout halaman CSS

Struktur di atas, adalah salah satu yang paling umum digunakan.


Header

Sebuah header biasanya terletak di bagian atas website, tapi ada juga yang penempatan header berada tepat di bawah menu navigasi bagian atas. Dalam header, sering mengandung logo atau nama website.

Contoh

body {
  margin: 0;
}

/* Menerapkan style header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
<!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">
</head>
<body>

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

</body>
</html>

Hasilnya:

Bagaimana cara mengatur Layout halaman CSS



Navigasi Bar

Menu atau navigasi merupakan tempat atau wadah untuk link yang memberikan akses ke halaman-halaman lain dalam suatu web.

Contoh

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

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

/* Menerapkan style navigation bar atas */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Menerapkan style pada link navigation bar atas */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Mengubah warna navigasi saat disentuh */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
<!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">
</head>
<body>

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

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

</body>
</html>

Hasilnya:

Bagaimana cara mengatur Layout halaman CSS



Konten

Tata letak di bagian ini, sering tergantung pada target pengguna. Tata letak yang paling umum adalah satu (atau menggabungkan semua konten) sebagai berikut:

  • 1-kolom (sering digunakan untuk mobile browser)
  • 2-kolom (sering digunakan untuk tablet dan laptop)
  • Tata letak 3-kolom (hanya digunakan untuk desktop)


Bagaimana cara mengatur Layout halaman CSS



Pada contoh ini kita akan membuat layout 3-kolom, dan mengubahnya ke layout 1-kolom pada layar yang lebih kecil.

Contoh

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

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

/* Menerapkan style navigation bar atas */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Menerapkan style pada link navigation bar atas */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Mengubah warna navigasi saat disentuh */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Mengatur 3 kolom yang sama posisinya bersebelahan satu sama lain */
.kolom {
  float: left;
  width: 33.33%;
  padding: 15px;
}

/* Menghapus float setelah kolom */
.baris:after {
  content: "";
  display: table;
  clear: both;
}

/* Tata letak responsif - membuat ketiga kolom saling bertumpuk, bukan bersebelahan */
@media screen and (max-width:600px) {
  .kolom {
    width: 100%;
  }
}
<!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">
</head>
<body>

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

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

<div class="baris">
  <div class="kolom">
    <h2>Kolom</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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="kolom">
    <h2>Kolom</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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="kolom">
    <h2>Kolom</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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>

Hasilnya:

Bagaimana cara mengatur Layout halaman CSS


Tips: Untuk membuat layout 2-kolom, ubah lebar menjadi 50%. Untuk membuat layout 4-kolom, gunakan 25%, dll.


Tips: Cara yang lebih modern membuat layout kolom adalah dengan menggunakan CSS flexbox. Namun, tidak didukung di Internet Explorer 10 dan versi sebelumnya. Jika kita memerlukan dukungan IE6-10, gunakan float (seperti yang ditunjukkan di atas). 



Footer

footer ditempatkan di bagian bawah halaman website. Pada bagian footer ini sering berisi informasi seperti hak cipta dan info kontak.

Contoh

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

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

/* Menerapkan style navigation bar atas */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Menerapkan style pada link navigation bar atas */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Mengubah warna navigasi saat disentuh */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Mengatur 3 kolom yang sama posisinya bersebelahan satu sama lain */
.kolom {
  float: left;
  padding: 10px;
}

/* Kolom kiri dan kanan */
.kolom.samping {
  width: 25%;
}

/* Kolom tengah */
.kolom.tengah {
  width: 50%;
}

/* Menghapus float setelah kolom */
.baris:after {
  content: "";
  display: table;
  clear: both;
}

/* Tata letak responsif - membuat tiga kolom saling bertumpuk, bukan bersebelahan */
@media screen and (max-width: 600px) {
  .kolom.samping, .kolom.tengah {
    width: 100%;
  }
}

/* Menerapkan style footer */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}
<!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">
</head>
<body>

<div class="header">
  <h1>Header</h1>
  <p>Ubah ukuran browser untuk melihan efek responsif.</p>
</div>

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

<div class="baris">
  <div class="kolom samping">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
  
  <div class="kolom tengah">
    <h2>Main Content</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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 elit. 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="kolom samping">
    <h2>Side</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
</div>

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

</body>
</html>

Hasilnya:

Bagaimana cara mengatur Layout halaman CSS



Tata Letak Halaman Web yang Responsif 

Dengan menggunakan beberapa kode CSS di atas, kita akan membuat tata letak situs web responsif, yang bervariasi antara dua kolom dan kolom yang memiliki lebar penuh (full-width) tergantung pada lebar layar.