Share: mengenal Atribut Overflow CSS

Assalamualaikum wr.wb

Dokumentasi Yang penting share kali ini adalah tentang Overflow.Ya sepertinyaYang penting share ingin belajar CSS dengan lebih maksimal,Makanya postingan kali ini dan selanjutnya bakal banyak tentang CSS dan Javascript.Hohooho.Bukan karena saya master justru saya seorang Newbie yang ingin belajar Blogger yang hardcoding ini.Nah kali ini kita Akan mengenal Overflow,apa sih Overflow?

Source pic:andrewkelsall.com

Kebanyakan para Tutor blogger menggunakan Atribut yang satu ini,tapi tak jarang dari mereka yang hanya Omong doang,alias mengcopas dari tutor lainnya,tapi pas ditanya fungsinya tidak tahu.makanya yang Penting share tidak bakal share yang Saya tidak Kuasai.:D.

Menurut W3School,Overflow adalah atribut dari elemen CSS yan fungsinya untuk merapikan Display blog baik widget,Wrapper maupun halaman post agar memiliki ukuran yang rapi dan sesuai keinginan.Overflow biasa nya sering dipakai oleh para tutor adalah Overflow:auto yang digunakan untuk membuat scroll,Tapi tahukah sobat?Jenis Overflow bukan hanya Auto,tapi ada yang lainnya.Berikut jenis-jenis Overflow Beserta fungsinya :

• Overflow:Visible ~adalah Overflow default /standar yang tidak terpotong dan membuat tulisan atau widget bisa keluar dari garis border.
• Overflow:Hidden~adalah overflow yang membuat tulisan maupun tampilan widget terpotong sesuai ukuran lebar(width) dan tingginya (height) sehingga membuat tulisan yang tidak muat terpotong dan tidak ditampilkan
• Overflow:scroll~adalah overflow yang membuat fungsi scroll,Sama halnya dengan Auto tapi perbedaanya,kalau auto scrollnya akan berada hingga batas max width dan heightnya,tapi kalau scroll yang menentukan ukuran scroll adalah akhir tulisan /rest of the content
• Overflow:auto~hemm kalo ini gak perlu dijelasin lagi sobat sharelikers sekalian,Ini jelas fungsinya membuat scroll sesuai Ukuran maximal content yang kita tentuin
• Overflow:inherit~nah kalau ini saya juga kurang mengerti,tapi dari W3 school saya bisa mengutip "memiliki nilai /value yang sama dengan Element Induknya/parent Element"mungkin sobat yang penting share bisa bantu?

Hemm masih bingung dengan Fungsinya ?Yuk kita praktekin aja cara Penggunaanya Berikut Ini
Berikut adalah tulisan tanpa OVerflow,maka kodenya adalah sebagai berikut : 

<div style="text-align: justify;">
Yang penting Share adalah Blog Personal yang menshare tentang segala hal yang menarik dan sesuai dengan kemampuan penulisnya.Yang penting share tidak akan menshare postingan yang 100% copas ataupun tanpa sepengatahuan serta kebenarannya tidak terbukti.Yang Penting share tidak pernah dan tidak akan membuat Postingan yang berisi tentang SARA ataupun keyword Lendir walau hanya untuk memancing Visitor.Yang penting Share hanya akan berbagi yang bermanfaat bagi semua dan menjadi ajang silaturahmi.Yang penting share Selalu melakukan research dulu terhadap post yang bakal dipublish,apakah layak untuk semua Umur ataupun tidak,kebenarannya terbukti atau tidak serta referensinya terpercaya atau tidak.Semoga Yang penting share bisa bermanfaat bagi semua.Yang penting share mengutamakan kualitas post,bukan Kuantitas post.King is the content dan visitor adalah Raja adalah Motto Yang Penting Share.Yang penting share tidak akan membuat post tanpa Referensi kecuali memang hasil tulisan atau Belajar sendiri.</div>
 
Nah bagaimana dengan yang Overflow?sobat cukup menambahkan kode warna Biru diantara warna merah diatas sebagai berikut :

<div style="text-align: style='overflow:visible/hidden/auto/scroll; height:100px;' justify;">Tulisan/kode/widget sobat </div>

Nah kode yang berkedip itu sobat sesuaikan,untuk overflownya pilih salah satu dan heightnya tentukan Ukuran nya baik menggunakan Pixel (px) atau % (persentase dari luas content).Hasilnya akan seperti dibawah Ini (untuk inherit admin masih cari referensi,kalo ada yang bisa bantu mohon sarannya)

1.Contoh Overflow hidden(terpotong alias hanya sebatas luas yg ditentukan)

Yang penting Share adalah Blog Personal yang menshare tentang segala hal yang menarik dan sesuai dengan kemampuan penulisnya.Yang penting share tidak akan menshare postingan yang 100% copas ataupun tanpa sepengatahuan serta kebenarannya tidak terbukti.Yang Penting share tidak pernah dan tidak akan membuat Postingan yang berisi tentang SARA ataupun keyword Lendir walau hanya untuk memancing Visitor.Yang penting Share hanya akan berbagi yang bermanfaat bagi semua dan menjadi ajang silaturahmi.Yang penting share Selalu melakukan research dulu terhadap post yang bakal dipublish,apakah layak untuk semua Umur ataupun tidak,kebenarannya terbukti atau tidak serta referensinya terpercaya atau tidak.Semoga Yang penting share bisa bermanfaat bagi semua.Yang penting share mengutamakan kualitas post,bukan Kuantitas post.King is the content dan visitor adalah Raja adalah Motto Yang Penting Share.Yang penting share tidak akan membuat post tanpa Referensi kecuali memang hasil tulisan atau Belajar sendiri.

