Z-index issues

HTML & CSS
1

Hi Everyone,

Having a problem with z-index on the following site:

On the navigation, the arrow belowis meant to appear in front of the blue box below, but it is sitting behind. I tried making #nav as a higher z-index, but then the nav bg block is in front of the text :confused:

Does anyone have any ideas?

The CSS is as follows:

#nav { float:right; margin-top:10px; }
#nav li { display:inline; }
#nav li a { display:inline-block; padding:4px 9px; margin-right:2px; background:#cfcfcf; color:#383835; text-decoration:none; font-weight:bold; -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 { background:#ef0000; position:relative; z-index:20; padding:8px 15px 7px 15px;-moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -webkit-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; }
#nav li#current a { cursor:default; background:url(../images/nav-current-arrow.gif) no-repeat center 29px; color:#fff; position:relative; z-index:1; }

/*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; }

The HTML is as follows:

<div id="nav" class="right30"><ul class="menu" id="nav"><li id="current" class="active item1"><a href="http://portsmouthels.co.uk/new/"><span>Home</span></a></li><li class="item167"><a href="/new/courses.html"><span>Courses</span></a></li><li class="item168"><a href="/new/fees-and-dates.html"><span>Fees and Dates</span></a></li><li class="item169"><a href="/new/accommodation.html"><span>Accommodation</span></a></li><li class="item170"><a href="http://demo.wsxebp.co.uk" target="_blank"><span>Site Demo</span></a></li><li class="item197"><a href="/new/about-us.html"><span>about us</span></a></li></ul></div>
		<br class="clear" />
		
		<div id="feature">
			<!--hp only-->

							<div id="hp-feat-left">
					<img id="logo" src="/new/templates/pels/images/logo.gif" alt="Portsmouth English Language School Logo" />
					<p id="broc-link"><a href="#">Download Brochure</a></p>
					<p class="h1"><strong>Portsmouth English Language School</strong> offers the highest quality teaching as standard.</p>
					<p id="feat-hp-intro">PELS is a warm, welcoming school.  It has been set up, organized and developed with the emphasis on an outstanding and memorable educational and cultural experience tailored to you, the student.<br />
						<a href="#">Register your interest</a> | <a href="#">Book a course</a></p>

				</div>
				<div id="hp-feat-right">
					<img id="slider" src="/new/templates/pels/images/TEMP_feature.png" alt="" />
				</div>
					</div>

Many thanks
Si

2

Hi,

The arrow isn’t sitting behind anything. Just move the blue box down and you will see that it doesn’t appear.

You are trying to position the arrow outside the element it is contained in which is not possible as nothing can show outside of an element. The anchor needs to be high enough to hold the arrow at the bottom (about 36px) but will need a revision of the code.

Probably easier to apply the image to a nested span and absolutely position it into place.

Note that in FF3.5 your last menu item drops to a new line so reduce the margins a bit so it can fit.

3

Hi Paul,

Thank you for looking for me, I will try the nested span… should the code go like this?

<li><a href="#">Homepage</a><span></span></li>

Also, if I poition it absolute, presumably I won’t be able to position it centrally as the width of the list element will differ depending on how long the text is?

4

You should be able to centraliise it like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
ul {
    list-style:none;
    position:relative;
    z-index:99;
}
li {
    margin:0 5px 0 0
}
li, a {
    position:relative;
    float:left;
    height:24px;
    line-height:24px;
    background:red;
    text-decoration:none;
    color:#000;
}
span {
    position:absolute;
    bottom:-15px;
    left:50%;
    margin-left:-8px;
    width:0px;
    border-right:8px solid transparent;
    border-left:8px solid transparent;
    border-top:20px solid red;
}
</style>
</head>
<body>
<ul>
    <li><a href="#">Home</a><span></span></li>
    <li><a href="#">Homepage longer text</a><span></span></li>
    <li><a href="#">Homepage more text</a><span></span></li>
    <li><a href="#">Home home</a><span></span></li>
</ul>
</body>
</html>

Just place it at 50% and then use a negative margin equal to half its width.

5

That example with the borders didn’t work in IE6 so this explains it better.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
ul {
    list-style:none;
    position:relative;
    z-index:99;
}
li {
    margin:0 5px 0 0
}
li, a {
    position:relative;
    float:left;
    height:24px;
    line-height:24px;
    background:red;
    text-decoration:none;
    color:#000;
}
span {
    position:absolute;
    bottom:-10px;
    left:50&#37;;
    margin-left:-5px;
    width:10px;
    width:10px;
    height:10px;
    background:red;
}
</style>
</head>
<body>
<ul>
    <li><a href="#">Home</a><span></span></li>
    <li><a href="#">Homepage longer text</a><span></span></li>
    <li><a href="#">Homepage more text</a><span></span></li>
    <li><a href="#">Home home</a><span></span></li>
</ul>
</body>
</html>
6

Thank you very much for that, I really appreciate it :slight_smile:

7

Hi Paul, I am having difficulties with your example, the problem is that the arrow appears in the middle of the #nav element instead of the list element.

What I was hoping for was that when the nav list element had an id of current. the arrow would appear in the middle below that particular nav item.

So for example, on this page, the nav item “If you see this it’s Inactive” should ideally have the arrow below and in the center, but it is showing 50% into the nav element.

Do you know how I could possibly fix this?

Many thanks for all your help.

Here is the code I have used following your help above:

HTML

<div id="nav">
       <ul class="menu" id="nav">
		<li id="current" class="active item1"><a href="http://localhost:8888/pels/">IF YOU SEE THIS IT's INACTIVE</a><span></span></li>
		<li class="item167"><a href="/pels/courses.html">Courses</a><span class="arrow"></span></li>
		<li class="item168"><a href="/pels/fees-and-dates.html">Fees and Dates</a><span class="arrow"></span></li>
		<li class="item169"><a href="/pels/accommodation.html">Accommodation</a><span class="arrow"></span></li>
		<li class="item170"><a href="http://demo.wsxebp.co.uk" target="_blank">Why Choose Us</a><span class="arrow"></span></li>
	</ul>
</div>

CSS

#nav { float:right; margin-top:10px; }
#nav ul { list-style:none; position:relative; z-index:99; }
#nav li { display:inline; margin:0 5px 0 0; }
#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; }
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; }
8

Hi,

You didn’t follow my example :slight_smile:

Look at my example and you can see it’s working as you required.

You didn’t float the list element and you didn’t set a stacking context for the absolutely posiioned arrow either. You must set position:relative on the list element and for IE that element also needs to have haslayout which is why I floated it in my example :slight_smile:

9

Hiya again…

Whooops! :blush:

Apologies, thank you so much for all your help, works an absolute charm.