Layer problems

batch

02-11-2005, 12:14 AM

Here's the code:

<style type="text/css">
#lifecontainer {
position:relative;
background-image: url(images/bg_paper.gif);
background-repeat: repeat;
width:700px;
z-index:0;
}

#blog {
position:relative;
background-image: url(images/header_latest.gif);
background-repeat: no-repeat;
width:350px;
padding-top:52;
z-index:1;
}
#sidebar {
position:relative;
background-image: url(images/bg_sidebar.gif);
background-repeat: repeat;
top:0;
left: 375px;
width:213px;
z-index:2;
}
</style>
</head>

<body>
<div id="lifecontainer">
<div id="blog">TEST</div>
<div id="sidebar">
<div id="profile">TEST</div>
</div>
</div>
</body>

Here's the problem:

Even though the layer SIDEBAR is on it's own Z-level, it is getting pushed down by the BLOG layer. I want BLOG, and SIDEBAR to sit within LIFECONTAINER. BLOG on the left and SIDEBAR to the right, and both of them at the very top. The only way I have been able to achieve this so far is to absolute position the SIDEBAR layer. but that causes problems as I want LIFECONTAINER to have a repeating background image that will sit under all the layers and contain them, stretching verticaly as needed. SO aboslute positioning of SIDEBAR results in it sitting outside of the LIFECONTAINER layer. I don't ever remember an instance of DIV's acting like inline elements?

thanks in advance folks...

rmedek

02-11-2005, 12:31 AM

How about a screenshot of what you want this to look like?

nite1x

02-11-2005, 12:31 AM

If you assign float:left; to #blog and float:right; to #sidebar.

If you need more help, check out this article http://www.positioniseverything.net/articles/float-theory.html

Hope this helps

Nite

batch

02-11-2005, 07:37 PM

here is an image explaining the problem...

IMAGE (http://s92798080.onlinehome.us/layerproblem.jpg)

Float works, so does Abosolute positioning of SIDEBAR. But, both those solutions make the layer sit outside of LIFECONTAINER, so the BG image arrtibuted to LIFECONTAINER doesn't stretch with the layers it contains.

There must be something really simple I am missing here, I don't recall layers ever acting like this.

thanks for the comments so far, I am hoping to get this figured out by the end of the day! so I can finally move on, getting stuck on silly stuff like this is sooooo annoying.

rmedek

02-11-2005, 08:53 PM

Well, for one, forget this "layers" thing. There is no such thing (at least in the way you are implying), except for in Photoshop. "Layers" is some holdover from the NS 4 days, and it makes people think divs can just go anywhere they want, like in Photoshop, when in fact they have a strict set of rules.

Z-index isn't going to help you in this case... it only applies to when two or more divs are positioned absolutely or out of flow. Right now you are using relative positioning, which keeps the elements IN flow.

In other words, the "sidebar" section is a block level element sitting exactly where you told it to: 375px to the left of where it would normally be in the document flow. It's pushed down because it would normally come after the first block level element (#blog). You can adjust it by using "top: -100px" (or whatever the height of the blog section is), but really you should be using floats for this one, and checking out that link nite1x provided. This one might help also:

http://css.maxdesign.com.au/floatutorial/

BTW, remember to place your code in [ code ] tags for us to read it easier, and, more importantly, your screenshot shows that you have a link to this... why not just link to the page? It's so much easier... don't be shy :)

batch

02-11-2005, 10:08 PM

rmedek, nope it's just a dreamweaver preview, it's not hosted anywhere yet.

OK, I will learn the float thing, as the BLOG div will never be a determined height, it will stretch with the size of the content that fills it (from blogger), so negative padding won't work.

Also, I might answer the question myself once I go read the float tutorial, but the problem with using floats, is it brings my divs out of the div called LIFECONTAINER, which covers everything with a BG image....

thanks for the tip on pasting code in the forum, will do so in the future.

batch

02-11-2005, 10:27 PM

Nevemind, it's all good!

The LIFECONTAINER is stretching and filling the BG with the specified image.

So I am on my way!

thanks to everyone that took the time to respond....

rmedek

02-11-2005, 10:30 PM

glad you got it working :)