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.
Results 1 to 8 of 8

Thread: Layer problems

  1. #1
    New Coder
    Join Date
    Feb 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Layer problems

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

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    How about a screenshot of what you want this to look like?

  • #3
    New Coder
    Join Date
    Dec 2004
    Location
    Ontario, Canada
    Posts
    32
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Use float:left or float:right

    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/...at-theory.html

    Hope this helps


    Nite

  • #4
    New Coder
    Join Date
    Feb 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    here is an image explaining the problem...

    IMAGE

    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.

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

  • #6
    New Coder
    Join Date
    Feb 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    New Coder
    Join Date
    Feb 2005
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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....

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    glad you got it working


  •  

    Posting Permissions

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