More Z-Index Problems

Hi All,

I have another z-index issue, find it hard to get my head around how z-indexing works.

If you look on this page:

In the blue bar, I have had to bring the 4 text divs to the front of the blue bar with z-index, but it has made the text un-clickable (they are links to inner pages).

The reason I had to use z-index is for the nav (which isn’t complete yet, each nav element had a down arrow which covers the blue bar).

Does anyone know why the text links in the blue bar is un-clickable?

Also there should be room for 3 blocks on one line, but it is only showing 2, all the divs are set to float: left;

Really sorry if this is confusing, hard to explain it exactly.

The code is as follows:

HTML


<div id="nav" class="right30">
    <ul class="menu" id="nav">
        <li class="item1"><a href="#"><span>Home</span></a></li>
        <li class="item197"><a href="#"><span>The School</span></a></li>
        <li class="item167"><a href="#"><span>Courses</span></a></li>
        <li id="current" class="active item168"><a href="#"><span>Fees &amp; Dates</span></a></li>
        <li class="item169"><a href="#"><span>Accommodation</span></a></li>
        <li class="item198"><a href="#"><span>Book a Course</span></a></li>
        <li class="item199"><a href="#"><span>Why Choose Us</span></a></li>
        <li class="item200"><a href="#"><span>Useful Info</span></a></li>
    </ul>
</div>
<br class="clear" />
<div id="feature">
    <img id="logo" src="/new/templates/pels/images/logo.gif" alt="Portsmouth English Language School Logo" />
	<div id="feature-nav">	
	    <div class="sub-links">
		<h2><a href="#">Anglia Examination Fees</a></h2>
		<p>Short introduction to the Anglia Examination Fees page<br />
		<a href="#" >more...</a></p>
	</div>
	<div class="sub-links">
		<h2><a href="#">Junior & Teacher Training Fees</a></h2>
		<p>Replace this introduction before going live, this is the top short intro<br />
		<a href="#" >more...</a></p>
	</div>
	<div class="sub-links">
		<h2><a href="#">Part Time Adult Course Fees & Dates</a></h2>
		<p>Edit this intro link text with an intro before the site goes live<br />
		<a href="#" >more...</a></p>
	</div>
	<div class="sub-links">
		<h2><a href="#">Full Time Course Fees & Dates</a></h2>
		<p>Short introduction text for top link will go here.<br />
		<a href="#" >more...</a></p>
	</div>
</div>

CSS


#nav { float:right; margin-top:10px; }
#nav ul { list-style:none; position:relative; z-index:99; margin-right:25px; }
#nav li { float:left; margin:0 2px 0 0; position:relative; }
#nav li a { padding:4px 9px; position:relative; float:left; height:24px; line-height:24px; text-decoration:none; background:#cfcfcf; color:#383835; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; }
#nav li a:hover { background:#153267; color:#fff; }
#nav li#current span.arrow { position:absolute; top:32px; left:50%; margin-left:-5px; width:17px; height:6px; background:url(../images/nav-current-arrow.gif) ; }
#nav li#current a { background:#ef0000; color:#fff; }

/*FEATURE*/
#feature { position:relative; z-index:-20; background:#153267; color:#fff; -moz-border-radius:10px; -webkit-border-radius:10px; height:260px; overflow:hidden; }
#feature .h1 { font-size:24px; line-height:25px; color:#fff; }
#feature a { color:#f098f1; font-size:12px; }
#feature #hp-feat-left { width:485px; float:left; }
#feature #hp-feat-right { float:right; padding-top:20px; }

#feature #broc-link { padding:20px 0 10px 0; }
#feature #feat-hp-intro { padding-left:20px; font-size:14px; clear:left; }

#logo { margin:0 25px 10px 25px; float:left; }
#slider { margin:0 25px 10px 25px; float:left; }
#download-brochure { margin:0 0 20px 5px; }

/*INTERNAL FEATURE*/
#feature-nav { position:relative; z-index:200; width:780px; }

#feature .sub-links { width:170px; float:left; margin:20px 60px 0 15px; height:100px; overflow:hidden; }
#feature .sub-links h2 { margin:0; line-height:15px; }
#feature .sub-links h2 a { color:#fff; font-size:14px; }
#feature .sub-links p { line-height:18px; font-size:12px; }


Many thanks in advance peeps

HI,

Just set the nav to z-index:2 and the feature to z-index:1 instead of z-index:-20.

e.g.


#nav { float:right; margin-top:10px;[B]position:relative;z-index:2; [/B]}
#feature { [B]position:relative; z-index:1;[/B] background:#153267; color:#fff; -moz-border-radius:10px; -webkit-border-radius:10px; height:260px; overflow:hidden; }

That’s fantastic, thank you very much :slight_smile: