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 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question how to add scroll bar to #content?

    Dear all,

    My webpage is divided into
    - #header
    - #nav (which is a toolbar on the left)
    - #content
    - #footer

    How can I add a scroll bar to my #content (so that only my content scrolls up and down, with my navigation, header and footer all remaining not moving). This is an example (although I prefer to have a different scroll bar): http://www.zhangxiaogang.org/Enworks.aspx?type=year

    Thank you so much!!

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    overflow:scroll;

    It needs to have width and height too.

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks, but how/where exactly do I put that in my css (or html)? can you give me the specific code? sorry, i'm a beginner.

    This is the page I want to have the scrollbar: http://www.lixiao-art.com/broken.html

    This is my external css:

    Code:
    body { font-family: Verdana;
    color: white;
    margin: 0px;
    background-color: black; 
    }
    
    #header { font-family: courier new;
    padding-left: 40px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: none;
    background-color: white;
    margin-bottom: 0px; }
    
    #content {float: left;
    padding: 30px 20px 100px 100px;
    width: 650px;
    margin: 0px;
    border: none;
    font: white;
    font-family: Arial;
    background-color: black; }
    
    
    
    #content a {text-decoration:underline}
    
    
    h2 {height: 2em;}
    
    #nav {float: left;
    text-align: right;
    font-size: small;
    width: 180px;
    margin-top: 30px;
    font-weight: bold;
    padding: 10px;
    border: none; 
    }
    
    #footer { font-family: arial;
    padding-top: 10px;
      padding-bottom: 10px;
    width: 100%
    border: none;
    background-color: black;
    color: white;
    margin-bottom: 0px; 
    } 
    
    
    a{text-decoration: none; 
    color: white;}
    a:hover {color: red;}
    
    
    
    * {margin: 0;} 
    html, body {height: 100%;} 
    
    .wrapper {min-height: 100%; 
    width: 1500px;
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -1.5em;} 
    
    .footer, .push { height: 1.5em; } 
    
    .ImgBorder img { border:1px solid transparent;
    height:100px;
    }
    .ImgBorder:hover img{ border-color: red} 
    
    .ImgBorder {display: block;
      float: left;
      margin: 30px 20px; } 
    h5{
    clear:both
    }
    
    img { border: none; }
    Last edited by lixiao; 08-04-2012 at 04:28 AM.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Just put it in with all the other content css.

  • #5
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Code:
    overflow-y:scroll


  •  

    Posting Permissions

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