...

View Full Version : Making content scroll in liquid/relative divs



pandoradora
09-05-2011, 02:24 PM
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:


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:


<!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!

chaule
09-06-2011, 06:16 AM
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:

#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:

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.

pandoradora
09-06-2011, 07:18 AM
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.

chaule
09-06-2011, 07:55 AM
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:


<!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.. )

pandoradora
09-06-2011, 07:59 AM
Yeah, it works great now. Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum