Kegunaan Overflow

By Admin di 9/21/2008 |

Kegunaan Overflow - Pernahkah anda melihat disebuah blog(atau mungkin blog anda sendiri) yang isi pada suatu elemennya keluar dari batas lebar elemennya? tentu jadi kelihatan jelek bukan. Ada sebuah kode HTML yang digunakan untuk mengatasinya yakni overflow. Overflow adalah kode HTML yang digunakan sebagai pembatas elemen apabila isinya melebihi lebar elemen. Caranya tinggal menambahkan kode overflownya pada HTML template seperti dibawah ini.

Saya ambil contohnya adalah kotak komentar. Untuk DEMO LIHAT DISINI

#comments-block .comment-body {
background:#CEE3F6 ; border-top:3px ridge #0080FF; margin:0;
border-right:1px ridge #ff0000;border-left:1px dotted #ccc;
padding:10px 5px 0 10px;
-moz-border-radius-topright:10px;
overflow:auto;
}

Update :
Tambahan lagi. Baru dipost udah ditembak oleh mas Mochal nih
"selain auto untuk nilainya ada apa lagi?"
Sorry mas, soalnya bikin postingan ini jem 2 pagi jd males panjang2.
Berikut tambahannya :

Jika diatas yang bermasalah adalah isi dari elemennya, sekarang yang bermasalah adalah lebar dari elemen itu sendiri. Lebar dari elemen dapat saja berubah disebabkan oleh pengaruh jenis Browser ataupun monitor yang digunakan. Nah, overflow disini digunakan untuk menyembunyikan(hidden) elemen tersebut.

#sidebar-wrapper {
width: 300px;
float: $endSide;
margin:0px;
padding:5px 5px 5px 0px;
word-wrap: break-word;
overflow: hidden;
}

Hanya 2 value ini yang sering digunakan untuk template. Mau tau jg value yang lain? ok deh..

overflow:scroll; (sejenis dengan auto, biasanya untuk image/gambar)
overflow:visible; (kebalikan dari hidden)
overflow:123px; (Untuk me re-size ukuran elemen jika terjadi kelebihan lebar elemen karena pengaruh diatas tadi. Nggak harus 123 lho, angka tersebut menunjukkan lebar elemen pengganti. Contoh : lebar elemennya 200px, maka overflownya dibuat sekitar 190px.)

Ada satu kode HTML lagi yang sejenis yaitu

word-wrap: break-word;

ini digunakan untuk memisahkan sebuah kata yang panjang atau kalimat tanpa spasi. Tapi menurut pengalaman saya kode ini kurang efektif(kadang2,hehehe).

Sekian.. semoga dapat berguna. jika ada kesalahan pengertian oleh saya, langsung diomelin aja..hehehhe.

Related Posts by Categories