PDA

View Full Version : css scrollbars problem


asurademon
06-11-2007, 11:11 PM
So I'm a newbie with css, and have finally gotten my page to mostly look how I want it to (at least in firefox anyways). However individual css frames scroll, and I want the entire page to all scroll together. I've seen website layouts that look like mine (well sort of), but the entire page scrolls instead of individual sections, so there must be a way. Can someone help me?

Here's the link to the site http://ashenidol.freeservers.com/ashencsslayout.html

_Aerospace_Eng_
06-11-2007, 11:38 PM
If you don't want scrollbars on some of your elements then don't use overflow:auto; this creates a scrollbar on the element if the content inside of it exceeds the height specified. You are also going to need to slice up your layout to get the effect you want.

asurademon
06-11-2007, 11:40 PM
thanks, but I all ready knew that much. What I want to accomplish is for the entire page to scroll together, not just individual sections (I know how to get those to scroll or not). I want all elements to scroll with a single scrollbar.

_Aerospace_Eng_
06-11-2007, 11:41 PM
You need to slice up your layout. Don't make everything position:fixed or position:absolute. IE6 doesn't support position:fixed btw.

asurademon
06-11-2007, 11:44 PM
thanks. Are there some examples of sites I could look at just to get an idea of how to achieve what I want? I've tried changing things to position relative before, and it totally ruins the layout, so I'm guessing that's not what you mean.\


Edit: nevermind, I think I figured it out...I hope

_Aerospace_Eng_
06-11-2007, 11:55 PM
Here is a start
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
background:#000;
color:#FFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.9em;
}
#container {
min-height:900px;
}
#header {
width:800px;
background:url(http://ashenidol.freeservers.com/cogcss2.gif) no-repeat;
height:153px;
}
#nav {
height:747px;
width:179px;
background:url(http://ashenidol.freeservers.com/cogcss2.gif) 0 -153px no-repeat;
float:left;
}
#content {
margin-left:179px;
}
#content p {
margin:0;
padding:10px;
text-align:justify;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
<!--[if lte IE 6]>
#nav {
margin-right:-3px;
}
#content {
margin-left:0;
height:1%;
}
<![endif]-->
</head>
<body>
<div id="container" class="clearfix">
<div id="header"></div>
<div id="nav"></div>
<div id="content">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In lacus mi, laoreet quis, mattis in, sodales at, massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla lacinia felis ut ligula. Aenean orci. Morbi sollicitudin purus ut lorem. Donec eget tortor quis magna venenatis tempor. Quisque nisl pede, aliquam non, dapibus non, varius nec, ipsum. Curabitur sit amet arcu eget pede auctor venenatis. Fusce porta nunc nec felis. Aliquam dignissim, quam pretium condimentum laoreet, massa orci ultricies arcu, nec bibendum sem neque luctus sapien. </p>
<p> In quis lorem. In hac habitasse platea dictumst. Fusce nonummy. Vestibulum sed ipsum. Etiam dictum velit et ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Etiam aliquet. Phasellus vitae elit. Etiam rutrum, mauris facilisis aliquam malesuada, felis sem auctor orci, sed interdum purus arcu nec eros. Vivamus quis nisi a tortor fringilla fermentum. Vestibulum ut orci a ante lobortis condimentum. Nullam sit amet elit porta diam cursus hendrerit. </p>
<p> Ut pulvinar imperdiet nisl. Donec odio ante, tempor a, scelerisque et, dictum sed, ipsum. In hac habitasse platea dictumst. Nunc tempus aliquam lorem. Donec dapibus dui vitae velit. Nullam ultricies viverra quam. Curabitur sit amet erat vitae elit bibendum laoreet. Curabitur non arcu vitae eros auctor tristique. Nunc rutrum, nisl ac fermentum vehicula, justo tortor ultricies pede, vel egestas risus nisi ut enim. Vivamus sit amet nisl eu diam mollis sodales. Phasellus sed dolor quis erat euismod malesuada. Duis imperdiet turpis tristique odio blandit commodo. Aliquam porttitor ornare lectus. </p>
<p> Mauris tempor. Maecenas facilisis. Integer nulla velit, pellentesque nec, porta id, ullamcorper eget, mi. Nullam felis. Nulla odio felis, sollicitudin quis, feugiat a, malesuada ut, urna. Integer eget arcu quis ligula ullamcorper tempus. Donec lacinia varius metus. Proin tellus. Donec at eros. Vivamus porttitor. Sed odio. Suspendisse tempor velit. Duis ipsum arcu, vulputate vel, laoreet non, commodo eget, mauris. Sed accumsan varius leo. Etiam sit amet erat vulputate felis iaculis sollicitudin. Morbi dolor neque, porta non, nonummy at, lacinia in, velit. Aliquam lectus est, iaculis ac, feugiat nec, vehicula sit amet, erat. Vivamus id nibh eget diam dapibus ornare. Vestibulum a diam. </p>
</div>
</div>
</body>
</html>

Good luck.