Thu, 2006-04-27 19:10
Hi,
I am trying to build a layout using css.
I did use absolute postitioning because the div's would fit perfectly in the different brouwsers. (i'm not a css goeroe, jus beginning)
With a little help I got the container to center in the middle of the page.
Here's a link of the page:http://www.ssgi.nl/test/index.html
The problem is that the scrollbar of the content div doesn't stops at the bottem of the browser.
In FF it does stop at the bottom of the browser.
Is there someone who could help me pleas?
Here's my CSS:
/* CSS Document */
html, body {
margin: 0;
padding: 0;
overflow-y:hidden;
height: 100%;
}
#container {
position: relative;
width: 750px;
margin-left: auto;
margin-right: auto;
height: 100%;
padding-top: 291px;
-moz-box-sizing: padding-box;
box-sizing: padding-box;
}
#topanimation {
background: #5a5a5a;
position: absolute;
top: 0px;
left: 150px;
width: 452px;
height: 250px;
text-align:center;
}
#navigation {
background: #aaa;
position: absolute;
top: 250px;
left: 0px;
width: 150px;
}
#contenttop {
background: #FF33CC;
position: absolute;
top: 250px;
left: 150px;
height: 40px;
width: 450px;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
}
#content {
background: #5a5a5a;
margin-left: 150px;
width: 450px;
border-left: 1px solid #000;
border-right: 1px solid #000;
overflow-y:auto;
overflow-x:none;
height: 100%;
}
#rightanimation {
background: #ccc;
position: absolute;
top: 250px;
left: 602px;
width: 148px;
border-top: 1px solid #000;
}
Thu, 2006-04-27 21:05
#1
[SOLVED]Scrollbar problem in IE not in FF
There is likely not a worse way to lay out a page than all absolute. To get you by, though do this;
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
position: relative;
width: 760px;
height: 100%;
margin: 0 auto;
}cheers,
gary
Thu, 2006-04-27 22:12
#2
[SOLVED]Scrollbar problem in IE not in FF
Hi,
Thanks, but if i do that the top button of the scrollbar dissapears.
see http://www.ssgi.nl/test/index2.html
Why is it worse too use absolute?
I did use it because then i could align all the div's perfect.
Is there an other way to make this layout then?
Thanks
Fri, 2006-04-28 06:28
#3
[SOLVED]Scrollbar problem in IE not in FF
AP layouts are brittle; they break easily should content change. The biggest problem with AP elements is that they are completely out of the flow. They have no awareness of other elements, and other elements are oblivious to them. There's no way to force awareness.
Here's a simple version of your page using floats to provide a fixed width page that will accept content changes with little chance of breakage.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 1st July 2003), see www.w3.org">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
body {
font: 100% verdana sans-serif;
}
p, h1 {
font-size: 1em;
}
#container {
background-color: #5a5a5a;
position: relative;
width: 750px;
margin: 0 auto;
overflow: hidden;
padding-bottom: 5px;
}
#topanimation {
border-bottom: 1px solid #000;
text-align:center;
}
#topanimation img {
vertical-align: bottom;
}
#navigation {
border-right: 1px solid #000;
float: left;
width: 140px;
padding: 1px 5px;
}
#content {
margin-left: 150px;
margin-right: 148px;
padding: 1px 5px;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
#rightanimation {
width: 138px;
float: right;
padding: 1px 5px;
border-left: 1px solid #000;
}
</style>
</head>
<body>
<div id="container">
<div id="topanimation">
<img src="test_files/top.jpg" alt="top">
</div>
<div id="navigation">
<ul>
<li>profiel
</li>
<li>impressie
</li>
<li>beursagenda
</li>
<li>contact
</li>
<li>online-store
</li>
<li>item1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>shopping cart
</li>
<li>logged in?
</li>
<li>log out
</li>
</ul>
</div>
<div id="rightanimation">
<p>
rightanimation
</p>
</div>
<div id="content">
<h1>
content tekst
</h1>content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content
</div>
</div>
</body>
</html>
Fri, 2006-04-28 07:26
#4
[SOLVED]Scrollbar problem in IE not in FF
Hi Thank you very much for your nice input your version works like a charm (':D').
The thing is that I hoped to have a scrollbar in the content div so somenone could scroll this div only.
And that this div would strech to the bottom.
When i place this nothing happens:
#content {
margin-left: 150px;
margin-right: 148px;
padding: 1px 5px;
border-left: 1px solid #000;
border-right: 1px solid #000;
overflow: auto;
}
The reason why I placed the content tekst in a sepparate div is that when you would scroll this text would always be vissible.
Is here a work arround for also?
Thanks.
Fri, 2006-04-28 07:57
#5
[SOLVED]Scrollbar problem in IE not in FF
There is likely a way to do it, and I could probably work something out. I won't, though, because it is generally a bad idea to have the odd scroll bar and there is likely no advantage to having some bit of text always visible, which means it would be a waste of my time. 
The web is not print. You have no control over the user's browser, so it's best not to mess with expected behavior.
cheers,
gary
Fri, 2006-04-28 08:07
#6
[SOLVED]Scrollbar problem in IE not in FF
Hi,
Oke, thanks again for your input
Fri, 2006-04-28 09:16
#7
[SOLVED]Scrollbar problem in IE not in FF
Hi Just 1 final question:
#navigation {
border-right: 1px solid #000;
float: left;
width: 140px;
padding: 1px 5px;
}
#content {
margin-left: 150px;
margin-right: 148px;
padding: 1px 5px;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
}
#rightanimation {
width: 138px;
float: right;
padding: 1px 5px;
border-left: 1px solid #000;
border-top: 1px solid #000;
}
I don't understand why you used width: 140px; in #navigation
And width: 138px; in #rightanimation
Because #navigation is in real 150px and and #righanimation is in real 148px these values show in the browser.
Can you tell me please why you did take off 10px?
Thanks
Fri, 2006-04-28 09:40
#8
[SOLVED]Scrollbar problem in IE not in FF
Notice the padding. That adds 10px to the gross width.
cheers,
gary