Membuat Isi Kotak Tidak Keluar dengan CSS (Overflow)

Menjadi Web Developer

Menjadi Web Developer

Terkadang kita ingin membuat sebuah content web (isi) yang dibatasi oleh sebuah kotak. Jadi ketika content/isi melebihi kotak tersebut, maka tidak akan ditampilkan (disembunyikan). Disinila fungsi dari CSS dengan script Overflow-nya. Fungsi dari overflow adalah untuk menyembunyikan, menampakkan, atau membuat scroll. Fungsi ini bisa diterapkan dalam objek teks ataupun gambar.

Pada penggunaan fungsi overflow biasanya ada 4 alternatif yang bisa kita gunakan:

    overflow:auto
    overflow:scroll
    overflow:hidden
    overflow:display

Buat Style seperti ini:

div.scroll {
 background-color: #00FFFF;
 width: 100px;
 height: 100px;
 overflow: scroll;
}
div.hidden {
 background-color: #00FF00;
 width: 100px;
 height: 100px;
 overflow: hidden;
}

Selanjutnya di HTML buat seperti ini:

<p>overflow:scroll</p>
<div class=”scroll”>You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

<p>overflow:hidden</p>
<div class=”hidden”>You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>

Silahkan lihat perbedaanya, yang satu ada scrollnya yang satu disembunyikan scrollnya.

Iklan

One comment on “Membuat Isi Kotak Tidak Keluar dengan CSS (Overflow)

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s