Tutorial Belajar CSS Bagian 12 : Cara Menggunakan Properti Overflow di CSS

0
1511

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 11 : Cara Menggunakan Properti Outlines di CSS. Selanjutnya, kita akan mempelajari cara menggunakan properti overflow di CSS.

Mungkin ada beberapa kendala ketika konten elemen mungkin lebih besar dari jumlah ruang yang dialokasikan untuk konten tersebut.

Misalnya, nilai properti width dan height yang diberikan tidak cukup ruang untuk menampung konten sebuah elemen.

CSS menyediakan properti yang disebut overflow yang memberi tahu browser apa yang harus dilakukan jika konten lebih besar dari kotak konten itu sendiri.

Properti ini dapat diisi dengan nilai berikut :

NoNilai & Deskripsi
1visible
Memungkinkan konten keluar dari batas elemen yang memuatnya.
2hidden
Isi dari elemen bersarang hanya dipotong di perbatasan elemen yang dimuat dan tidak ada bilah gulir yang terlihat.
3scroll
Ukuran elemen penampung tidak berubah, tetapi scrollbar ditambahkan untuk memungkinkan pengguna menggulir untuk melihat konten.
4auto
Tujuannya sama dengan scroll, tetapi scrollbar hanya akan ditampilkan jika konten memiliki jumlah yang banyak.

Berikut ini contohnya :

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
      <p>Contoh nilai scroll:</p>
      <div class = "scroll">
         Saya akan menuliskan banyak konten di sini untuk menunjukkan kepada Anda 
         Scrollbar akan bekerja jika konten melebihi batas kotak elemen. 
         Ini akan menyediakan horizontal dan vertical scrollbar.
      </div>
      <br />
      
      <p>Contoh nilai auto:</p>
      
      <div class = "auto">
         Saya akan menuliskan banyak konten di sini untuk menunjukkan kepada Anda 
         Scrollbar akan bekerja jika konten melebihi batas kotak elemen. 
         Ini akan menyediakan vertical scrollbar.
      </div>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Semoga tutorial ini bisa membantu Anda mempelajari cara menggunakan properti overflow di CSS untuk membuat dokuemn HTML lebih bagus.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.