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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Possible z-index problem.

    I've been working on this design for about maybe 3-6 hours in total (PSD and HTML/CSS). For some reason the product sider isn't working (a live demo of that can be found at http://vortexservers.com)

    The website design, hosted is located at http://vortexservers.com/bin/site

    Help to why this could be occurring would be greatly appreciated.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Code:
    div#graphics {
        background-image: url("./images/graphics2.png");
        background-repeat: repeat-x;
        height: 516px;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1;
    }
    There's your problem. Get rid of this and the slider works - although you'll need to rework your logo graphics.

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That z-index is there to make the graphics.png below the main top.png (grey bar, and the logo bg).
    Is there a possibility to avoid taking out the z-index?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It's the negative z-index that's the problem. Try:

    Code:
    div#graphics {
        background-image: url("./images/graphics2.png");
        background-repeat: repeat-x;
        height: 516px;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1;
    }
    
    div#inner {
        display: block;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        width: 923px;
        z-index: 2;
    }

  • Users who have thanked SB65 for this post:

    Jack. (09-19-2011)

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Alright, thanks for that, lesson learned. The top area has gone walk abouts now due to the z-index for graphics being above it. I have tried setting the z-indexes for the affected areas go a positive integer but no luck.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    That's because the graphic is coming from the background image on #header, which contains #graphics and #inner - so you can't make this appear on top of them.

    I'd suggest creating a further div to hold the background image and placing that absolutely within #header, with a z-index higher than that of #graphics and lower than that of #inner - I think that should do the trick.


    EDIT: Actually, this should do it,plus remove the css from #header.

    Code:
    #new_element{
        background-image: url("./images/top-bg.png");
        background-repeat: repeat-x;
        height: 119px;
        position: absolute;
        top:0;
       left:0;
        width: 100%;
        z-index: 2;
    }
    Last edited by SB65; 09-19-2011 at 03:06 PM.

  • Users who have thanked SB65 for this post:

    Jack. (09-19-2011)


  •  

    Posting Permissions

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