View Full Version : why are these <li>'s not behaving like links?

02-03-2012, 06:18 PM
I hope you can help me here, because I'm kinda confused and I have tried about everything. I'm trying to set up an image based menu, but the elements are not reacting.

<li class="class1 class2"><a href=blank><span></span></a></li>

if you want to see the problem in context, you can take a look at www.astralvault.net.

ARCLite Studio
02-03-2012, 06:37 PM
Set your A href outside of the <li>, unless im not understanding what you need.

<a href="#"><li class="class1 class2"><span></span></li></a>

02-03-2012, 06:48 PM
That's a neat effect you're going for there.

Anyway, the reason you aren't linking anywhere is because your anchor tag has nothing in it aside from an absolutely positioned span element (which means it does not stretch its container). You might as well have an empty anchor tag there at this rate.

What you can do is use a 1x1 pixel transparent .gif image added inside the anchor tag, stretch that 1x1 transparent image to the correct dimensions, and then have this image use your text images as its background (rather than having the <li> tag use the text image as its background). Then you will have an element with actual dimensions which will act as your clickable link area while still preserving your effect.

Here is a basic patch to your existing code (my changes highlighted):

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!---base href="http://www.astralvault.net/" /--->
<title>AstralVault main</title>
<style type="text/css">
html, body {
margin: 0;
background: #999 url(images/background_grey.jpg) no-repeat center top;


#container {
width: 1200px;
height: 1000px;
margin: 0px auto;
overflow: auto;
position: relative;
top: 30px;

position: absolute;
top: 3px;
left: 900px;
border: 0px solid black;
margin:0; padding:0;

#tabmenu img{position: relative; float: left;}
#tabmenu ul{
float: left;

#tabmenu ul li{display:inline;}

padding:1px 3px;
text-decoration: none;

a.top:hover,a.top:active {

#header {
height: 268px;
background-color: white;
background: url(images/astralvaultcopy4.jpg);

.container2 {
width: 700px;
float: left;
background: #fff url(images/back2.jpg) no-repeat;
.sidebar {float: left;}
.container2 ul {
width: 500px;
margin: 0;
padding: 0;
float: left;
list-style: none;
.container2 ul li {
height: 83px;
width: 289px;
float: left;
clear: left;
cursor: pointer;
.container2 ul li span {
height: 340px;
width: 400px;
top: 380px;
left: 765px;
position: absolute;

.nav_common span {opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;

.nav_common:hover img{background-position: 0 0; opacity: 1;}
.nav_common:hover span {opacity: 1;
-webkit-transition: opacity 1.1s;
-moz-transition: opacity 1.1s;
-o-transition: opacity 1.1s;

.nav_games img{background: url(images/menu_games3.png) bottom;display:block;width:100%;height:100%;}
.nav_games span {background: url(images/menu_sketch_games.png);}

.nav_compositions img{background: url(images/menu_compositions3.png) bottom;display:block;width:100%;height:100%;}
.nav_compositions span {background: url(images/menu_sketch_compositions2.png);}

.nav_photography img{background: url(images/menu_photography3.png) bottom;display:block;width:100%;height:100%;}
.nav_photography span {background: url(images/menu_sketch_photography.png);}

.nav_art img{background: url(images/menu_art3.png) bottom;display:block;width:100%;height:100%;}
.nav_art span {background: url(images/menu_sketch_art.png);}

.nav_reviews img{background: url(images/menu_reviews3.png) bottom;display:block;width:100%;height:100%;}
.nav_reviews span {background: url(images/menu_sketch_reviews2.png);}

.nav_science img{background: url(images/menu_science3.png) bottom;display:block;width:100%;height:100%;}
.nav_science span {background: url(images/menu_sketch_science1.png);}

.container3 {
width: 470px;
float: right;
background: url(images/post-it.png) no-repeat;
#header, .container2 {border: 3px double #333;}
.container2, .container3 {
height: 500px;
margin: 25px 0 0;

#obstruct {width: 0px; height: 0px;}
#obstruct span {cursor: crosshair;}

a.top div {
position: absolute;
opacity: 0;
background: url(images/menu_sketch_home.png);
top: 330px;
left: -155px;
width: 360px;
height: 400px;

-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s; }

a.home div {background: url(images/menu_sketch_home.png);}
a.contact div {background: url(images/menu_sketch_contact.png);}
a.about div {background: url(images/menu_sketch_contact2.png);}

a.top:hover div {
opacity: 1;


<!--- ************************** HTML ******************************* --->

<div id="container">
<div id="header">
<div id="tabmenu">

<img src=images/tab2_left.png>


<li><a class="top home" href="/html/default.asp" target="_blank">Home<div></div></a></li>
<li><span></span><a class="top contact home" href="/html/default.asp" target="_blank">Contact<div></div></a></li>
<li><a class="top about home" href="/html/default.asp" target="_blank">About<span></span><div></div></a></li>
<img src=images/tab2_right.png>
<!--end tabmenu--></div>
<!--end headerbox---></div>

<div class="container2">
<img src="images/sidebar.png" alt="sidebar" width="86" height="500" class="sidebar" />
<li class="nav_science nav_common"><a href="#"><img src="/images/1x1_transparent.gif" alt="" /><span></span></a></li>
<li class="nav_games nav_common"><a href="#"><img src="/images/1x1_transparent.gif" alt="" /><span></span></a></li>
<li class="nav_compositions nav_common"><a href="#"><img src="/images/1x1_transparent.gif" alt="" /><span></span></a></li>
<li class="nav_photography nav_common"><a href="#"><img src="/images/1x1_transparent.gif" alt="" /><span></span></a></li>
<li class="nav_art nav_common"><a href="#"><img src="/images/1x1_transparent.gif" alt="" /><span></span></a></li>

<li class="nav_reviews nav_common"><a href="#"><img src="/images/1x1_transparent.gif" alt="" /><span></span></a></li>
<li id="obstruct"><span></span></li>

<img src="images/vline.png" alt="sidebar" width="16" height="500" class="sidebar" />

<!--end container2--></div>

<div class="container3"></div>
<!--end container 3--></div>


02-03-2012, 06:53 PM
Actually, what ARCLite said worked! I simply moved the <a> outside the <li>, and the latter was still functional! :) I really didn't expect it to work, but it did.
Thanks, both!

02-03-2012, 07:02 PM
Actually, what ARCLite said worked! I simply moved the <a> outside the <li>, and the latter was still functional! :) I really didn't expect it to work, but it did.
Thanks, both!

It's your call, but I would check my results cross-browser first if I were you. The code ARCLite gave works, but it will not validate and is likely to lead to problems down the road. You already had 17 HTML errors (mostly image tags needing a closing slash) but these new ones you will add are on a different level of trouble.

If you're going to use a doctype, you might as well code to specifications of the standard you are coding in. :thumbsup:

I stand by my original recommendation.

02-03-2012, 07:22 PM
I see, so it felt wrong because it WAS wrong. hehe. Thanks for the heads-up, I'll take a look :)