Welcome to WebmasterWorld Guest from 50.17.117.221

Forum Moderators: not2easy

Message Too Old, No Replies

css layout question

     
5:00 pm on Feb 5, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2004
posts:112
votes: 0


I've been looking around for quite some time now but
I couldn't figure out how to do this:
I want to have a page with the following design:

+--------+
¦ topbar ¦
+---+----+
¦ n ¦ c
¦ a ¦ o
¦ v ¦ n
+---+ t
______e
______n
______t


Note: Ignore those underscores, I just couldn't find
any method to preserve leading spaces.

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

instead of

+-----c--+
¦ topbor ¦
+---+-n--+
¦ n ¦ n
¦ a ¦ t
¦ v ¦ e
+---+ n
______t

?
6:00 pm on Feb 5, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


If you're using position:fixed to position the topbar and nav then you can simply use the CSS z-index property to raise them above the (presumably unpositioned) content:

#topbar, #nav { z-index: 10; }
6:44 pm on Feb 5, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2004
posts:112
votes: 0


Hmm... I've just tried to do that but it didn't seem to
change anything...
The navbar works fine (content is padded on the left),
but that topbar and the content still overlap.
I've also tried to put the content in a <div> explicitly
setting the z-index to a lower value but again, no difference.

Any ideas?

10:22 pm on Feb 5, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Dec 25, 2003
posts: 269
votes: 0


The z-index should have worked, unless you're applying it to the wrong elements; z-index only effects elements which are positioned relative to the same container. Could you post the relevent parts of your code?
10:47 pm on Feb 5, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Oct 15, 2003
posts:276
votes: 0


Something like this should work for you. I haven't really tested it in different browsers, but it should get you going. Change the widths and heights to suit your needs.

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

12:56 am on Feb 6, 2007 (gmt 0)

Preferred Member

10+ Year Member

joined:Feb 28, 2005
posts: 646
votes: 0


Just a quick note, you're aware
position: fixed;
doesn't work in IE 6 right?

Unless you implement the hack by Stu Nicholls (you can google it)...

11:59 am on Feb 6, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2004
posts:112
votes: 0



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
looks OK, but I still prefer a static menu and
scrolling content...
And there's still IE7, Firefox, Safari, etc.
12:54 pm on Feb 6, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


And z-index definitely doesn‘t work? Is this in all browsers? The following code works (even with specifying a z-index) for me in Firefox (trunk build), Opera 9 and Safari 2:

<!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>
12:59 pm on Feb 6, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Dec 25, 2003
posts:269
votes: 0


Based on what you have posted, and my own testing, I'm assuming that the portion of #topbar where the content crosses either has text or is empty. If that's the case, then the problem is an illusion and everything is working correctly. In other words, the content isn't crossing over #topbar; rather, you're seeing it through #topbar. Give #topbar a background color (anything except "transparent") and everthing should be fine.
1:06 pm on Feb 6, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


Ah, good call mep00. That’s probably it :)
1:16 pm on Feb 6, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2004
posts:112
votes: 0


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

1:21 pm on Feb 6, 2007 (gmt 0)

Full Member

10+ Year Member

joined:Dec 25, 2003
posts:269
votes: 0


There's a very good reason why it's standard debugging technique to assign brightly colored, easily distinguishable borders/outlines and/or backgrounds the all relevant elements. How else can you tell where one begins and another ends?
1:36 pm on Feb 6, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Apr 12, 2004
posts:112
votes: 0


Well... I'm not doing this on a professional level.
It's only for my own new homepage but nevertheless, I'll
keep that in mind!

Thanks again!