1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Amazon Deal Widget Help

Discussion in 'Web Design' started by Cas87, Apr 23, 2012.

  1. Cas87

    Cas87 Regular Member

    Joined:
    Mar 5, 2012
    Messages:
    286
    Likes Received:
    131
    Location:
    England
    So, on my website i have a fixed navigation at the top...i also have the Amazon Deal Widget further down within a Div.. when scrolling down however, the Amazon Deal Widget appears in front of my navigation..

    I have the navigation placed infront of everything else on the page by using 'z-index' & i have tried to z-index the div in which my Amazon deal widget is placed.. but no joy..

    Does anyone know how i can have these widgets appear behind my navigation when scrolling up and down the page?
    or
    Has anyone experienced this before?

    it just looks sloppy as they appear in front of the navigation as the user scrolls up & down lol

    Sorry if i have worded any of this wrong ;)
     
  2. kralcx

    kralcx Junior Member

    Joined:
    May 25, 2010
    Messages:
    164
    Likes Received:
    49
    I believe z-index has to be used together with the position element. Are you using the position element in both your widget div and the navigation div?
     
  3. Cas87

    Cas87 Regular Member

    Joined:
    Mar 5, 2012
    Messages:
    286
    Likes Received:
    131
    Location:
    England
    The div containing the Widget ..

    Code:
    #sidebar {         z-index:-1;
        background-color: #FFF;
        border-radius:5px; 
        box-shadow: 0px 0px 2px 0px #000000;
        height:auto;
        width:120px;
        position:relative;
        margin-top:10px;
        margin-left:5px;
        float:left;
    }
    
    I have tried with no z-index, all kinds of z-index numbers but no joy..

    It's the widget not the div what's the problem

    This is part of the Navigation..

    Code:
    #nav{
        background: url(images/nav.gif);
        background-repeat:repeat-x;
        list-style-type:none;
        font-weight:bold;
        font-size:18px;
        position:fixed;
        z-index:100;
        width:100%;
        height:25px;
        margin-right:auto;
        margin-left:auto;
        text-align:center;
        padding-top:5px;
        box-shadow: 0px 0px 2px 0px #000000;
        
    }
    
    The Navigation works & looks fine with the rest of my website, including the astore..it's just those damn widgets appear in front of it when you scroll down the page.. i could just have a normal navigation lol, but i like the look & feel of a fixed nav (like twitter, facebook etc..)

    Thanks :)
     
  4. roster67

    roster67 Registered Member

    Joined:
    Mar 27, 2012
    Messages:
    69
    Likes Received:
    10
    It is hard to help without seeing a live example of your problem.
    If you could bring us your site url or better a jsfiddle.net sample, its would be great I think.

    #over is positionning relative to which element? What is position property of this parent element?
    Z-index work with associate position.
    You should play with all position. {static relative absolute fixed inherit}
    For example, try position:static in place of :relative.

    Float property can override some others properties I think.

    Other thing, is it the same result in all browsers?