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