HOw to make z-index -1 clickable?

[nathj]

Hi,

I'm working on my own site - a long overdue project and I have come up with a design I'm really happy with. However, the design has a torn edge look at the bottom of the header with three tabs coming out from it.

div.header 
{
    width                        : 100%;
    margin-left                : auto;
    margin-right            : auto; 
    margin-top                : 0px;
}
    div.header a.logo
    {
        display                    : block;    
        height                    : 102px;    
        width                        : 100%;
        margin-left                : auto;
        margin-right            : auto; 
        margin-top                : 0px;        
        background-image        : url("../images/njd_logo.png");
 
        background-repeat        : no-repeat;    
 
        background-position    : left;
    }
 
/* 2.2 Navigation layout */
 
    div.navigation
    {
        position                    : relative;    
        width                        : 50%;    
        float                        : right;
        height                    : 75px;
        top                        : -40px;
        z-index                    : -1;
    }
        div.navigation ul
        {
            display                    : inline;    
            float                        : right;
            margin-right            : 25px;
        }
 
        div.navigation li
        {
                display                : inline;
                list-style            : none;
                margin-right        : 10px;
        }
 

This css does the trick perfectly for making it look right.

The trouble I have is that the li items need to be clickable.

<div class="header">    
            <?=anchor("nathanjamesdavies/"," ","title='return home' class='logo'")?>
                <div class="navigation">
                    <ul>
                        <li><?=anchor("nathanjamesdavies/project/1", "<img src='/../images/webdev_link.png' title='web&ndash;dev' alt='web&ndash;dev'/>", "title='web&ndash;dev'")?></li>
                        <li><?=anchor("nathanjamesdavies/project/2", "<img src='/../images/appdev_link.png' title='app&ndash;dev' alt='app&ndash;dev'/>", "title='app&ndash;dev'")?></li>
                        <li><?=anchor("nathanjamesdavies/project/3", "<img src='/../images/ticktock_link.png' title='tick&ndash;tock' alt='tick&ndash;tock'/>", "title='tick&ndash;tock'")?></li>
                    </ul>    
                </div>    
            </div>
 

That's the code in the header file to achieve it and I have played around with stack order, z-index, background images for ages but I cannot make those links clickable.

(I'm using CodeIgniter hence the anchor function). I could really do with some help getting this to layout and function as I want. It's proving to be a real pain.

Thanks
nathj

[nathj]

Hi,

Ok, I've solved it with an extra level. So over the top of the navigation items I've layered a set of equal sized transparent png's. these images are clickable and the site now looks and functions as expected.

I can't help but think this is a nasty hack but it does work. If anyone has any better solutions please let me know.

For reference here is the code, css first:

div.navigation
    {
        position                    : relative;    
        width                        : 50%;    
        float                        : right;
        height                    : 75px;
        top                        : -40px;
        z-index                    : -1;
    }
 
        div.navigation ul
        {
            display                    : inline;    
            float                        : right;
            margin-right            : 25px;
        }
 
        div.navigation li
        {
                display                : inline;
                list-style            : none;
                margin-right        : 10px;
        }
 
    div.navigationtransparent
    {
        position                    : relative;    
        width                        : 100%;    
        float                        : right;
        height                    : 75px;
        top                        : -115px;
    }
 
            div.navigationtransparent ul.transparent
            {
                display                    : inline;    
                float                        : right;
                margin-right            : 25px;
            }
 
            div.navigationtransparent li.transparent
            {
                    display                : inline;
                    list-style            : none;
                    margin-right        : 10px;
            }
 

now the markup

<div class="header">    
            <?=anchor("nathanjamesdavies/"," ","title='return home' class='logo'")?>
                <div class="navigation">
                    <ul>
                        <li><img src='/../images/webdev_link.png' title='web&ndash;dev' alt='web&ndash;dev'/></li>
                        <li><img src='/../images/appdev_link.png' title='app&ndash;dev' alt='app&ndash;dev'/></li>
                        <li><img src='/../images/ticktock_link.png' title='tick&ndash;tock' alt='tick&ndash;tock'/></li>
                    </ul>    
                </div>    
                <div class="navigationtransparent">
                    <ul class="transparent">
                        <li class="transparent"><?=anchor("nathanjamesdavies/project/1", "<img src='/../images/webdev_link_transparent.png' title='web&ndash;dev' alt='web&ndash;dev'/>", "title='web&ndash;dev'")?></li>
                        <li class="transparent"><?=anchor("nathanjamesdavies/project/2", "<img src='/../images/appdev_link_transparent.png' title='app&ndash;dev' alt='app&ndash;dev'/>", "title='app&ndash;dev'")?></li>
                        <li class="transparent"><?=anchor("nathanjamesdavies/project/3", "<img src='/../images/ticktock_link_transparent.png' title='tick&ndash;tock' alt='tick&ndash;tock'/>", "title='tick&ndash;tock'")?></li>
                    </ul>    
                </div>    
            </div>
 

Like I say if you know a better, neater or nicer way of doing this then please let me know.

Cheers
nathj