Layout Website CSS

Sebuah situs web sering dibagi menjadi header, menu, konten dan footer:

Ada banyak sekali desain layout yang berbeda untuk dipilih. Namun, struktur di atas adalah salah satu yang paling umum, dan kita akan melihatnya lebih dekat dalam tutorial ini.

Header

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

Contoh

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

Hasil

Navigasi Bar

Navigasi bar berisi daftar link untuk membantu pengunjung menavigasi situs web.

Contoh

/* Container navbar */
.topnav {
  overflow: hidden;
  background-color: #333;
}

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

/* Link - mengganti warna pada hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

Hasil

Link Link Link

Konten

Layout di bagian ini, seringkali tergantung pada target pengguna. Layout yang paling umum adalah salah satu (atau menggabungkannya) dari berikut ini:

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

Kita akan membuat layout 3 kolom, dan mengubahnya menjadi layout 1 kolom di layar yang lebih kecil.

Contoh

/* Membuat tiga kolom yang sama */
.column {
  float: left;
  width: 33.33%;
}

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

/* Layout responsif */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Hasil

Link Link Link

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

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

Tips: Cara yang lebih modern untuk membuat layout kolom, adalah dengan menggunakan CSS Flexbox. Namun, flexbox tidak didukung di Internet Explorer 10 dan versi sebelumnya.

Kolom Unequal

Konten utama adalah bagian terbesar dan terpenting dari sebuah situs.

Ini umum terjadi dengan lebar kolom yang tidak sama (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. Ubah lebar sesuka Anda, hanya perlu diingat bahwa totalnya harus mencapai 100%.

Contoh

.column {
  float: left;
}

/* Kolom kanan dan kiri */
.column.side {
  width: 25%;
}

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

/* Responsive layout */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

Hasil

Link Link Link

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit..

Konten Utama

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit..

Footer

Footer ditempatkan di bagian bawah halaman. Biasanya berisi informasi seperti hak cipta dan info kontak.

Contoh

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

Hasil

Link Link Link

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit..

Konten Utama

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit..

Sumber referensi: w3schools

Ian Zune

Cari Blog Ini