Belajar css seputar overflow

belajar css

Kegunaan overflow

Apakah Anda pernah mengalami lebar dan tinggi pada suatu elemen melebihi dari kontent?. Ruang yang tidak cukup untuk mengakomodasi konten maka secara otomatis akan meluber ke luar wadah. Dengan property CSS overflow semuanya bisa diatasi, Anda bisa memilih apakah konten akan dipotong, membuat bilah gulir atau menampilkan konten keluar dari elemen blok.

Kemungkinan nilai dari property ini adalah visible, hidden, scroll dan auto.

Overflow dengan nilai visible

Secara default, nilai dari property overflow adalah visible, yang berarti bahwa itu tidak dipotong dan bisa meluber keluar dari wadah elemen.

Contoh:

Editor Online
  1. div {
  2. background-color: #ddd;
  3. width: 200px;
  4. height: 50px;
  5. padding: 20px;
  6. overflow: visible;
  7. }

Overflow dengan nilai hidden

Jika Anda ingin menyembunyikan konten yang keluar dari wadahnya, yang dimana lebar dan tinggi pada suatu elemen melebihi dari konten, maka dengan nilai hidden lah solusinya. Nilai hidden akan memotong konten yang meluber keluar dan sisanya akan disembunyikan.

Contoh:

Editor Online
  1. div {
  2. background-color: #ddd;
  3. width: 200px;
  4. height: 30px;
  5. overflow: hidden;
  6. }

Overflow dengan nilai scroll

Jika Anda ingin menampilkan konten walaupun lebar dan tinggi pada suatu elemen melebihi dari konten, maka dengan nilai scroll lah solusinya. Dengan nilai scroll konten yang meluber akan dipotong dan scrollbar akan ditambahkan untuk menggulir didalam kotak.

Catatan bahwa ini akan menambah scrollbar secara horisontal dan vertikal, bahkan jika Anda tidak membutuhkannya.

Contoh:

Editor Online
  1. div {
  2. background-color: #ddd;
  3. width: 200px;
  4. height: 80px;
  5. overflow: scroll;
  6. }

Overflow dengan nilai auto

Jika Anda menggunakan property overflow dengan nilai scroll, maka akan menambahkan scrollbar secara horizontal dan vertikal. Namun sayangnya akan menambahkan scrollbar meskipun konten tidak meluber.

Untuk solusi tersebut maka nilai auto lah yang bisa diandalkan. Hampir sama kegunaannya dengan nilai scroll, hanya saja dengan nilai auto akan menambahkan scrollbar secara vertikal jika konten meluber keluar.

Contoh:

Editor Online
  1. div {
  2. background-color: #ddd;
  3. width: 200px;
  4. height: 80px;
  5. overflow: auto;
  6. }

Pada CSS3 nanti Anda akan belajar overflow lagi.

Leave a Reply

Your email address will not be published. Required fields are marked *