Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 4 123 ... LastLast
Results 1 to 15 of 52
  1. #1
    New Coder
    Join Date
    Aug 2005
    Location
    Nanuet, New York
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Layout Trouble - Layers

    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.

  • #2
    New Coder
    Join Date
    Aug 2005
    Location
    Nanuet, New York
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    I want patience, and I want it now!

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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...
    Last edited by rmedek; 08-06-2005 at 10:45 PM.

  • #4
    New Coder
    Join Date
    Aug 2005
    Location
    Nanuet, New York
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I'll try that.
    I want patience, and I want it now!

  • #5
    New Coder
    Join Date
    Aug 2005
    Location
    Nanuet, New York
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    I want patience, and I want it now!

  • #6
    New Coder
    Join Date
    Aug 2005
    Location
    Nanuet, New York
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    I want patience, and I want it now!

  • #7
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Fixed for me... you're using -

    bgproperties="fixed"

    But really you should use CSS -

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

  • #8
    New Coder
    Join Date
    Aug 2005
    Location
    Nanuet, New York
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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-)
    I want patience, and I want it now!

  • #9
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That will make the background image stay put...

  • #10
    New Coder
    Join Date
    Aug 2005
    Location
    Nanuet, New York
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...
    I want patience, and I want it now!

  • #11
    New Coder
    Join Date
    Aug 2005
    Location
    Nanuet, New York
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 want patience, and I want it now!

  • #12
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.

  • #13
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.

  • #14
    New Coder
    Join Date
    Jun 2005
    Posts
    40
    Thanks
    0
    Thanked 2 Times in 2 Posts
    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.

  • #15
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    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.


  •  
    Page 1 of 4 123 ... LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •