CSS overflow

Nilai Keterangan
visible Ini akan membuat limpahan terlihat. Ini default
hidden Ini akan membuat limpahan terpotong, dan sebagian bersembunyi atau tidak terlihat
scroll Ini akan membuat limpahan terpotong, dan sebagian bisa dilihat dengan scroll-bar
auto Jika konten belum penuh dia akan tampil biasa. Dan jika konten sudah penuh dengan automatis menampilkan scroll-bar

Buka Notepad untuk mempraktekkannya, copy-paste kode ini :

<html>
<head>
<style type="text/css">
.satu {
background-color:#FFE5FF;
width:100px;
}

.dua {
background-color:#FFE0B3;
width:100px;
height:100px;
overflow:hidden;
}

.tiga {
background-color:#E5E5FF;
width:100px;
height:100px;
overflow:scroll;
}

.empat {
background-color:#FFFFE5;
width:100px;
height:100px;
overflow:auto;
}
</style>
</head>

<body>
<p>visible - digunakan atau tidak sama saja, kecuali mewarisi. Lebih baik tidak menggunakan properti height.</p>
<div class="satu">contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh</div>

<p>hidden</p>
<div class="dua">contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh</div>

<p>scroll</p>
<div class="tiga">contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh</div>

<p>auto pertama</p>
<div class="empat">contoh contoh contoh contoh</div>

<p>auto kedua</p>
<div class="tiga">contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh</div>
</body>
</html>

Menu Nano di Halaman utama juga menggunakan trik overflow.

Alhamdulillah

0 comments:


Posting Komentar


Creative Commons License
CSS overflow by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2010/12/css-overflow.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.