CSS Layouting # Overflow

bySetyo Wibowo ID - 0

 Dalam tutorial kali ini kita akan membahas mengenai Fungsi dari CSS Overflow,, sebenarnya apa sih CSS Overflow itu ??





Jadi Begini teman – teman, CSS Overflow ini akan berguna ketika teman – teman membuat sebuah objek box, semisal menggunakan tag <div> dan telah mendeklarasikan ukuran objek tersebut, ternyata isi didalam objek tersebut melebihi dari yang telah dideklarasikan sebelumnya, nah teman – teman bisa mengatasi hal tersebut, dengan cara menghilangkan bagian yang lebih tersebut, atau juga dapat menggunakan Scroll Bar.





Jadi CSS Overflow ini akan menghandle konten yang ukurannya melebihi ukuran parent dari konten tersebut, sederhananya seperti itu..





Dalam CSS terdapat beberapa value yang bisa anda gunakan dalam property overflow antara lain :





  • visible (Menampilkan konten yang melebihi ukuran parentnya)
  • hidden (Menyembunyikan konten yang melebihi ukuran parentnnya)
  • scroll (memberikan scrollbar  pada konten yang melebihi ukuran parentnya, scroll ada baik secara vertical ataupun horizontal)
  • auto (memberikan scrollbar pada konten yang melebihi ukuran parentnya, scroll yang ada secara vertical saja)




Nah untuk memahami konsep dari 4 jenis value overflow ini silahkan perhatikan skrip dibawah ini :









<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	#satu {
    width: 500px;
    height: 100px;
    background-color: green;
    overflow: visible;
	}
	#dua {
    width: 500px;
    height: 100px;
    background-color: blue;
    overflow: hidden;
	}
	#tiga {
    width: 500px;
    height: 100px;
    background-color: orange;
    overflow: scroll;
	}
	#empat {
    width: 500px;
    height: 100px;
    background-color: red;
    overflow: auto;
	}
</style>
</head>
<body>
<div id="satu">
	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah 
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<hr/>
<div id="dua">
	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah 
</div>
<br/>
<br/>

<hr/>
<div id="tiga">
	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah 
</div>
<br/>
<br/>
<hr/>
<div id="empat">
	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah paragraf	ini adalah 
</div>
</body>
</html>




Semisal kita simpan dengan nama CSS-overflow.html, lalu kita buka di browser maka hasilnya…









Keterangan :





  1. Pada objek menggunakan id=”satu” yang menggunakan background warna hijau, kita gunakan overflow:visible sehingga text tetap ditampilkan meskipun melebihi lebar dari parentnya
  2. Pada objek menggunakan id=”dua” yang menggunakan background warna biru, kita gunakan overflow:hidden sehingga text yang melebihi lebar dari parentnya tidak ditampilkan
  3. Pada objek menggunakan id=”tiga” yang menggunakan background warna orange, kita gunakan overflow:scroll sehingga text yang melebihi parentnya tetap ditampilkan dengan menggunakan menggunakan scrollbar, baik vertical ataupun horizontal
  4. Pada objek menggunakan id=”empat” yang menggunakan background warna merah, kita gunakan overflow:auto sehingga text yang melebihi parentnya tetap ditampilkan dengan menggunakan menggunakan scrollbar secara vertical




Jadi bagaimana mudah kan teman – teman konsep penggunaan dari Overflow didalam css, silahkan jika ada yang ingin didiskusikan monggo di kolom komentar, baik sekian dulu tutorial mengenai CSS Overflow sampai jumpa ditutorial CSS Selanjutnya..


Post a Comment (0)

أحدث أقدم