...

View Full Version : Linking the menu



Artti
03-06-2009, 03:38 PM
Hi, i'm having problems with my navigation.
Here is the CSS part:

/* Menuja nalt' */
ul {
list-style: none;
padding: 0;
margin: 0;
}

li {
float: left;
position: relative;
margin-bottom: 10px;
}


li:hover ul {
display: block;
}
/* Butonet e menuse */
#nav_home {background: url(../images/nav_home.jpg) no-repeat;width: 135px;height:142px; }
#nav_about {background: url(../images/nav_about.jpg) no-repeat;width: 141px;height:142px; }
#nav_products {background: url(../images/nav_products.jpg) no-repeat;width: 141px;height:142px; }
#nav_contact {background: url(../images/nav_contact.jpg) no-repeat;width: 157px;height:142px; }
#foto {background: url(../images/foto.jpg) no-repeat;width: 293px;height:232px; margin: 0; padding: 0;}
/* Hover mouse per menu */
#nav_home:hover, #nav_home1 {background: url(../images/nav_home1.jpg) no-repeat;width: 135px;height:142px; }
#nav_about:hover, #nav_about1 {background: url(../images/nav_about1.jpg) no-repeat;width: 141px;height:142px; }
#nav_products:hover, #nav_products1 {background: url(../images/nav_products1.jpg) no-repeat;width: 141px;height:142px; }
#nav_contact:hover,#nav_contact1 {background: url(../images/nav_contact1.jpg) no-repeat;width: 157px;height:142px; }


And here is the XHTML:

<ul id="nav">
<li id="nav_home1"></li>
<li id="nav_about"></li>
<li id="nav_products"></li>
<li id="nav_contact"></li>
<li><img src="images/foto.jpg" width="294" height="232" border="0" alt="" /></li>
</ul>


You know i cant put <a href="#"> before the <li> tag and i don't know how can i do it, so i want your help!


Here is the demo site http://artiyt.com/tenda/

abduraooft
03-06-2009, 03:43 PM
<ul id="nav">
<li id="nav_home1"><a href="/home.html">Home</a></li>
<li id="nav_about"><a href="/about.html">About</a></li>
.....
</ul>
You can neither put an <li> within an anchor nor place an anchor along with an <li>, as a sibling.

Artti
03-06-2009, 06:36 PM
Yes, i know that but i want all the block image to be linked.

Excavator
03-06-2009, 07:26 PM
Hello Artti,
The one image you have is a clickable link when you do this -
<ul id="nav">
<li id="nav_home1"></li>
<li id="nav_about"></li>
<li id="nav_products"></li>
<li id="nav_contact"></li>
<li><a href=""><img src="http://artiyt.com/tenda//images/foto.jpg" alt="" width="294" height="232" /></a></li>
</ul>

Try your other buttons like this -
CSS-
/* Menuja nalt' */
ul {
list-style: none;
padding: 0;
margin: 0;
}

li {
float: left;
position: relative;
margin-bottom: 10px;
}


/* Butonet e menuse */
/* Butonet e menuse */
#nav_home, #nav_about,
#nav_products, #nav_contact {
width: 135px;
height:142px;
display: block;
}
#nav_home {background: url(http://artiyt.com/tenda/images/nav_home.jpg) no-repeat;}
#nav_about {
background: url(http://artiyt.com/tenda/images/nav_about.jpg) no-repeat;}
#nav_products {background: url(http://artiyt.com/tenda/images/nav_products.jpg) no-repeat;}
#nav_contact {background: url(http://artiyt.com/tenda/images/nav_contact.jpg) no-repeat;}
markup-
<ul id="nav">
<li><a href="#" id="nav_home"></a></li>
<li><a href="#" id="nav_about"></a></li>
<li><a href="#" id="nav_products"></a></li>
<li><a href="#" id="nav_contact"></a></li>
<li><a href=""><img src="http://artiyt.com/tenda//images/foto.jpg" alt="" width="294" height="232" /></a></li>
</ul>

Later, when you get it working (because you'll need to fix the :hover part of that now), you won't like how there is a lag waiting for the image to appear the first time you hover over it. Have a look at a CSS rollover menu that doesn't flicker when you hover over it - http://nopeople.com/CSS/CSS_rollover/index.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum