Belajar CSS Part 31 - Layout Halaman Web Responsif

CSS Layout Halaman Web

Pada tutorial HTML sebelumnya 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:

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:

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:

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)

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:

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:

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.

Contoh

* {
  box-sizing: border-box;
}

body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}

.header h1 {
  font-size: 50px;
}

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

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

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

/* Buat dua kolom berbeda yang mengapung di sebelah satu sama lain
 */
/* Kolom kiri */
.kolomkiri {   
  float: left;
  width: 75%;
}

/* Kolom kanan */
.kolomkanan {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}

/* Gambar */
.gambar {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Menambahkan efek gambar pada artikel */
.kartunama {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}

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

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* Responsive layout - Saat lebar layar kurang dari 800px, buat dua kolom bertumpuk satu sama lain alih-alih bersebelahan */
@media screen and (max-width: 800px) {
  .kolomkiri, .kolomkanan {   
    width: 100%;
    padding: 0;
  }
}

/* Responsive layout - Saat lebar layar kurang dari 400px, buat navigasi  link saling bertumpukan, bukan bersebelahan */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div class="header">
  <h1>Selamat Datang di Website Saya</h1>
</div>

<div class="topnav">
  <a href="#">Home</a>
  <a href="#">Contact</a>
  <a href="#">Profil</a>
  <a href="#" style="float:right">About Us</a>
</div>

<div class="row">
  <div class="kolomkiri">
    <div class="kartunama">
      <h2>JUDUL</h2>
      <h5>Deskripsi judul, 31 Desember 2018</h5>
      <div class="gambar" style="height:200px;">Gambar</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
    <div class="kartunama">
      <h2>JUDUL</h2>
      <h5>Deskripsi judul, 30 Desember 2018</h5>
      <div class="gambar" style="height:200px;">Gambar</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
  <div class="kolomkanan">
    <div class="kartunama">
      <h2>About Me</h2>
      <div class="gambar" style="height:100px;">Gambar</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div class="kartunama">
      <h3>Popular Post</h3>
      <div class="gambar"><p>Gambar</p></div>
      <div class="gambar"><p>Gambar</p></div>
      <div class="gambar"><p>Gambar</p></div>
    </div>
    <div class="kartunama">
      <h3>Follow Me</h3>
      <p>Lorem ipsum dolor sit amet,</p>
    </div>
  </div>
</div>

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

</body>
</html>

Hasilnya: