(CSS) Mengenal Tag Overflow dan Fungsinya - Abcmagz.com

9/21/2016

(CSS) Mengenal Tag Overflow dan Fungsinya

(CSS) Mengenal Tag Overflow dan Fungsinya
Hallo sahabat Blogger, pada kesempatan ini admin akan membahas tentang sebuah tag CSS, yaitu tag Overflow, sebagian dari sahabat blogger mungkin pernah mendengarnya atau bahkan tidak asing lagi dengan tag ini (Overflow).

Tag/Syntax CSS ini berfungsi sebagai memperlihatkan, menyembunyikan, ataupun dapat digunakan untuk membuat Scroll.

Bagi sahabat blogger yang pernah mengalami masalah seperti adanya ruang kosong pada bagian footer kemungkinan ini ada hubungannya dengan tag ini, kenapa admin katakan ada hubungannya dengan tag ini ?, ya tag ini berguna untuk merapihkan tampilan blog/web agar tidak keluar dari box yang telah kita buat (ex : tag div).

Untuk mengetahui lebih lanjut berikut terdapat 4 kode alternatif dalam penggunaan Overflow
  1. overflow:scroll;
  2. overflow:hidden;
  3. overflow:auto;
  4. overflow:display;
Sebagai contohnya, berikut ini contoh dari masing kode alternatif tag Overflow dengan menggunakan contoh kode berikut ini

<div style="background-color: #eeeeee; border: 1px solid #ccc; height: 100px; overflow: auto; padding: 10px; width: 100%;">Teks/Gambar disini</div>

Overflow:scroll;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum iaculis nisl eu efficitur. Etiam consequat urna dui, quis porttitor turpis fringilla nec. Quisque elementum fermentum maximus. Ut in dapibus arcu. Sed at dolor eu mi dictum vestibulum. Proin pretium, magna vel mollis imperdiet, diam libero maximus dui, lacinia tincidunt tortor metus a arcu. Nulla at euismod velit.

Overflow:hidden;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum iaculis nisl eu efficitur. Etiam consequat urna dui, quis porttitor turpis fringilla nec. Quisque elementum fermentum maximus. Ut in dapibus arcu. Sed at dolor eu mi dictum vestibulum. Proin pretium, magna vel mollis imperdiet, diam libero maximus dui, lacinia tincidunt tortor metus a arcu. Nulla at euismod velit.

Overflow:auto;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum iaculis nisl eu efficitur. Etiam consequat urna dui, quis porttitor turpis fringilla nec. Quisque elementum fermentum maximus. Ut in dapibus arcu. Sed at dolor eu mi dictum vestibulum. Proin pretium, magna vel mollis imperdiet, diam libero maximus dui, lacinia tincidunt tortor metus a arcu. Nulla at euismod velit.

Overflow:display;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dictum iaculis nisl eu efficitur. Etiam consequat urna dui, quis porttitor turpis fringilla nec. Quisque elementum fermentum maximus. Ut in dapibus arcu. Sed at dolor eu mi dictum vestibulum. Proin pretium, magna vel mollis imperdiet, diam libero maximus dui, lacinia tincidunt tortor metus a arcu. Nulla at euismod velit.


Itulah sedikit pengenalan tentang tag overflow dan fungsinya, jika ada pertanyaan sahabat bisa tinggalkan komentar
Comments


EmoticonEmoticon

Notification
This is just an example, you can fill it later with your own note.
Done