Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How do I use two styles in one page?

    I have two scrollbars in a single page (one for a layer, one for the whole document) and I plan on using two different colored scrollbars. How do I do that?

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    give a class or id to the the element that you want to apply the scrollbar colors to then in the css define the colors under that specific class or element, mind you that scrollbar colors only work in IE/PC and maybe one other browser, and then define the colors for the html element in css
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Scrollbar colors</title>
    <style type="text/css">
    <!--
    html {
    scrollbar-3dlight-color : #FFFFFF;
    scrollbar-arrow-color : #FFFFFF;
    scrollbar-base-color : #000000;
    scrollbar-darkshadow-color : #000000;
    scrollbar-face-color : #FF0000;
    scrollbar-highlight-color : #FFFFFF;
    scrollbar-shadow-color : #CCCCCC;
    scrollbar-track-color : #000000;
    }
    div#content {
    height:300px;
    width:300px;
    margin:auto;
    overflow:auto;
    scrollbar-3dlight-color : #FFFFFF;
    scrollbar-arrow-color : #FFFFFF;
    scrollbar-base-color : #000000;
    scrollbar-darkshadow-color : #000000;
    scrollbar-face-color : #0000FF;
    scrollbar-highlight-color : #FFFFFF;
    scrollbar-shadow-color : #CCCCCC;
    scrollbar-track-color : #000000;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="content">your text here</div>
    </body>
    </html>
    EDIT:fixed typo thanx jalenack
    Last edited by _Aerospace_Eng_; 03-10-2005 at 06:40 AM.

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    Berkeley, California Age: 15
    Posts
    398
    Thanks
    0
    Thanked 0 Times in 0 Posts
    _Aerospace_Eng_, there is a small but very important typo in your code:

    overflow: auto


    Generally, its bad form to color a user's scrollbars. This has been discussed many times before at this forum, so do a search on scrollbars and see what you find.
    Jalenack.com .:. YWDA Founder .:. Rounded Corners Maker 1.1! .:. My Blog
    The hardest thing about teaching is not knowing the right answers, but knowing the right questions - Elisabeth Klein
    Pretty buttons does not a great website make.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •