homepage Welcome to WebmasterWorld Guest from 54.145.172.149
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
css layout question
sebbothebutcher

10+ Year Member



 
Msg#: 3243238 posted 5:00 pm on Feb 5, 2007 (gmt 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

?

 

Robin_reala

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3243238 posted 6:00 pm on Feb 5, 2007 (gmt 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; }

sebbothebutcher

10+ Year Member



 
Msg#: 3243238 posted 6:44 pm on Feb 5, 2007 (gmt 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?

mep00

10+ Year Member



 
Msg#: 3243238 posted 10:22 pm on Feb 5, 2007 (gmt 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?

coho75

10+ Year Member



 
Msg#: 3243238 posted 10:47 pm on Feb 5, 2007 (gmt 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>

Setek

5+ Year Member



 
Msg#: 3243238 posted 12:56 am on Feb 6, 2007 (gmt 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)...

sebbothebutcher

10+ Year Member



 
Msg#: 3243238 posted 11:59 am on Feb 6, 2007 (gmt 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.

Robin_reala

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3243238 posted 12:54 pm on Feb 6, 2007 (gmt 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>

mep00

10+ Year Member



 
Msg#: 3243238 posted 12:59 pm on Feb 6, 2007 (gmt 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.

Robin_reala

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3243238 posted 1:06 pm on Feb 6, 2007 (gmt 0)

Ah, good call mep00. That’s probably it :)

sebbothebutcher

10+ Year Member



 
Msg#: 3243238 posted 1:16 pm on Feb 6, 2007 (gmt 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!

mep00

10+ Year Member



 
Msg#: 3243238 posted 1:21 pm on Feb 6, 2007 (gmt 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?

sebbothebutcher

10+ Year Member



 
Msg#: 3243238 posted 1:36 pm on Feb 6, 2007 (gmt 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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved