Modul 5: More About Styling
- More about Selector: Selector Basic - Bagian 1
- Selector Basic - Bagian 2
- Combinators - Bagian 1
- Combinators - Bagian 2
- Pseudo Selector
- Formatting Text (Text and Font Styling)
- Font Styling - Bagian 1
- Font Styling - Bagian 2
- Text Styling - Bagian 1
- Text Styling - Bagian 2
- Menerapkan Font Styling pada Halaman Profil
- Menggunakan Font dari Google Font
- Menetapkan Ukuran, Ketebalan, dan Perataan Teks pada Halaman Profil
- Color
- Menetapkan Nilai Warna
- Text dan Background Color
- Box Model
- Box Element
- Box Dimensions
- Border
- Padding
- Margin
- Centering Content
- Display Roles
- Box Shadow
- Rounded Corner
- Menerapkan Box Model pada Halaman Profil
- Menetapkan ukuran pada gambar
- Menerapkan Card Style pada Elemen Article
- Menerapkan Jumbotron dan Navigasi pada Header
- Menyesuaikan Padding dan Margin pada Body dan Elemen Main
- Positioning
- Perbedaan Static Flow dan Non-Static Flow
- Normal Flow
- Relative Positioning
- Absolute Positioning
- Fixed Positioning
- Floating
- Permasalahan Penerapan Float
- Clear Property
- Teknik Overflow
- Menerapkan Positioning dan Float pada Halaman Profil
- Menetapkan Float pada Content dan Aside
- Menambahkan meta tag viewport
- Media Query
- Membuat Sticky Navigation
Padding merupakan jarak antara area konten dan border. Padding banyak diterapkan pada elemen jika elemen tersebut menerapkan warna latar atau pun border. Padding memberikan sedikit ruang sehingga konten di dalam elemen dapat lebih nyaman untuk ditampilkan. Contohnya:
<!doctype html>
<html lang="en">
<head>
<style>
p {
border: 4px solid #00a2c6;
width: 275px;
}
p.example {
padding: 10px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur beatae commodi dignissimos eaque fugiat inventore maiores neque nisi sint. A dolore eaque fuga, iste minus porro provident sit tempore ullam.</p>
<p class="example">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet assumenda blanditiis cum dignissimos enim esse excepturi illum inventore maiores minima, nemo nisi obcaecati officia pariatur qui quibusdam sed. Ab, dolorum?</p>
</body>
</html>Jika berkas di atas dijalankan pada browser, maka akan tampak seperti ini:
Seperti yang kita lihat, paragraf kedua jauh lebih nyaman dibaca karena terdapat jarak antara teks dan border dari kotak. Kotak pun menjadi sedikit lebar karena adanya padding.
Pixel merupakan satuan yang sering digunakan dalam menetapkan nilai properti ini (meskipun kita bisa juga menggunakan persentase atau ems). Jika menetapkan menggunakan persentase, maka nilai akan menjadi relatif pada elemen induk atau jendela browser (jika tidak memiliki induk elemen).
Kita dapat menentukan nilai padding yang berbeda untuk masing-masing sisi elemen dengan menggunakan:
padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding-left: 15px;
Atau dengan menggunakan shorthand seperti berikut:
padding: 10px 15px 10px 15px;
Sehingga padding akan diterapkan seperti gambar di bawah ini.
Seperti halnya padding, margin merupakan ruang atau jarak pada sebuah elemen. Namun jarak tersebut terletak di luar dari konten dan border elemen. Margin digunakan untuk menjaga elemen agar tidak bertabrakan satu sama lain atau dari tepi jendela browser.
Sebelum menerapkan margin
Setelah menerapkan margin 20px.
Margin ini bersifat collapsed, yang artinya dapat menumpuk jika terdapat dua margin yang saling bertumpukan. Anda bisa melihat pada margin bawah dan margin atas pada kedua elemen tersebut. Hal itu menjelaskan mengapa jarak vertikal antar elemen tersebut tidak 40px melainkan 20px. Jika terjadi pertumpukan margin, maka nilai yang paling besar yang akan diterapkan.
Kita dapat menentukan nilai margin yang berbeda untuk masing-masing sisi elemen dengan menggunakan:
margin-top: 10px; margin-right: 15px; margin-bottom: 20px; margin-left: 25px;
Tapi kita juga dapat menggunakan shorthand untuk menetapkan keempat nilai tersebut dalam satu properti
margin: 10px 15px 20px 25px;
Kita juga bisa menggunakan dua nilai saja untuk menentukan nilai margin vertikal dan horizontal.
margin: 10px 15px; /* top dan bottom bernilai 10px, left dan right bernilai 15px */
Bagaimana meletakkan sebuah kotak tepat pada tengah sebuah halaman atau di dalam elemen induknya? Aturlah margin kanan dan kiri dengan nilai auto. Lebih lanjut, kita juga harus menentukan lebar dari kotak tersebut (menggunakan properti width). Jika tidak, kotak akan mengambil lebar penuh pada halaman atau induk elemen.
Setelah kita menentukan lebar kotak dan mengatur margin kiri dan kanan menjadi auto, maka secara otomatis browser akan memberi jarak yang sama di setiap sisi horizontal kotak, sehingga membuat kotak berada di tengah halaman.
Berikut contohnya:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin</title>
<style>
.center {
margin: 0 auto;
}
.box {
width: 50%;
border: 4px solid darkblue;
padding: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur autem commodi dignissimos dolores ea, eaque,
earum esse harum illo in incidunt molestias nam non qui recusandae sunt ullam veniam vero!</p>
</div>
<div class="box center">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi ea, id. Aliquid consectetur dolorum
exercitationem ipsam, necessitatibus nostrum pariatur sunt! Accusantium architecto at dolorem itaque quisquam
quod soluta sunt voluptatum.</p>
</div>
</body>
</html>Jika berkas tersebut kita buka pada browser, maka akan tampak seperti berikut:
Kita pernah membahas mengenai inline dan block pada modul HTML sebelumnya. Kita telah paham bahwa standarnya, tiap elemen HTML memiliki dua tipe yaitu block dan inline. Untuk lebih jelasnya berikut sifat - sifat yang ada pada elemen block dan juga inline:
inline element:
- Elemen HTML yang secara default tidak menambahkan baris baru ketika dibuat.
- Nilai lebar dan tinggi elemen inline sebesar konten di dalamnya, dan tidak dapat diubah.
Margin dan padding hanya mempengaruhi elemen secara horizontal, tidak vertikal.
block element:
- Elemen HTML secara default menambahkan baris baru ketika dibuat.
- Jika tidak diatur lebarnya, lebar dari elemen block akan memenuhi lebari dari browser atau elemen yang menaunginya.
- Kita dapat mengatur dimensi dari elemen block.
Di dalam elemen block, kita dapat menyimpan tag elemen HTML lainnya.
Dengan menggunakan properti display, kita dapat mengubah sebuah elemen inline menjadi block, begitupun sebaliknya. Dalam hal ini, properti ini juga dapat digunakan untuk menyembunyikan elemen yang ditampilkan.
Nilai dari properti ini dapat berupa:
- inline : digunakan untuk mengubah elemen block berperilaku seperti elemen inline.
- block : digunakan untuk mengubah elemen inline berperilaku seperti elemen block.
- inline-block : membuat elemen block tidak menambahkan baris baru ketika dibuat, namun tetap mempertahankan sifat lain dari elemen block.
none : digunakan untuk menyembunyikan elemen dari halaman.
Properti ini banyak sekali digunakan dalam kasus dalam pembuatan navigasi. Biasanya navigasi dibuat menggunakan elemen list yang memiliki sifat block, sehingga item list selalu ditampilkan dalam baris baru. Dengan menggunakan properti display, kita dapat mengubah perilaku elemen list tersebut dengan menerapkan inline, sehingga item list dapat ditampilkan secara horizontal.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Display</title>
<style>
li {
display: inline;
margin-left: 5px;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Product</li>
<li>About</li>
<li>Contact</li>
</ul>
</body>
</html>Jika berkas tersebut dibuka pada browser, maka akan tampak seperti berikut:
Pada materi formatting text kita sudah belajar cara menambahkan drop shadow pada teks. Pada CSS3 kita juga dapat menambahkan drop shadow di sekitar kotak elemen (tidak termasuk margin) dengan menggunakan properti box-shadow.
Nilai dan cara kerja dari properti box-shadow mirip seperti text-shadow, yaitu nilainya menentukan jarak vertikal dan horizontal, tingkat keburaman, dan warna pada bayangan. Pada box shadow, kita juga dapat menentukan tingkat sebaran (spread) bayangan. Semakin besar nilai, bayangan yang nampak akan semakin luas. Berikut contoh penerapan box shadow pada CSS:
box-shadow: 6px 6px 5px 10px #666666;
Jika rules tersebut diterapkan pada box, maka akan tampak seperti ini:
Berikut penjelasan tiap-tiap nilai dari propertinya:
- Nilai pertama : menunjukkan seberapa jauh ke kiri atau kanan (horizontal) bayangan harus ditampakkan.
- Nilai kedua : menunjukkan jarak ke atas atau ke bawah (vertical) bayangan harus ditampakkan.
- Nilai Ketiga (opsional) : menentukan tingkat keburaman yang harus diterapkan pada bayangan.
- Nilai Keempat (opsional) : menentukan tingkat sebaran (spread) bayangan. Semakin besar nilai yang ditentukan, bayangan yang nampak pun semakin luas.
Nilai Kelima : menentukan warna yang digunakan pada bayangan.
CSS3 memperkenalkan kemampuan untuk membuat rounded corner atau sudut bundar pada box dengan menggunakan properti border-radius. Nilai dari properti ini merupakan tingkat lengkungan border dalam pixel.
.rounded {
border-radius: 10px;
}Jika diterapkan, pinggiran border akan tampak seperti ini:
Kita bisa menetapkan nilai pada individu siku kotak dengan menggunakan properti yang terpisah, seperti ini:
.rounded {
border-top-right-radius: 5px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 5px;
border-top-left-radius: 10px;
}Atau kita dapat menggunakan shorthand sehingga dapat menetapkan keempat nilainya dalam satu properti.
.rounded {
border-radius: 10px 5px 10px 5px;
}Maka tiap sisi dari border memiliki ketajaman yang berbeda seperti ini.
Pada latihan sebelumnya, kita sudah menerapkan font yang didapatkan dari Google Font dengan properti font-family dan mengubah warna font dengan menggunakan properti color. Nah setelah mempelajari komponen box seperti padding, border, dan margin saatnya kita terapkan pada proyek yang sudah kita buat sebelumnya. Mulai dari menetapkan ukuran gambar, membuat efek gaya kartu, dan membuat jumbotron.
Hingga pada akhir latihan ini kita dapat mempercantik tampilan website profil tampak seperti ini:
Sudah siap? Silakan buka kembali proyeknya dengan text editor yang Anda miliki.
Sekarang saatnya kita mulai terapkan apa yang baru kita pelajari. Langkah pertama mari kita ubah dimensi dari gambar yang kita tampilkan. Pada berkas style.css, buat rule baru untuk selector .featured-images dengan properti dan nilai sebagai berikut:
.featured-image {
width: 100%;
max-height: 300px;
}Kemudian terapkan rule tersebut pada seluruh elemen gambar kecuali gambar logo kota Bandung yang terdapat di dalam elemen <aside>. Untuk menerapkannya kita tuliskan class atribut dengan nilai featured-image.
<img src="assets/image/history.jpg" class="featured-image" alt="sejarah"> ... <img src="assets/image/geografis.jpg" class="featured-image" alt="geografis"> ... <img src="assets/image/farm-house.jpg" class="featured-image" alt="farm house"> ... <img src="assets/image/bosscha.jpg" class="featured-image" alt="bosscha">
Setelah menerapkannya maka tampilan gambar akan menjadi seperti ini:
Gambar yang ditampilkan jadi memenuhi lebar jendela browser. Namun karena kita menetapkan juga properti max-height, gambar yang ditampilkan menjadi tidak proporsional. Solusinya kita tambahkan properti object-fit: cover; dan object-position: center; pada .featured-image selector.
.featured-image {
width: 100%;
max-height: 300px;
object-fit: cover;
object-position: center;
}Kedua properti tersebut membuat gambar yang ditampilkan dapat menyesuaikan lebar dan panjang dengan mempertahankan kualitas rasio aslinya. Tetapi untuk menyesuaikannya terdapat area gambar yang terpotong atau tidak ditampilkan, tetapi tampilan gambar akan tetap proporsional.
Selanjutnya kita atur juga ukuran gambar logo kota Bandung pada elemen <aside>. Agar logo tampak tidak terlalu besar kita atur properti width dengan nilai 200px. Silakan buat rules baru dengan selector .profile img, kemudian tuliskan properti width dengan nilainya.
.profile img {
width: 200px;
}Sehingga sekarang logo akan nampak lebih kecil.
Selanjutnya kita atur tampilan pada tiap elemen <article>, buat elemen tersebut bergaya card effect dengan menerapkan properti box-shadow dan border-radius sehingga hasilnya akan tampak seperti ini:
Pertama kita buat rule baru dengan selector .card, kemudian terapkan properti dan nilainya sebagai berikut:
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
}Selanjutnya terapkan rule tersebut pada seluruh elemen <article> yang ada. Untuk menerapkannya, tambahkan atribut class dengan nilai card.
<article id="sejarah" class="card">
...
<article id="geografis" class="card">
...
<article id="wisata" class="card">
...
<aside>
<article class="profile card">
....Sekarang tiap sisi elemen <article> akan tampak dikelilingi oleh drop shadow dan memiliki ujung yang bulat pada tiap sisinya.
Jika dirasa drop shadow tak terlalu jelas, kita bisa mengubah nilainya. Agar mudah dalam menentukan nilai drop shadow yang kita inginkan, kita bisa gunakan tools yang tersedia secara online pada tautan berikut: https://www.cssmatic.com/box-shadow.
Selanjutnya kita perbaiki tepian konten pada card karena tampak terlalu sempit dari sisi cardnya. Alhasil, konten agak sulit dibaca. Kita bisa mengaturnya dengan properti margin dan padding. Silakan tambahkan properti dan nilai berikut pada rule .card:
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
padding: 20px;
margin-top: 20px;
}Sekarang konten di dalam card lebih proporsional dan mudah dibaca, bukan?
Selanjutnya kita akan mengatur header dengan membuat efek jumbotron dan memperbaiki tampilan navigasi menjadi nampak seperti ini:
Sebagai angkah awal, yuk kita buat rule baru dengan selector .jumbotron lalu terapkan properti dan nilainya seperti ini:
.jumbotron {
font-size: 20px;
padding: 60px;
background-color: #00c8eb;
text-align: center;
color: white;
}Lalu pada berkas HTML, letakkan elemen <h1> dan <p> yang terdapat pada <header> dengan menggunakan <div> yang diberikan atribut class jumbotron. Sehingga struktur HTML pada elemen <header> tampak seperti ini:
<header>
<div class="jumbotron">
<h1>Bandung</h1>
<p>Kota metropolitan terbesar di Provinsi Jawa Barat, sekaligus menjadi ibu kota provinsi tersebut.</p>
</div>
<nav>
<ul>
<li><a href="#sejarah">Sejarah</a></li>
<li><a href="#geografis">Geografis</a></li>
<li><a href="#wisata">Wisata</a></li>
</ul>
</nav>
</header>Sehingga sekarang header akan nampak dengan efek jumbotron.
Lanjut, kita akan memperbaiki tampilan navigasi agar terlihat cocok dengan header yang ditampilkan. Seperti biasa, buatlah rule baru dengan selector nav li. Selector tersebut akan mengatur elemen <li> yang menjadi turunan dari elemen <nav>, berikan properti dan nilai berikut pada selector tersebut:
nav li {
display: inline;
list-style-type: none;
margin-right: 20px;
}Nilai inline pada properti display akan membuat elemen <li> menerapkan sifat inline, sehingga elemen akan ditampilkan tanpa membuat baris baru. Dan properti list-style-type dengan nilai none akan menghilangkan tanda titik yang dihasilkan tiap item pada list. Dengan begitu navigasi akan nampak seperti ini:
Selanjutnya beri background-color dan ubah warna teks pada navigasi agar nampak sesuai dengan header. Tuliskan rule baru dengan selector nav kemudian atur background-color dan padding dengan nilai berikut:
nav {
background-color: #00a2c6;
padding: 5px;
}Kemudian untuk mengatur warna teks pada navigasi, kita tambahkan properti color pada selector nav a yang sudah kita buat pada latihan sebelumnya.
nav a {
font-size: 18px;
font-weight: 400;
text-decoration: none;
color: white;
}Dengan begitu navigasi akan terlihat sesuai dengan header yang ditampilkan.
Pada langkah ini, website yang kita bangun sudah mulai tampak menarik bukan?
Terakhir kita akan menyesuaikan margin dan padding yang ditampilkan pada body dan elemen <main>. Sehingga akan tampak seperti ini:
Pertama kita hilangkan nilai margin dan padding standar browser dengan menuliskan properti margin dan padding yang diberi nilai 0 pada body selector.
body {
font-family: 'Quicksand', sans-serif;
margin: 0;
padding: 0;
}Dengan begitu layout yang ditampilkan akan memenuhi seluruh lebar dan tinggi dari jendela browser.
Tetapi konten yang terdapat di dalam elemen <main> perlu sedikit jarak agar konten yang ditampilkan sedikit nyaman untuk dilihat. Kita dapat atur jarak tersebut dengan menambahkan padding pada selector main. Silakan tuliskan rule baru dengan selector main dan beri nilai 20px pada properti padding.
main {
padding: 20px;
}Nah sekarang website pun jadi lebih nyaman dilihat.
Pada latihan selanjutnya kita akan memindahkan elemen aside sehingga berada di samping elemen content. Untuk melakukannya kita harus mengenal dulu apa itu positioning dan floating. Sampai jumpa di materi selanjutnya ya!
Kita sudah mengetahui cara mengubah posisi dari sebuah elemen dengan menggunakan margin. Namun ketika melakukannya, posisi elemen lain di sekitarnya akan terpengaruh. Lantas bagaimana jika kita ingin memindahkan tanpa mengganggu posisi elemen lainnya? Solusinya kita perlu mengubah positioning schema dengan menggunakan properti position dalam mengontrol letak elemen tersebut. Berikut nilai dari properti position yang ada pada CSS:
Normal Flow / Static Flow : Merupakan default behaviour yang dimiliki elemen, di mana setiap elemen block akan ditampilkan dalam baris baru ketika dibuat. Sehingga setiap elemen block selalu muncul di bawah dari elemen block sebelumnya. Bahkan jika masih terdapat ruang kosong pada samping elemennya, mereka tidak akan nampak bersebelahan.
Relative Positioning : Membuat elemen bisa berpindah posisi ke atas, kanan, bawah, maupun kiri dari posisi semula atau posisi seharusnya elemen tersebut berada. Perpindahan posisi ini tidak akan berpengaruh terhadap posisi elemen di sekitarnya karena ketika menggunakan relative positioning, elemen tersebut akan dipindahkan dari normal flow.
Absolute Positioning : Sama seperti relative, elemen akan dipindahkan keluar dari normal flow sehingga kita dapat memindahkan posisi elemen ke atas, kanan, bawah, maupun kiri secara leluasa tanpa mengganggu elemen di sekitarnya. Namun posisinya relatif pada jendela browser dan induk elemen selama induk elemen juga berada di luar dari normal flow.
- Fixed Positioning : Merupakan absolute position namun posisinya selalu relatif pada jendela browser. Bahkan ketika pengguna scrolling pun, posisinya di layar akan tetap tak berubah.
Sebelum kita membahas satu persatu skema tersebut, mungkin kita perlu memahami lebih detail lagi apa sebenarnya normal flow atau biasa disebut “static flow” itu, dan mengapa untuk memindahkan posisi elemen kita perlu mengeluarkannya dari static flow.
Sebenarnya CSS memiliki dua buah flow yang bisa digunakan untuk menampilkan elemen, yakni static dan non-static. Agar mudah memahami perbedaan antar keduanya, kita gambarkan sebuah halaman website dengan tampilan tiga dimensi.
Bayangkan kita memiliki tiga buat elemen div berukuran 200px x 200px yang masing-masing memiliki warna yang berbeda.
.box {
width: 200px;
height: 200px;
}
.first {
background-color: #60d0a8;
}
.second {
background-color: #6495ed;
}
.third {
background-color: #ffa500;
}Karena kita tidak mengatur properti position dari ketiga elemen tersebut, maka tiap elemen akan ditampilkan dengan static flow seperti ini:
Ketika kita ingin mengubah letak kotak biru (kotak kedua) dengan menggunakan margin-top: 20px; tentu akan berpengaruh pada posisi elemen di bawahnya.
.second {
background-color: #6495ed;
margin-top: 20px;
}
Pada ilustrasi di atas kita bisa lihat bahwa kotak yang berwarna oranye ikut bergeser ke bawah. Berbeda ketika kita menerapkan properti position yang dapat membuat elemen keluar dari static flow. Contohnya kita menerapkan properti position dengan nilai relatif.
.second {
background-color: #6495ed;
position: relative;
}
Pada tampilan browser mungkin tidak terdapat perbedaan apapun setelah menerapkan nilai relative pada atribut position. Namun sebenarnya elemen yang menerapkannya akan diangkat dari luar static flow seperti yang ditampilkan pada ilustrasi 3D. Sehingga elemen tersebut dapat leluasa berpindah posisi tanpa mempengaruhi elemen yang berada pada static flow.
Untuk mengubah posisi elemen yang berada di non-static flow, kita dapat menggunakan properti top, right, bottom, maupun left.
.second {
background-color: #6495ed;
position: relative;
top: 30px;
left: 10px;
}
Perlu kita ingat ya, bahwa properti top, left, right dan bottom pada CSS hanya akan berpengaruh pada elemen yang menerapkan non-static flow (elemen yang menerapkan nilai relative, absolute, dan fixed pada properti position).
Dalam flow normal, setiap elemen block ditempatkan di bawah elemen sebelumnya. Karena ini merupakan cara standar browser memperlakukan elemen HTML, kita tidak perlu menetapkan nilai properti position ketika ingin membuat perilaku seperti ini tetapi secara sintaks perilaku ini ditetapkan dengan nilai static.
<!doctype html>
<html lang="en">
<head>
<style>
h1 {
background-color: #aaaaaa;
padding: 30px;
}
p {
width: 450px;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium iusto non optio vel voluptas? Assumenda
blanditiis consequatur doloribus porro quasi similique vero voluptatibus. Adipisci, tenetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi consectetur dolore eligendi, esse fuga
hic laboriosam nobis nostrum, nulla omnis optio pariatur repellendus reprehenderit saepe, sit soluta vel vero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut corporis deleniti doloremque et excepturi
expedita labore libero, placeat, quaerat rerum ullam vitae voluptate. Accusantium et explicabo qui tenetur unde.
Amet aperiam doloremque enim, expedita id illo minima porro quod.</p>
</body>
</html>Berkas di atas jika kita buka pada browser akan tampak seperti ini:
Pada contoh di atas kita tidak menetapkan nilai lebar pada elemen heading, tapi bisa kita lihat bahwa elemen heading tersebut mencakup seluruh lebar ruang yang ada pada jendela browser.
Sedangkan elemen paragraf kita atur lebarnya dengan nilai 450px sehingga elemen tersebut tidak mencakup seluruh lebar ruang yang ada. Elemen paragraf selanjutnya tetap ditampilkan di bawahnya meskipun masih terdapat ruang yang cukup disampingnya.
Hal tersebut merupakan contoh dari gambaran bagaimana flow normal bekerja.
Seperti yang kita ketahui sebelumnya, dengan menetapkan relative pada properti position, kita dapat melakukan perpindahan posisi elemen ke atas, kanan, bawah, maupun kiri. Perpindahan posisi yang dilakukan tidak akan berpengaruh terhadap posisi elemen di sekitarnya karena dengan relative positioning, elemen tersebut akan dipindahkan dari normal flow. Untuk menggunakan relative positioning kita tetapkan nilai relative pada properti position.
<!doctype html>
<html lang="en">
<head>
<style>
h1 {
background-color: #aaaaaa;
padding: 30px;
}
p {
width: 450px;
}
.relative {
position: relative;
top: 10px;
left: 100px;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium iusto non optio vel voluptas? Assumenda
blanditiis consequatur doloribus porro quasi similique vero voluptatibus. Adipisci, tenetur.</p>
<p class="relative">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi consectetur dolore eligendi, esse fuga hic laboriosam nobis nostrum, nulla omnis optio pariatur repellendus reprehenderit saepe, sit soluta vel vero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut corporis deleniti doloremque et excepturi expedita labore libero, placeat, quaerat rerum ullam vitae voluptate. Accusantium et explicabo qui tenetur unde. Amet aperiam doloremque enim, expedita id illo minima porro quod.</p>
</body>
</html>Berkas di atas jika kita buka melalui browser akan tampak seperti:
Pada contoh di atas, setelah menetapkan nilai position pada paragraf kedua, kita mengubah posisinya menjadi 10 pixel lebih bawah dan 100px lebih ke kanan dari posisi yang seharusnya. Perlu kita ingat bahwa perpindahan posisi mengacu pada posisi elemen seharusnya berada.
Ketika properti position diberikan nilai absolute, akan berperilaku sama dengan relative. Elemen akan dikeluarkan dari normal flow sehingga jika elemen dipindahkan posisinya tidak akan berpengaruh pada elemen lain di sekitarnya.
Namun yang membedakannya adalah elemen ini benar-benar tidak dianggap ada oleh elemen pada normal flow. Akibatnya, lokasi awal elemen yang diberikan nilai absolute akan ditempati oleh elemen di bawahnya.
<!doctype html>
<html lang="en">
<head>
<style>
h1 {
width: 250px;
}
p {
width: 450px;
}
.absolute {
position: absolute;
top: 0;
left: 500px;
}
</style>
</head>
<body>
<h1 class="absolute">Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium iusto non optio vel voluptas? Assumenda
blanditiis consequatur doloribus porro quasi similique vero voluptatibus. Adipisci, tenetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi consectetur dolore eligendi, esse fuga
hic laboriosam nobis nostrum, nulla omnis optio pariatur repellendus reprehenderit saepe, sit soluta vel vero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut corporis deleniti doloremque et excepturi
expedita labore libero, placeat, quaerat rerum ullam vitae voluptate. Accusantium et explicabo qui tenetur unde.
Amet aperiam doloremque enim, expedita id illo minima porro quod.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid asperiores blanditiis cumque eos ex
expedita facilis laborum maiores necessitatibus neque, officiis pariatur porro temporibus unde veritatis vitae?
Beatae dolores error ex fugiat molestias neque placeat quod ratione repellat veritatis! A culpa cumque, delectus
distinctio ducimus earum et ex quas quia quis tempore temporibus veritatis voluptates. Delectus doloremque mollitia
nobis?</p>
</body>
</html>Jika berkas di atas dibuka pada browser, maka akan tampak seperti ini:
Pada contoh di atas kita bisa lihat bahwa ketika elemen heading menerapkan properti position dengan nilai absolute maka elemen di bawahnya (paragraf) akan menempati posisi yang sebelumnya ditempati oleh elemen heading tersebut.
Dan perpindahan posisi ketika menggunakan absolute akan relatif pada jendela browser. Kita bisa lihat bahwa elemen heading bergeser 500px dari kiri. Tapi selain relatif terhadap jendela browser, nilai ini juga dapat relatif pada elemen yang menaunginya (elemen induk) selama elemen tersebut juga berada di luar normal flow. Namun jika tidak, elemen akan menghiraukan elemen induknya tersebut. Contohnya:
<!doctype html>
<html lang="en">
<head>
<style>
.parent {
width: 500px;
margin: 0 auto;
border: 4px solid black;
padding: 20px;
}
h1 {
width: 250px;
}
.absolute {
position: absolute;
top: 0;
left: 50px;
}
</style>
</head>
<body>
<div class="parent">
<h1 class="absolute">Lorem ipsum dolor sit amet.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium iusto non optio vel voluptas? Assumenda blanditiis consequatur doloribus porro quasi similique vero voluptatibus. Adipisci, tenetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi consectetur dolore eligendi, esse fuga hic laboriosam nobis nostrum, nulla omnis optio pariatur repellendus reprehenderit saepe, sit soluta vel vero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut corporis deleniti doloremque et excepturi expedita labore libero, placeat, quaerat rerum ullam vitae voluptate. Accusantium et explicabo qui tenetur unde. Amet aperiam doloremque enim, expedita id illo minima porro quod.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid asperiores blanditiis cumque eos ex expedita facilis laborum maiores necessitatibus neque, officiis pariatur porro temporibus unde veritatis vitae? Beatae dolores error ex fugiat molestias neque placeat quod ratione repellat veritatis! A culpa cumque, delectus distinctio ducimus earum et ex quas quia quis tempore temporibus veritatis voluptates. Delectus doloremque mollitianobis?</p>
</div>
</body>
</html>Jika kita buka berkas di atas pada browser maka akan tampak seperti ini:
Pada contoh kode di atas kita bisa lihat pada .parent kita tidak menetapkan properti position, sehingga elemen yang menerapkannya berada pada flow normal. Sehingga elemen heading akan menghiraukan elemen induknya.
Berbeda ketika .parent menerapkan properti position dengan nilai yang dapat mengeluarkannya dari normal flow, contohnya nilai relative.
position: relative;
Dengan begitu posisi elemen heading akan relatif terhadap .parent.
Fixed positioning merupakan absolute position namun posisinya selalu relatif pada jendela browser (meskipun diletakan di dalam induk elemen diluar dari flow normal), bahkan ketika pengguna melakukan scrolling posisinya akan tetap nampak pada posisinya di layar.
<!doctype html>
<html lang="en">
<head>
<style>
h3 {
padding: 10px;
background-color: #aaaaaa;
margin: 0;
width: 100%;
}
.fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
</head>
<body>
<h3 class="fixed">Lorem ipsum dolor sit amet.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium iusto non optio vel voluptas? Assumenda blanditiis consequatur doloribus porro quasi similique vero voluptatibus. Adipisci, tenetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus commodi consectetur dolore eligendi, esse fuga hic laboriosam nobis nostrum, nulla omnis optio pariatur repellendus reprehenderit saepe, sit soluta vel vero!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aut corporis deleniti doloremque et excepturi expedita labore libero, placeat, quaerat rerum ullam vitae voluptate. Accusantium et explicabo qui tenetur unde. Amet aperiam doloremque enim, expedita id illo minima porro quod.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid asperiores blanditiis cumque eos ex expedita facilis laborum maiores necessitatibus neque, officiis pariatur porro temporibus unde veritatis vitae? Beatae dolores error ex fugiat molestias neque placeat quod ratione repellat veritatis! A culpa cumque, delectus distinctio ducimus earum et ex quas quia quis tempore temporibus veritatis voluptates. Delectus doloremque mollitia nobis?</p>
</body>
</html>Berkas di atas jika kita buka pada browser maka akan tampak seperti ini:
Pada contoh di atas elemen heading diposisikan di sudut kiri atas jendela browser dengan properti:
top: 0; left: 0;
Ketika pengguna melakukan scrolling pada halaman, elemen heading tetap berada pada posisi yang sama dan paragraf yang ditampilkan nampak di belakang elemen heading tersebut.
Sederhananya properti float dapat membuat elemen berada pada sebelah kanan atau kiri. Saat diterapkan pada elemen inline, properti float juga memungkinkan elemen di sekitarnya mengelilingi elemen tersebut (wrap).
<!doctype html>
<html lang="en">
<head>
<style>
.container {
width: 800px;
border: 4px solid black;
padding: 10px;
}
img {
float: left;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://i.imgur.com/cs2BJzw.jpg" width="200px" alt="dicoding">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet asperiores commodi corporis doloribus eum ipsum obcaecati pariatur quam quo, voluptatum? A, assumenda atque delectus dolore nam natus neque quisquam repudiandae?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At deserunt illum inventore numquam officia recusandae, sit! Ab asperiores delectus dolor, eius est explicabo impedit ipsa ipsum itaque mollitia neque nihil nisi officia praesentium sint! Accusantium libero obcaecati provident qui? Error!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam debitis dolorem eaque eius eos error eum ex facilis fuga ipsa iste iusto mollitia nam natus necessitatibus praesentium quam qui quod, rerum sed sequi sint voluptates? Atque enim, ex facere fugiat ipsum mollitia quos sunt. At, autem commodi dolorum eos, est expedita, incidunt molestias nobis nostrum officia porro reiciendis saepe voluptatum.</p>
</div>
</body>
</html>Berkas di atas, jika kita buka melalui browser akan tampak seperti gambar ini:
Selain dalam membuat text wrapping. Float juga merupakan salah satu teknik dalam membuat layout website. Teknik ini masih banyak digunakan oleh developer karena sangat mudah dipahami dan tergolong mudah untuk multiple column seperti gambar berikut
Hal ini dapat dilakukan dengan mudah menggunakan properti float, karena nilai dari properti ini adalah left dan right. Nilai tersebut menunjukan posisi elemen harus diletakkan. Contoh penerapannya seperti berikut ini:
<!doctype html>
<html lang="en">
<head>
<style>
* {
/* digunakan untuk menghapus seluruh padding dan margin standar yang diberikan browser pada elemen */
margin: 0;
padding: 0;
/* Menggunakan border-box dalam perhitungan dimensi box-nya */
box-sizing: border-box;
}
.container {
width: 800px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
}
.left-content {
text-align: center;
line-height: 400px;
width: 30%;
height: 100%;
background-color: #00c7ed;
/* digunakan untuk memindahkan posisi elemen ke sisi kiri container */
float: left;
}
.right-content {
text-align: center;
line-height: 400px;
width: 70%;
height: 100%;
background-color: #60d0a8;
/* digunakan untuk memindahkan posisi elemen ke sisi kanan container */
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="left-content">
<h3>Left Content</h3>
</div>
<div class="right-content">
<h3>Right Content</h3>
</div>
</div>
</body>
</html>Berkas di atas jika kita buka pada browser akan tampak seperti berikut:
Dari contoh di atas, kita bisa melihat pada selector .left-content dan .right-content ditetapkan properti float dengan nilai left dan right, sehingga elemen tersebut dapat diposisikan secara bersebelahan.
Ketika menggunakan properti float jangan lupa menentukan ukuran lebar dari propertinya, karena nilai dari lebar menentukan seberapa banyak ruang yang dicakup oleh elemen. Pada contoh di atas kita menetapkan nilai 30% untuk konten kiri dan 70% untuk konten sebelah kanan.
Lantas jika nilainya hanya left dan right, bagaimana jika ada lebih dari dua kolom dalam menyusun layout? Hal tersebut sangat mudah dilakukan. Kita hanya perlu menetapkan nilai left pada ketiga kolomnya, lantas kolom akan tampil bersebelahan sesuai urutan penulisan elemen.
<!doctype html>
<html lang="en">
<head>
<style>
* {
/* digunakan untuk menghapus seluruh padding dan margin standar yang diberikan browser pada elemen */
margin: 0;
padding: 0;
/* Menggunakan border-box dalam perhitungan dimensi box-nya */
box-sizing: border-box;
}
.container {
width: 800px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
}
.left-content {
text-align: center;
line-height: 400px;
width: 33.3%;
height: 100%;
background-color: #00c7ed;
float: left;
}
.center-content {
text-align: center;
line-height: 400px;
width: 33.3%;
height: 100%;
background-color: #d0b541;
float: left;
}
.right-content {
text-align: center;
line-height: 400px;
width: 33.3%;
height: 100%;
background-color: #60d0a8;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="left-content">
<h3>Left Content</h3>
</div>
<div class="center-content">
<h3>Center Content</h3>
</div>
<div class="right-content">
<h3>Right Content</h3>
</div>
</div>
</body>
</html>Maka akan menghasilkan tampilan seperti gambar berikut:
Properti float terlihat sangat mudah untuk digunakan, baik dalam text wrapping maupun dalam penyusunan layout. Tetapi bukan berarti ketika menggunakan properti ini, tiada efek samping atau masalah yang ditimbulkan. Apa itu?
Jika sebuah elemen induk hanya memiliki satu elemen dengan menerapkan properti float, ia akan memiliki nilai tinggi 0px. Contohnya seperti berikut:
<!doctype html>
<html lang="en">
<head>
<style>
.container {
width: 800px;
border: 4px solid black;
}
img {
float: left;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://i.imgur.com/cs2BJzw.jpg" width="200px" alt="dicoding">
</div>
</body>
</html>Jika dijalankan pada browser akan menghasilkan tampilan seperti:
Pada contoh tersebut kita bisa melihat bahwa elemen gambar berada di dalam sebuah container div. Tetapi container tersebut tidak memiliki tinggi senilai gambar yang ditampilkan. Mengapa bisa demikian? Untuk lebih jelasnya kita coba tambahkan paragraf di dalam container tersebut tanpa menggunakan properti float.
<!doctype html>
<html lang="en">
<head>
<style>
.container {
width: 800px;
border: 4px solid black;
}
img {
float: left;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://i.imgur.com/cs2BJzw.jpg" width="200px" alt="dicoding">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci architecto aspernatur dolorem
doloremque eum excepturi fuga hic, molestias obcaecati officia perferendis perspiciatis qui saepe ut velit
veniam vitae voluptatum.</p>
</div>
</body>
</html>Hasilnya:
Hal ini menunjukkan bahwa elemen yang menerapkan float “tidak dianggap ada” oleh induk elemen yang menaunginya karena jika menggunakan float, elemen akan dikeluarkan dari normal flow.
Bagaimana Anda menanganinya?
Terdapat dua cara yang akan kita bahas, yakni dengan pertama, menggunakan properti clear dan kedua, menetapkan nilai overflow: auto pada container.
Cara yang pertama adalah dengan menggunakan properti clear. Properti clear memang dibuat untuk menghilangkan sifat float, dengan demikian elemen yang menerapkan properti float akan kembali “dianggap ada”. Namun untuk menerapkan properti ini kita perlu membuat sebuah elemen kosong (biasanya menggunakan div tanpa konten) yang menerapkan properti clear.
Nilai dari properti clear merupakan nilai yang digunakan pada properti float karena properti clear akan menghapus sifat float sesuai dengan nilai yang ditetapkan. Contohnya seperti ini:
<!doctype html>
<html lang="en">
<head>
<style>
.container {
width: 800px;
border: 4px solid black;
}
img {
float: left;
margin: 10px;
}
.clear {
clear: left;
}
</style>
</head>
<body>
<div class="container">
<img src="https://i.imgur.com/cs2BJzw.jpg" width="200px" alt="dicoding">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci architecto aspernatur dolorem
doloremque eum excepturi fuga hic, molestias obcaecati officia perferendis perspiciatis qui saepe ut velit
veniam vitae voluptatum.</p>
<div class="clear"></div>
</div>
</body>
</html>Maka hasilnya akan seperti ini:
Jika kita mencoba mengubah clear menjadi clear: right;, maka akan kembali seperti hasil sebelum menerapkannya.
Lalu bagaimana jika terdapat dua elemen yang menerapkan nilai float berbeda (left dan right)? Terdapat satu nilai lagi yang dapat menghilangkan keuda sifat float tersebut, yakni nilai both. Gunakanlah nilai tersebut jika kita ingin sepenuhnya menghilangkan sifat float pada elemen.
Cara yang kedua adalah dengan menetapkan properti overflow: auto; pada elemen yang menampung elemen float. Sebagian developer lebih memilih menggunakan cara ini karena lebih praktis dan tidak perlu membuat elemen baru ketika menggunakannya.
Untuk menerapkannya sangatlah simpel. Cukup tambahkan properti overflow dengan nilai auto pada container.
<!doctype html>
<html lang="en">
<head>
<style>
.container {
width: 800px;
border: 4px solid black;
overflow: auto;
}
img {
float: left;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<img src="https://i.imgur.com/cs2BJzw.jpg" width="200px" alt="dicoding">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium adipisci architecto aspernatur dolorem
doloremque eum excepturi fuga hic, molestias obcaecati officia perferendis perspiciatis qui saepe ut velit
veniam vitae voluptatum.</p>
</div>
</body>
</html>Maka hasilnya akan sama seperti yang dilakukan pada cara pertama..
Seperti yang sudah disinggung pada latihan sebelumnya, latihan kali ini kita akan memindahkan elemen aside agar berada di pinggir halaman halaman detail. Sehingga tampilan website akan terlihat seperti ini:
Namun tidak hanya sampai disitu, latihan kali ini akan sedikit lebih panjang, karena kita akan menerapkan responsibilitas tampilan pada halaman profil dengan menggunakan teknik media query. Seperti apa tekniknya? Mari kita ketahui bersama.
Yang pasti pada akhirnya kita dapat membuat halaman aplikasi tampak seperti berikut:
Seperti yang sudah dipelajari, properti float berfungsi untuk memindahkan suatu elemen untuk berada sebelah di kiri atau di sebelah kanan, dengan menggunakan nilai right atau left. Ketika menggunakan properti tersebut kita perlu menetapkan lebar pada elemen yang akan diterapkan properti float sehingga kita tahu berapa banyak cakupan lebar yang disediakan untuk elemen tersebut.
Untuk langkah awal, mari kita buat rule baru dengan selector #content dan tuliskan nilai left pada properti float.
#content {
float: left;
}Jangan lupa untuk menetapkan nilai lebar juga. Pada kasus kali ini kita gunakan nilai 75% untuk menetapkan lebar #content.
#content {
float: left;
width: 75%;
}Ketika kita buka hasilnya pada browser, tampilan akan jadi berantakan seperti ini:
Tenang, ini normal. Karena kita belum menetapkan nilai float pada elemen <aside>, elemen <aside> dan <footer> akan berpindah menempati ruang yang sebelumnya digunakan oleh #content. Karena kita sudah mengetahui bahwa elemen yang diberikan nilai float akan dikeluarkan dari normal flow.
Langkah selanjutnya, kita terapkan juga properti float dengan nilai right pada elemen <aside>.
aside {
float: right;
}Jangan lupa untuk menetapkan lebar pada elemennya. Karena sebelumnya elemen content sudah menerapkan 75% lebar dari parent, berarti elemen aside hanya dapat memiliki 25% ruang yang tersedia untuk ditempati. Silakan tetapkan nilai 25% pada properti width untuk elemen aside.
aside {
float: right;
width: 25%;
}Jika kita coba membuka berkas HTML dengan apa yang sudah kita terapkan, maka tampilan akan jadi lebih mengerikan seperti ini:
Hal tersebut disebabkan nilai elemen <main> sekarang memiliki tinggi 0px. Di mana #content dan elemen <aside> dianggap tidak ada, sehingga elemen <footer> akan naik mengisi ruang yang kosong. Agar #content dan elemen <aside> dianggap ada oleh <main> (sebagai induk elemennya) kita perlu tetapkan nilai overflow: auto; pada main.
Silakan tambahkan properti overflow dengan nilai auto pada selector main yang sudah kita buat sebelumnya.
main {
padding: 20px;
overflow: auto;
}Setelah menerapkan overflow: auto; pada main, tampilan website sudah lebih baik dan elemen footer sudah berada pada posisi yang seharusnya.
Namun kita perlu memberikan sedikit jarak antara #content dan aside agar tidak nampak berhimpitan. Tambahkanlah padding-left pada aside agar konten yang ditampilkan lebih menjorok ke kiri.
Silakan tambahkan properti padding-left dengan nilai 20px pada selector aside.
aside {
float: right;
width: 25%;
padding-left: 20px;
}Setelah menerapkannya, buka kembali hasilnya pada browser. Voila, ini hasilnya:
Ups, elemen <aside> sekarang berada di bawah #content karena dengan menambahkan padding pada <aside>, lebar elemen sudah bukan 25% lagi.
Untuk mengatasinya kita bisa ubah tipe pengukuran untuk dimensi kotaknya. Masih ingat kan materi tentang box-sizing? Dengan menerapkan nilai border-box pada properti box-sizing, kita dapat menentukan dimensi kotak dengan tepat, tanpa dipengaruhi oleh padding dan border.
Mari kita tetapkan pengukuran box-sizing untuk seluruh elemen HTML dengan menggunakan selector * seperti berikut:
* {
box-sizing: border-box;
}Setelah menetapkan rule tersebut, maka tampilan website akan kembali normal.
Setelah berhasil membuat layout dengan menggunakan float, apakah terpikir bagaimana tampilan yang dihasilkan pada mobile device? Tampilan website kita terlihat baik ketika dibuka menggunakan laptop atau desktop tetapi belum tentu akan sama pada mobile device.
Pada browser Google Chrome dan Mozilla Firefox terdapat fitur inspection. Fitur ini sangat bermanfaat bagi developer web dalam membantu pengembangan website. Jika ingin mempelajari lebih lanjut mengenai fitur ini, Anda bisa melihat detailnya pada dokumentasi yang tersedia pada tautan berikut:
Yang jelas pada inspector tersebut terdapat fitur di mana kita dapat mensimulasikan halaman website dalam tampilan mobile device atau tablet. Untuk membuka fitur inspector kita bisa gunakan shortcut ctrl + shift + i pada browser, atau dengan melakukan klik kanan -> inspect / inspect page.
Fitur Inspection pada Google Chrome
Fitur Inspection pada Mozilla Firefox
Kedua gambar di atas menunjukan fitur dari inspection pada Google Chrome dan Mozilla Firefox. Untuk mensimulasikan tampilan pada mobile device, kita dapat menekan icon yang dilingkari pada gambar di atas.
Dengan begitu inilah tampilan seperti ini akan muncul:
Di sini kita bisa memilih peranti apa yang akan digunakan untuk mensimulasikan halaman, untuk melihat tampilan dalam mobile devices, kita bisa memilih salah satu opsi handphone yang tersedia. Contohnya Pixel 2 XL.
Lalu setelah memilih tampilan pada mobile devices, apakah tampilan website sekarang sudah nampak baik? Tentu tidak, karena tampilan pada simulasi device di browser Google Chrome masih berantakan tampak seperti ini.
Untuk mengatasinya, kita perlu menetapkan tag viewport agar dapat responsif pada peranti mobile.
Viewport merupakan area yang dapat dilihat oleh pengguna kita pada halaman website. Ukuran viewport bervariasi berdasarkan device-nya. Ukuran viewport pada sebuah peranti mobile, lebih kecil dibandingkan dengan layar komputer.
Sebelum adanya tablet ataupun handphone, halaman website didesain hanya untuk ukuran layar komputer. Dengan begitu banyak sekali website yang menerapkan tampilan dan ukuran yang static. Maka ketika halaman tersebut diakses melalui handphone atau tablet, ukuran akan terlalu besar untuk ditampilkan. Untuk mengatasi permasalahan tersebut kita perlu mengatur sebuah viewport pada halaman website kita.
Mengatur viewport dapat melalui sebuah tag <meta> yang disisipkan pada head berkas html. Silakan buka berkas index.html kemudian tambahkan script berikut di dalam <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">
Sehingga sekarang tampilan pada mobile device menjadi seperti ini:
Tampilan pada mobile device setelah ditambahkan meta tag viewport
Walaupun sudah menetapkan meta tag viewport, tampilan pada mobile device belum baik, karena informasi yang ditampilkan pada elemen <aside> sulit terbaca.
Untuk mengatasi hal ini, CSS menyediakan sebuah fitur yang dapat kita gunakan untuk menentukan rule hanya pada ukuran viewport tertentu. Fitur tersebut dinamakan CSS Media Queries. Berikut contoh penulisannya:
/* Rule yang dituliskan dalam block @media di bawah akan diterapkan pada device yang memiliki ukuran viewport di bawah 992px */
@media screen and (max-width: 992px) {
........
}
/* Rule yang dituliskan dalam block @media di bawah akan diterapkan pada device yang memiliki ukuran viewport di bawah 600px */
@media screen and (max-width: 600px) {
........
}Canggih bukan? Setelah mengetahui fitur media queries, kita dapat memperbaiki halaman profil dengan memindahkan elemen <aside> di bawah dari #content, hanya pada device yang memiliki ukuran layar kecil. Sehingga <aside> dapat menyesuaikan kembali lebarnya.
Untuk melakukannya kita buat elemen <aside> dan #content memiliki lebar 100% pada layar yang memiliki lebar viewport maksimal 1000px (nilainya dapat disesuaikan sesuai kebutuhan). Silakan tuliskan kode berikut pada style.css:
@media screen and (max-width: 1000px) {
#content,
aside {
width: 100%;
padding: 0;
}
}Dengan menerapkan media query, sekarang halaman profil dapat menyesuaikan tampilan ketika diakses oleh peranti mobile.
Selamat! Sampai dengan materi ini kita sudah dapat membuat sebuah website dengan tampilan yang menarik, Ingin paham lebih jauh tentang konsep responsive pada website? Anda bisa membaca artikel yang ada pada blog kami atau bisa membaca dokumentasi yang diberikan oleh Google mengenai ini.
Ada satu fitur yang mungkin perlu diterapkan lagi pada halaman profil yang kita buat. Pada halaman profil sudah terdapat sebuah navigasi yang berfungsi untuk mengarahkan pengguna langsung pada informasi yang dipilih. Tetapi navigasi tersebut agak sulit diakses ketika pengguna melakukan scrolling pada halaman website. Pasalnya, navigasi tersebut selalu berada di bawah jumbotron website. Akibatnya, untuk mengakses navigasi yang dimaksud, pengguna perlu kembali melakukan scrolling ke atas hingga navigasi kembali terlihat.
Dari permasalahan di atas, sepertinya kita perlu meletakan navigasi yang menempel pada jendela browser, sehingga ketika user melakukan scrolling pada halaman website, navigasi tetap dapat dicangkup oleh pengguna untuk digunakan.
Terdapat satu nilai properti position yang belum dibahas pada pembahasan positioning, yaitu sticky positioning yang merupakan nilai kombinasi dari relative positioning dan fixed positioning.
Dengan menggunakan nilai sticky pada properti position, membuat navigasi dapat melekat pada jendela browser (layaknya fixed position) tetapi posisi awalnya tetap menempati posisi di mana ia seharusnya berada (layaknya relative position). Sehingga tampilan navigasi dapat memiliki sifat seperti ini:
Untuk menerapkannya cukup mudah, pertama kita tambahkan properti position dengan nilai sticky dan properti top dengan nilai 0 pada elemen <nav>.
nav {
background-color: #00a2c6;
padding: 5px;
position: sticky;
top: 0;
}Nilai top diperlukan agar ketika pengguna melakukan scrolling, elemen navigasi tetap berada di atas jendela browser.
Bagaimana agar navigasi dapat menempel pada seluruh halaman? Buat elemen <header> sebagai induk dari elemen <nav> yang menerapkan properti display dengan nilai inline. Silakan tuliskan rule berikut pada berkas style.css.
header {
display: inline;
}Setelah menerapkannya, seharusnya kini Navigasi pada halaman profil akan tampak seperti pada gif di atas.
No comments:
Post a Comment