Membuat text scroll box dengan Css

Salah satu kelemahan halaman web yang dibatasi oleh box yang static adalah tidak cukup untuk menampilkan semua teks didalamnya.
Tetapi jangan putus asa dulu, saya punya solusinya…dengan Css anda bisa mengatasi masalah itu.

Nah, sekarang saya akan mencoba memberikan sedikit pengalaman saya kepada anda.
Pertama, buatlah text box diantara tag <body>…</body>pada halaman HTML seperti ini:

<div class=”kotak_teks”></div>

selanjutnya, ketikan isi atau artikel diantara tag <div>…</div> seperti contoh:

<div class=”kotak_teks”>
Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css
</div>

Kedua, buatlah style Css nya diantara tag <head>…</head> seperti contoh dibawah ini:

<style type=”text/css”>
div.kotak_teks {
width:520px;
height:100px;
overflow: auto;
text-align:left;
border: solid 1px #cccccc;
padding:5px;}
</style>

Untuk lebih jelasnya, lihatlah sintax HTML yang lengkap dibawah ini:

<html>
<head>
<title>Membuat texs scroll box dengan Css</title>
<style type=”text/css”>
div.kotak_teks {
width:520px;
height:100px;
overflow: auto;
text-align:left;
border: solid 1px #cccccc;
padding:5px;}
</style>
</head>

<body>
<div class=”kotak_teks”>
Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css.
</div>
</body>
</html>

Dan hasilnya akan menjadi seperti text box dibawah ini:

Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css Cara membuat texs scroll box dengan Css.

Nah, semoga ada manfaatnya bagi yang belum mengetahui cara ini.

4 comments for “Membuat text scroll box dengan Css

  1. 10 Juli 2009 at 16:47

    terima kasih maz….
    buat tutonya….

  2. NIFAN SUNANDAR
    16 Juli 2009 at 15:21

    oke boss sudah dicoba semua triknya

  3. LnddMiles
    26 Juli 2009 at 19:10

    The best information i have found exactly here. Keep going Thank you

  4. 3 Agustus 2011 at 13:28

    Terimakasih atas infonya sangat beranfaat . apalagi untuk toko online saya http://juallampuhias.blogdetik.com
    semoga segala aktifitas anda dilancarkan selalu .
    dan tak lupa saling beranjangsana dan bersilahturahmi untuk memperlancara rejeki
    t

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *