5 Ekim 2013 Cumartesi

Css ve DIV ile Scrollbar yapımı

Web uygulamaları geliştirirken önemli konulardan biriside tasarımdır. Bazen sayfada çok fazla içerik olduğunda sayfa uzar gider. O zaman şöyle bir şey yapabiliriz. Çok fazla içerik olan kısmı bir Div Nesnesi içerisine alıp, Div nesnesinin yüksekliğini veya uzunluğunu veya hem yüksekliğini hem de uzunluğunu sabitledikten sonra, Scrollbar (Kaydırma çubuğu) ekleyip içeriğin Div nesnesinde içerisinde kaydırılarak görüntülenmesini sağlayabiliriz. Nasıl yapıcağız onu görelim.
Öncelikle sayfada CSS classı (nesnesi) oluşturuyoruz. Ve nesnenin özelliklerini belirtiyoruz.
style type="text/css">
      .icerik{
            font-family:Verdana;
            font-size:11px;
            SCROLLBAR-ARROW-COLOR:white; 
            SCROLLBAR-DARKSHADOW-COLOR: white; 
            SCROLLBAR-BASE-COLOR: #6699FF; 
            SCROLLBAR-HIGHLIGHT-COLOR:white; 
            SCROLLBAR-FACE-COLOR: #99CCFF; 
            SCROLLBAR-TRACK-COLOR: white;            
            SCROLLBAR-3DLIGHT-COLOR: #62B0FF; 
            SCROLLBAR-SHADOW-COLOR: #62B0FF; 
            height:150px; 
            width:500px;
            overflow:auto; 
            border:solid 1px #99CCFF;
            background-color:White;
            margin:5px; 
            padding:5px; 
      }/style
CSS özelliklerinin ne iş yaptığını anlatmaya gerek yok. Özelliklerinin değerlerini değiştirerek ne gibi değişiklikler olduğunu gözlemleyebilirsiniz. Şimdi bu Css içerik nesnesinin özelliklerini Div nesnesine uygulayalım.
div class="icerik">Buraya içerik gelecek/div