Layout Trouble - Layers

krazykikikatt · 08-06-2005, 08:31 PM

Okay, I am attempting to make my first-ever layout, (all by myself!! I'm so proud.) but, seeing as this is my first real attempt, I've run into some problems. My latest seems pretty simple, yet I can't seem to find a solution...

The page in progress is here.

Currently I have made divs as a css layout for my content, and have a fixed background.

The problem: I would like it if my content didn't go over the top part of the background; the moon and the brushes/text I plan to add. Now I don't know anything about images and stuff, but my first thought was to cut the image, and make the top part on another layer, so it's not part of the background anymore, and the layers I already have will scroll under it, and not over. But in the css layout I'm using, apparently all layers are on the same... what would I call it, plane?

I don't know if I'm at all on the right track with this, so I'd appreciate your thoughts and suggestions. Thanks.

krazykikikatt · 08-06-2005, 08:34 PM

By the way, if you posted on my thread last night, you'll see that I finally managed the opacity/transparency problem.

Thanks for the help.

rmedek · 08-06-2005, 09:42 PM

Quote:

Now I don't know anything about images and stuff, but my first thought was to cut the image, and make the top part on another layer, so it's not part of the background anymore, and the layers I already have will scroll under it, and not over. But in the css layout I'm using, apparently all layers are on the same... what would I call it, plane?

That's one way to try it. First, you could move the divs holding your content down a little bit using "top" since they're absolutely positioned:

Code:

#menu, #content {
   top: 100px;
   }

And then you could place an image on the top of the screen using position:fixed, z-index, and slightly overlapping the content. I don't know if this is the way I would do it if I was coding this from scratch, but I think it could work for you.

Hope this helps...

krazykikikatt · 08-06-2005, 09:45 PM

Thanks, I'll try that.

krazykikikatt · 08-06-2005, 09:49 PM

Oh yes, thank you! The z-index was exactly what I was looking for, I'd completely forgotten about it. This should work, I think...

krazykikikatt · 08-06-2005, 10:07 PM

The z-index seems to be working, but... The image is still moving when I scroll, I guess because it is still part of my body... how do I fix that?

mark87 · 08-06-2005, 10:17 PM

Fixed for me... you're using -

bgproperties="fixed"

But really you should use CSS -

body { background: url(images/background1.jpg) fixed }

krazykikikatt · 08-06-2005, 10:19 PM

Yeah, I was just about to do that. I don't think it'll make my image stay put, though. Can I absolute position an image in my css...? (I REALLY need to catch up on this stuff again... -sweatdrop-)

mark87 · 08-06-2005, 10:42 PM

That will make the background image stay put...

krazykikikatt · 08-06-2005, 10:45 PM

Lol yes, sorry, I haven't had problems with that, but the other image won't stay put... Well there isn't one on the page I've linked to, I haven't overwritten it yet, but I'd like my content to scroll under the top part, and the easiest way to do that seems to be to place an image at the top that would be stacked above the others using z-index, but I can't seem to get the image I want to use to stay put; since it's part of the body, it wants to scroll with it...

krazykikikatt · 08-06-2005, 10:50 PM

Here's an idea... could I, in fact, instead of just having a fixed background, divide the background up into several images and position them with z-index... So that the parts that I want to still be the background would be behind my content still.. and the one image that I want the content to scroll under would be stacked correspondingly..?

rmedek · 08-06-2005, 11:46 PM

Quote:

Originally Posted by krazykikikatt

Here's an idea... could I, in fact, instead of just having a fixed background, divide the background up into several images and position them with z-index... So that the parts that I want to still be the background would be behind my content still.. and the one image that I want the content to scroll under would be stacked correspondingly..?

I dunno... it's an idea but there seems like there should be a simpler way. I'll see if I can drum up an example for you.

BTW... keep in mind that Internet Explorer chokes on fixed positioning, so without lots of extra markup it's not going to be pretty.

rmedek · 08-07-2005, 12:10 AM

Here... see if this give you any ideas:

http://richardmedek.com/temp/example17.htm

Works (so far) in all standards-compliant browsers. Hope this helps, or at least gives you an idea or two.

kiwibrit · 08-07-2005, 12:14 AM

Quote:

Originally Posted by rmedek

.........BTW... keep in mind that Internet Explorer chokes on fixed positioning, so without lots of extra markup it's not going to be pretty.

Care to expand on that? I've used fixed positioning here and there. Seems OK in IE.

rmedek · 08-07-2005, 12:20 AM

Quote:

Originally Posted by kiwibrit

Care to expand on that? I've used fixed positioning here and there. Seems OK in IE.

Are you sure? Try this in Firefox or Opera, and you'll see what it's supposed to do. I am using IE on a Virtual PC, so maybe I'm mistaken, but I thought IE6 didn't support fixed positioning.