Skip to main content

Forums

This topic contains 1 reply, has 2 voices, and was last updated by  shaneisme 4 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #206398

    charlie321
    Participant

    It seems that on my website header, a transparent region of my ribbon seems to be blocking me from clicking a link on one of my buttons.

    The z-index of my ribbon is 100 so I thought it should be right at the back. How can I solve this?

    Here is my website
    http://www.thejobshow.com
    The button in regard is the ‘book a stand’ button on right.

    Can anyone suggest a fix?

    /* MASTHEAD */
    #masthead-main-area {
    width:100%;
    position:relative;
    height:288px;
    }
    #masthead-main-area #logo {
    position:absolute;
    top:50px;
    left:54px;
    width:393px;
    height:199px;
    }
    #masthead-main-area #man {
    position:absolute;
    top:2px;
    right:0px;
    }
    #masthead-main-area #action_panel {
    position:absolute;
    top:54px;
    right:134px;
    width:350px;
    height:198px;
    overflow:hidden;
    text-align:center;
    }
    .text_welcome {
    color:#00a2d5;
    font-size:26px;
    }
    .text_strapline {
    color:#00a2d5;
    font-size:20px;
    padding-top:8px;
    font-style:italic;
    }
    .ribbon {
    position:absolute;
    right:0px;
    bottom:0px;
    width:225px;
    height:227px;
    z-index:100;
    background:url(/wp-content/uploads/national-business-awards-2015.png) no-repeat top left;
    }
    a.circle_button {
    display:block;
    width:93px;
    height:61px;
    text-align:center;
    color:#00a2d5;
    background:url(images/circle-buttons.png) no-repeat left center;
    text-decoration:none;
    float:left;
    margin-top:16px;
    padding-top:32px;
    margin-right:20px;
    }
    a.circle_button:hover{
    background:url(images/circle-buttons.png) no-repeat right center;
    color:#fff;
    }
    #masthead_bottom_border {
    width:100%;
    height:8px;
    background:url(images/masthead-bottom-border.png) repeat-x;
    }
    
    #206399

    shaneisme
    Participant

    Give #masthead-main-area #action_panel (the parent of your circles) a z-index higher than 100. Of course, then that will cover a portion of your ribbon…

    You might want to read up on how z-index works:

    http://www.smashingmagazine.com/2009/09/the-z-index-css-property-a-comprehensive-look/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star