Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts

    why are these <li>'s not behaving like links?

    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.

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


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

  • #2
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Set your A href outside of the <li>, unless im not understanding what you need.

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

  • #3
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    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):
    Code:
    <!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" />
    <!---base href="http://www.astralvault.net/" /--->
    <title>AstralVault main</title>
    <style type="text/css">
    html, body {
    	cursor:crosshair;
    	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;
    	align:center;
    }
    
    
       #tabmenu{
    	   position: absolute; 
             width:245px;
    	   top: 3px; 
    	   left: 900px;
    	   border: 0px solid black;
    	   margin:0; padding:0;
    }
    				
    
    	#tabmenu img{position: relative; float: left;}
                #tabmenu ul{
    		margin:0;
    		padding:0;
    		position:relative;
    		float: left;
    		}
    
    		#tabmenu ul li{display:inline;}
    
    		
    		a.top:link,a.top:visited{
    		color:white;
                background-color:#FFEECA;
                padding:1px 3px;
                text-decoration: none;
                text-transform:uppercase;
                font-family:sans-serif;
                }
    
                a.top:hover,a.top:active {
    		background-color:#FFC662;
    		}
    
    
    
    
    #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;
    	}
    	
    
    
    
    
    
    </style>
    </head>
    
    
    
    
    
    
    
    
    <!--- ************************** HTML ******************************* ---> 
    
    <body>
        <div id="container">
        	<div id="header"> 
    	   <div id="tabmenu">
    
    
    
       			<img src=images/tab2_left.png>
    
       			 <ul>
    
       				<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>
       			</ul>
       			 <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" />
                    <ul>
     			  <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>
    
                    </ul>
    			<img src="images/vline.png" alt="sidebar" width="16" height="500" class="sidebar" />
          
    	  <!--end container2--></div>
    
    
            <div class="container3"></div>
       	 <!--end container 3--></div>
    
    </body>
    </html>
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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!

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by Cipherflak View Post
    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.

    I stand by my original recommendation.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    New Coder
    Join Date
    Jan 2012
    Posts
    16
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I see, so it felt wrong because it WAS wrong. hehe. Thanks for the heads-up, I'll take a look


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •