Forum Moderators: not2easy
+--------+
¦ topbar ¦
+---+----+
¦ n ¦ c
¦ a ¦ o
¦ v ¦ n
+---+ t
______e
______n
______t
Both the topbar and the navbar should be fixed, only
the text scrolling. Now my problem is that whatever
I've tried, it either made the topbar scroll when
scrolling the content or it made the content be
displayed over the topbar, so my question is
whether there's a possibility to make the content
disappear under the topbar, making it look like this after having scrolled:
+--------+
¦ topbar ¦
+---+----+
¦ n ¦ n
¦ a ¦ t
¦ v ¦ e
+---+ n
______t
+-----c--+
¦ topbor ¦
+---+-n--+
¦ n ¦ n
¦ a ¦ t
¦ v ¦ e
+---+ n
______t
#topbar, #nav { z-index: 10; }
Any ideas?
<html>
<head>
<style type="text/css">
html, body {margin:0; padding:0}
#header {width:800px; height:200px; border:1px solid; }
#container {position:absolute; width:800px; top:201px; left:0}
#left {float:left; width:250px; height:500px; border:1px solid}
#right {float:left; width:546px; height:500px; border:1px solid}
</style>
</head>
<body>
<div id="header">
This is the header
</div>
<div id="container">
<div id="left">
this is the left
</div>
<div id="right">
and this is the right
</div>
</div>
</body>
</html>
position: fixed;Unless you implement the hack by Stu Nicholls (you can google it)...
Could you post the relevant parts of your code?
Well... at the moment it looks like this:
<!-- ... -->
<style type="text/css">
body
{
padding-left: 11em;
font-family: sans-serif;
font-size: 1em;
}
#topbar
{
positon: fixed;
margin-bottom: 5em;
width: 80%;
text-align: center;
border: thin solid #000;
}
#navbar
{
position: fixed;
list-style-type: none;
padding-top: 6em;
width: 9em;
top: 2em;
left: 1em;
}
</style>
</head>
<body>
<div id="topbar">
this is the topbar
</div>
<ul id="navbar">
<li>home</li>
<li>downloads</li>
<li>...</li>
</ul>
<!-- content begin -->
Blah blah blah
<!-- content end -->
</body>
</html>
Now, I've also tried putting the content in an
extra <div id="content">, renaming the "body" style
to #content, but again, no difference.
Just a quick note, you're aware position: fixed; doesn't work in IE 6 right?
Well, yeah. But I could implement a PHP switch for IE
to make it
position: absolute, which
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>position:fixed test</title>
<style type="text/css">
body {
padding: 50px 0 0 200px;
}
#top {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: red;
}
#left {
position: fixed;
top: 50px;
left: 0;
width: 200px;
background-color: green;
}
</style>
<body>
<div id="top">TEST TOP</div>
<div id="left">TEST LEFT</div>
<p>Content text goes here etc etc</p>
</body>
</html>
... the problem is an illusion and everything is working correctly.
You're right... absolutely right! I've set the background
color to #000 and everything works as expected!
Thanks to everybody!
Thanks again!