2.Contoh Overflow Auto(scroll hanya pada elemen yg ditentukan misal height)

Yang penting Share adalah Blog Personal yang menshare tentang segala hal yang menarik dan sesuai dengan kemampuan penulisnya.Yang penting share tidak akan menshare postingan yang 100% copas ataupun tanpa sepengatahuan serta kebenarannya tidak terbukti.Yang Penting share tidak pernah dan tidak akan membuat Postingan yang berisi tentang SARA ataupun keyword Lendir walau hanya untuk memancing Visitor.Yang penting Share hanya akan berbagi yang bermanfaat bagi semua dan menjadi ajang silaturahmi.Yang penting share Selalu melakukan research dulu terhadap post yang bakal dipublish,apakah layak untuk semua Umur ataupun tidak,kebenarannya terbukti atau tidak serta referensinya terpercaya atau tidak.Semoga Yang penting share bisa bermanfaat bagi semua.Yang penting share mengutamakan kualitas post,bukan Kuantitas post.King is the content dan visitor adalah Raja adalah Motto Yang Penting Share.Yang penting share tidak akan membuat post tanpa Referensi kecuali memang hasil tulisan atau Belajar sendiri

3.Contoh Overflow Scroll(scroll atas bawah)

Yang penting Share adalah Blog Personal yang menshare tentang segala hal yang menarik dan sesuai dengan kemampuan penulisnya.Yang penting share tidak akan menshare postingan yang 100% copas ataupun tanpa sepengatahuan serta kebenarannya tidak terbukti.Yang Penting share tidak pernah dan tidak akan membuat Postingan yang berisi tentang SARA ataupun keyword Lendir walau hanya untuk memancing Visitor.Yang penting Share hanya akan berbagi yang bermanfaat bagi semua dan menjadi ajang silaturahmi.Yang penting share Selalu melakukan research dulu terhadap post yang bakal dipublish,apakah layak untuk semua Umur ataupun tidak,kebenarannya terbukti atau tidak serta referensinya terpercaya atau tidak.Semoga Yang penting share bisa bermanfaat bagi semua.Yang penting share mengutamakan kualitas post,bukan Kuantitas post.King is the content dan visitor adalah Raja adalah Motto Yang Penting Share.Yang penting share tidak akan membuat post tanpa Referensi kecuali memang hasil tulisan atau Belajar sendiri

4.Contoh Overflow visible (keluar dari batas yg ditentukan)

Yang penting Share adalah Blog Personal yang menshare tentang segala hal yang menarik dan sesuai dengan kemampuan penulisnya.Yang penting share tidak akan menshare postingan yang 100% copas ataupun tanpa sepengatahuan serta kebenarannya tidak terbukti.Yang Penting share tidak pernah dan tidak akan membuat Postingan yang berisi tentang SARA ataupun keyword Lendir walau hanya untuk memancing Visitor.Yang penting Share hanya akan berbagi yang bermanfaat bagi semua dan menjadi ajang silaturahmi.Yang penting share Selalu melakukan research dulu terhadap post yang bakal dipublish,apakah layak untuk semua Umur ataupun tidak,kebenarannya terbukti atau tidak serta referensinya terpercaya atau tidak.Semoga Yang penting share bisa bermanfaat bagi semua.Yang penting share mengutamakan kualitas post,bukan Kuantitas post.King is the content dan visitor adalah Raja adalah Motto Yang Penting Share.Yang penting share tidak akan membuat post tanpa Referensi kecuali memang hasil tulisan atau Belajar sendiri

Nah Contoh diatas disengaja menggunakan Atribut lainnya yaitu border supaya Tampak jelas perbedaanya.Apakah hanya Border?Oh tentu Tidak,sobat bisa menambahkan Atribut lain seperti :

• Align:right/left/center/justify
• Background:kode warna atau Url gambar
• Border:ukuran px serta jenis border

Sehingga kodenya bisa menjadi:

<div style="text-align: style='overflow:visible/hidden/auto/scroll; height:100px; align:left/right/justify/center;background:Kode warna Hex sobat atau Url gambar (misal #ffffff);border:**Px jenis border">Tulisan/kode/widget sobat </div>

Nah buat kode yang berwarna Biru sobat ganti sesuai keinginan sobat.Oke saya rasa cukup untuk dokumentasi hasil belajar otodidak saya dari para blogger lainnya.Selanjutnya Overflow ini bisa sobat gunakan untuk membuat scroll pada widget  

Catatan
Overflow hanya bisa ditampilkan dalam versi Blog template tidak bisa atau jarang bisa tampil Di IE ataupun dalam versi handphone 

• Related post,
• Random post, 
• recent Comments,
• Top commentator, 
• scroll Komentar,  
• Recent Post
• Tabview,  
• Daftar Isi 
• Top Post (masih draft)
• ataupun  widget dan CSS lainnya lainnya.

Semoga bisa menjadi bermanfaat juga bagi yang lainnya.Mari kita belajar kode bersama,bukan hanya copas kode saja.Salam yang penting Share.Silahkan di share bila bermanfaat,dan jangan lupa link backnya ^^

sumber Belajar:W3school dan blogger master lainnya

Tampilan terbaik menggunakan Google chrome dan Mozilla +5 layar 1280x854