Question

i have created a website but now i am having 1 issue. i am unable to do click even on link and navigation.

you can take a look:
http://www.cambridgekitty.com/business-directory/
to check the real codes.

HTML

<div id="main-bg">
    <div id="left-side-logo"></div>
</div>

CSS

#wrap {
    padding: 0;
    position: relative;
    width: 100%;
}
#main-bg {
    background: url("../img/kittybg2-h.png") no-repeat scroll right top transparent;
    margin: 0 auto;
    min-height: 733px;
    position: relative;
    width: 100%;
    z-index: -9999;
}

just add a logo on left side

#left-side-logo {
    background: url("../img/norwichkitty-final-logo-bg-02.png") no-repeat scroll 0 0 transparent;
    height: 500px;
    left: -150px;
    opacity: 0.8;
    position: absolute;
    top: -60px;
    width: 500px;
    z-index: -1;
}

and add

    position: relative;

to #wrap. and add

    z-index: -9999;

to #main-bg.

but after doing this … i am unable to click on logo or even navigation links.

please let me know why i am casusing this issue.

thank you

Answer 1

If I were you, I would simple change the elements I apply the different background images to. Give #inner-wrapper the city image background, and #main-bg the logo background. Then use the background-position property to position the logo background (currently the two zeroes in your background rule). Also, if you want opacity for that logo you can achieve that by simply setting it in Photoshop or whatever editor you prefer.

This solution means you don’t have to deal with the z-index issues and makes for more hack-free and semantic mark-up, although you do have a few containers. Hope this helps 🙂