OVERFLOW sering digunakan dalam kode CSS. Fungsi dari overflow adalah untuk menyembunyikan, menampakkan, atau membuat scroll. Fungsi ini bisa diterapkan dalam objek teks ataupun gambar.

Pada objek tertentu, baik posting atau widget, kadang kadang ada yang memakan tempat ke pinggir atau ke bawah. Supaya objek tersebut muncul sesuai dengan yang kita kehendaki, maka digunakan syntax overerflow.

Penggunaan kode ini ada beberapa alternatif, yaitu:
  1. overflow:scroll
  2. overflow:auto
  3. overflow:hidden
  4. overflow:display
Sebagai contoh, saya akan membuat objek untuk postingan atau widget. Contoh kode yang digunakan adalah :
<div style="background-color:#FBFBFB; border:1px solid #D2D2D2; padding:10px; width:400px; height:100px; overflow:auto;">
teks atau gambar di sini</div>
keterangan:
background-color : warna latar belakang
border : warna garis pinggir
padding : jarak dari pinggir garis ke objek
width : lebar
height : tinggi
overflow : silahkan pilih auto, scroll, hidden atau display sesuai kebutuhan.

Hasil overflow:auto

Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.

Hasil overflow:scroll

Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.

Hasil overflow:hidden

Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi oferflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.

Hasil overflow:display

Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.
Contoh teks disini, atau bisa di isi gambar. silahkan pilih opsi overflow sesuai kebutuhan anda. Begitu juga warna latar belakang, garis pinggir dan jarak, sesuaikan sesuai yang anda inginkan.





Apabila ada pertanyaan atau saran mengenai Fungsi Overflow, silahkan isi kolom komentarnya gan...

22 komentar

Info yang sangat bermanfaat... makasih kang

Balas

Sama2 sob... enjoy blogging :)

Balas

keren gan...thanks yaa....
mantabb..

Balas

sama2 sob.. sering berkunjung ya... :)

Balas

langsung praktek kang,,, heheeee,,, thank's ilmu nya,,, :)

Balas

coba liat lagi 4 contoh di atas... :)

Balas

makasih kang....sangat membantu buat saya yang baru belajar css

Balas

thanks gan. penjelasannya sangat mudah dimengerti

Balas

tepat banget kangismet...bagi-bagi infonya ya,... trims

Balas

thanks infonya bang...
kalo boleh request: cara men-copy template website lain

Balas

tks infonya. saya sering copas css, objek yg berada dibawah tidak pernah menggagu objek diatasnya pada waktu scroll. tapi klu saya buat sendiri, koq tembut di sela2 font.
coth fixed top menu di blog > obengkumana.blogspot.com. Dalam css, itu apa namanya. tks

Balas

klo over floe kesamping gmn kang?
tapi ukuran kotaknya kita yg sesuaiin

Balas

Yang saya tau selama ini cuman overflow hidden dan overflow auto. Ternyata masih ada value yg lainnya ya.. :D

Balas

mas, saya mau tanya, saya ingin menambah kolom widget di samping header, di template saya gak ada kolom widget di samping headernya, padahal di situs penyedia templatenya kolom widget di samping headernya ada, saya sudah tanyakan tapi belum di respon juga sama yg punya template, saya juga udah mencari2 cara untuk menambah kolom widget di google, tapi tutorialnya umumnya sama dan gagal, karena code header di template saya sepertinya berbeda..

di code headernya ada code overlow:hidden, saya sudah mencoba ganti dengan overlow:display tapi tetap aja gak bisa, kenapa ya mas?

ini code header di template saya

/* Header
-----------------------------------------------
*/

#header-wrapper {
margin:0 auto 0;
padding:20px 10px;
color:$(head.title.color);
overflow:hidden;
}

#header {
margin:0;
float:$startSide;
min-width:200px;
max-width:400px;
}

#headerads {
float:$endSide;
min-width:400px;
margin:15px 0;
max-width:500px;
}

#headerads h2 {
display:none;
}

#header h1,
#header p {
margin:5px 5px 0;
padding:0;
text-transform:uppercase;
font:$(head.title.font);
}

#header a {
color:$(head.title.color);
text-decoration:none;
}

#header a:hover {
color:$(head.title.color);
}

#header .description {
margin:0 5px 5px;
padding:0;
text-transform:capitalize;
line-height:1.4em;
font:$(head.desc.font);
color:$(head.desc.color);
}

#header img {
margin-$startSide:0;
margin-$endSide:auto;


sebelumnya saya ucapin terima kasih atas bantuannya

Balas

saya liat ada ko di templatenya, tapi ga berupa widget, tapi kode html ditemplate yang seperti ini
<div class="adshead section" id="headerads"></div>
tinggal tambah aja gambar sama linknya, contoh:
<div class='adshead section' id='headerads'>
<a href='http://blog.kangismet.net' target='_blank'><img alt='banner' src='http://1.bp.blogspot.com/-3MXq9HUyCLU/UKS0FN5G1EI/AAAAAAAAADk/kSgN2L0cFLs/s1600/banner468.gif'/></a>
</div>

Balas

gak ada mas codenya..
btw, ini contoh demo template yang saya pake. ponselgames.blogspot.com

maaf jika saya udah naruh link, nanti kalau sudah mas bisa hapus komentar sy yg ini.

terima kasih bantuannya

Balas

terima kasih mas, menambah wawasan saya tenteng css. . . :)

Balas

makasih kang artikelnya,,, nambah pngetahuan lg nih tntang css :D

Rental Mobil Palembang

Balas

Wih baru tau kang saya tentang operplow ini :)

Balas

Kang, sy mau tanya, sy udah coba buat tabel dalam dalam kotak overflow, hurufnya kelihatan tapi border tabelnya tidak kelihatan, apa overflow ini tidak bisa diisi tabel atau masih ada kesalahan pada kodenya, mohon bantuannya kang...

Balas

ok kang, masalahnya sdh teratasi....

Balas

Poskan Komentar


×
Chat