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
    Aug 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Making content scroll in liquid/relative divs

    Hello all,

    is there a way to make the content of a div auto-scroll when its positioning is set to relative, and the height is in percentages? I want to make my "content" div scroll, but the text simply flows over the bottom of the page instead of scrolling.

    This is the css:
    Code:
    body {
      margin-left:auto;
      margin-right:15%;
      border:0;
      padding:0;
      height:100%; 
      max-height:100%; 
      background:#fff;
      width:90%;
      min-width:640px;
      font-family:tahoma, arial, sans-serif; 
      font-size:78%;
      line-height: 130%;
    overflow:hidden;
      }
    
    a:link
    {
    color:#97268F;
    text-decoration:none;
    }
    
    a:visited
    {
    color:#97268F;
    text-decoration:none;
    }
    
    a:hover
    {
    color:#C176B1;
    text-decoration:none;
    }
    
    a:active
    {
    color:#97268F;
    text-decoration:none;
    }
    
    #top
    {
    padding: .5em;
    right:20%;
    }
    
    
    #tabs
    {
    position:relative;
    float:right;
    top:30%;
    } 
    
    .sidebar
    {
    position:relative;
    float:right;
    padding: .5em;
    top:30%;
    }
    
    
    #content { position:relative;
    float:right;
    top:30%;
    margin-bottom:20%;
    width: 35%;
    height: auto;
    background-color:#fff; 
    padding:.5em;
    overflow-x:hidden;
    overflow-y:auto;               
                }
    
    #puzzle
    {
    position: relative;
    float:right;
    margin-right:60%;
    bottom:20%;
    }
    
    
    #footer
    {
    clear: both;
    position:absolute;
    background-color:#fff;
    margin:0;
    padding: .3em;
    bottom:2%;
    }
    
    
    
    .img
    {
    position: relative;
    right: 8%
    }
    
    .img2
    {
    position: relative;
    right: 55%
    }
    
    
    ul
    {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    text-align: right;
    }
    
    li
    {
    background-image: url(images/bullet.gif);
    background-repeat: no-repeat;
    background-position: 100% .4em;
    padding-right: 1em;
    }
    And this is my html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    
    Transitional//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
    
    transitional.dtd">
    <html dir="rtl">
        <head>
    <meta http-equiv="Content-Type" 
    
    content="text/html; charset=windows-1255" />
      <title>Page</title>
    
    <script type="text/javascript">
    <!-- Hide the script from old browsers --
    
    img0_on = new Image(121,38);
    img0_on.src="images/home2.gif";
    img0_off = new Image(121,38);
    img0_off.src="images/home.gif";
      
    img1_on = new Image(68,38);
    img1_on.src="images/about2.gif";
    img1_off = new Image(69,38);
    img1_off.src="images/about.gif";
    
    img2_on = new Image(112,50);
    img2_on.src="images/services2.gif";
    img2_off = new Image(112,50);
    img2_off.src="images/services.gif";
     
    img3_on = new Image(94,33);
    img3_on.src="images/contact2.gif";
    img3_off = new Image(94,33);
    img3_off.src="images/contact.gif"; 
    
    function over_image(parm_name)
        {
            document[parm_name].src = eval(parm_name 
    
    + "_on.src");
        }
    function off_image(parm_name)
        {
            document[parm_name].src = eval(parm_name 
    
    + "_off.src");
        }
    // --End Hiding Here -->
     </script>
    
    <link rel="stylesheet" type="text/css" 
    
    href="style.css" />
        </head>
    
    
    <div id="top">
    <div class="img"><a href="index4.html"><img 
    
    src="images/logo.gif" border="0" width="40%" 
    
    height="40%" /></a></div>
    </div>
    
    
    <div id="tabs">
    <img src="images/home2.gif" border="0" 
    
    name="img0" width="85%" height="85%"><p>
    <a href="about.html"  onmouseover="over_image
    
    ('img1');" onmouseout="off_image('img1')"> <img 
    
    src="images/about.gif" border="0" name="img1" 
    
    width="50%" height="50%"></a><p>
    <a href="services.html" onmouseover="over_image
    
    ('img2');" onmouseout="off_image('img2')"> <img 
    
    src="images/services.gif" border="0" name="img2" 
    
    width="80%" height="80%"></a><p>
    <a href="contact.html" onmouseover="over_image
    
    ('img3');" onmouseout="off_image('img3')"> <img 
    
    src="images/contact.gif" border="0" name="img3" 
    
    width="65%" height="65%"></a><br><p>
    </div>
    
    <div class="sidebar"><img 
    
    src="images/sidebar.gif" width="62%" 
    
    height="62%" /></div>
    </div>
    
    <div id="content">
    <p>
    Div I want to scroll.
    </div>
    
    
    <div id="puzzle">
    <a href="services.html"><img 
    
    src="images/puzzle.gif" width="40%" height="40%" 
    
    border="0" /></a></div>
    
    <div id="footer">
    <div class="img2"><img src="images/address.gif" 
    
    width="90%" height="90%" /></div>
    </div>
    
        </body>
    </html>

    Thanks!

  • #2
    New Coder
    Join Date
    Aug 2011
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Hi,

    Not 100% sure what you are asking.. Not sure what you meant by "when the position is set to relative". Also I couldn't really reproduce the page to see what it's doing properly.

    If you want make the scrolling available use:
    Code:
    #content { 
      position:relative;
      float:right;
      top:30%;
      margin-bottom:20%;
      width: 35%;
      height: auto;
      background-color:#fff; 
      padding:.5em;
      overflow-x:hidden;
      overflow-y:scroll;    }
    (you'll need to specify a height to use this properly I think.)

    With the height specified as a percentage you can try adding:
    Code:
    html {
      height:100%;}
    
    body {
      margin-left:auto;
      margin-right:15%;
      border:0;
      padding:0;
      height:100%; 
      max-height:100%; 
      background:#fff;
      width:90%;
      min-width:640px;
      font-family:tahoma, arial, sans-serif; 
      font-size:78%;
      line-height: 130%;
      overflow:hidden;
      height:100%  }
    
    #content { 
      position:relative;
      float:right;
      top:30%;
      margin-bottom:20%;
      width: 35%;
      height: 20%;/*or the percent you want here*/
      background-color:#fff; 
      padding:.5em;
      overflow-x:hidden;
      overflow-y:scroll;  }
    Although I'm not sure if this can do.. other things.. to mess up some or the rest of the positioning on your page. Make sure you check that if you're going to use this.

    Hope this helps.
    Last edited by chaule; 09-06-2011 at 06:19 AM.

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    From what I could figure out, the div only scrolls on one of two conditions: 1) if its height is specified in pixels; 2) if its position is set to absolute. Otherwise it just extends itself past the bottom of the page.
    Both options will ruin the page's ability to show up on different screen sizes, so I'd like to avoid them if possible. I tried setting a percentage height for the html, like you suggested, but it hasn't worked out.

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Hmm did you set the body height to 100% aswell? (I just noticed a semicolon missing in my code) I got it working for a very simplified version of your page (where I basically removed all of the content in the scripts/mark up except for the id="content" div and then overfilled the div with text.).

    I didnt take that close a look at the rest of your code so there may be something there stopping it but try it simplified and it should work while keeping the position set as relative. Here's the simplified version, throw this into your browser to check that it works:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
    
    Transitional//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
    
    transitional.dtd">
    <html dir="rtl">
        <head>
    
    <style>
    html {
      height:100%;
    }
    
    body {
      margin-left:auto;
      margin-right:15%;
      border:0;
      padding:0;
      height:100%; 
      max-height:100%; 
      background:#fff;
      width:90%;
      min-width:640px;
      font-family:tahoma, arial, sans-serif; 
      font-size:78%;
      line-height: 130%;
      overflow:hidden;
      height:100%;  }
    
    a:link
    {
    color:#97268F;
    text-decoration:none;
    }
    
    a:visited
    {
    color:#97268F;
    text-decoration:none;
    }
    
    a:hover
    {
    color:#C176B1;
    text-decoration:none;
    }
    
    a:active
    {
    color:#97268F;
    text-decoration:none;
    }
    
    #top
    {
    padding: .5em;
    right:20%;
    }
    
    
    #tabs
    {
    position:relative;
    float:right;
    top:30%;
    } 
    
    .sidebar
    {
    position:relative;
    float:right;
    padding: .5em;
    top:30%;
    }
    
    
    #content { position:relative;
    float:right;
    top:30%;
    margin-bottom:20%;
    width: 35%;
    height: 20%;
    background-color:#fff; 
    padding:.5em;
    overflow-x:hidden;
    overflow-y:scroll;               
                }
    
    #puzzle
    {
    position: relative;
    float:right;
    margin-right:60%;
    bottom:20%;
    }
    
    
    #footer
    {
    clear: both;
    position:absolute;
    background-color:#fff;
    margin:0;
    padding: .3em;
    bottom:2%;
    }
    
    
    
    .img
    {
    position: relative;
    right: 8%
    }
    
    .img2
    {
    position: relative;
    right: 55%
    }
    
    
    ul
    {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    text-align: right;
    }
    
    li
    {
    background-image: url(images/bullet.gif);
    background-repeat: no-repeat;
    background-position: 100% .4em;
    padding-right: 1em;
    }
    </style>
        </head>
    
    <body>
    <div id="content">
    <p>
    Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.Div I want to scroll.
    </div>
    
    
        </body>
    </html>
    I can only view it in IE8 right now so try it in your browser but I dont think that should be too much of an issue.


    **Edit: You might need to throw in a body {....overflow-y:scroll; }.. since it seems you have content above this div which can push it right off the bottom of the page out of sight (I notice you already have an overflow:hidden; in there, so you may need to amend this or just put it at the end to override.. )
    Last edited by chaule; 09-06-2011 at 08:03 AM.

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    16
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah, it works great now. Thanks!


  •  

    Posting Permissions

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