no content within <li> but area must act as link

<ul> navigation methods

[el_roboto]

Hello

The main navigation on this site I'm working on uses images for the main navigation links. The images are set as background images in a class so each <li> has a unique class. There is no visible content within the <li></li> tags (unless css is off) and I'm trying to have the list elements link to their respective pages.

I'm having problems getting the anchor element to act in the space it has in each <li>

<div id="egonav"><!-- HARDCODE EGO MENU -->
<ul class="egomenu">
  <li id="egohome" class="egohome"><div><a href="../blog"><span class="hidden">HOME</span></a></div></li>
<li id="egofun" class="egofun"><div><a href="../fun"><span class="hidden">FUN</span></a></div></li>
<li id="egoshop" class="egoshop"><div><a href="../shop"><span class="hidden">SHOP</span></a></div></li>
<li id="egoinfo" class="egoinfo"><div><a href="../info"><span class="hidden">INFO</span></a></div></li>
<li id="egocontact" class="egocontact"><div><a href="../contact"><span class="hidden">CONTACT</span></a></div></li>
<li id="egolinks" class="egolinks"><div><a href="../links"><span class="hidden">LINKS</span></a></div></li>
<li id="egoguestbook" class="egoguestbook"><div><a href="../guestbook"><span class="hidden">GUESTBOOK</span></a></div></li>
</ul>
</div>

I thought it might be as simple as giving my <a href.. a block display but that didn't do it. Any ides?

[hellboy]

I'm not sure if I understand this properly but if you want to get rid of the space in <li></li> why don't you make it like that (display:block):

<li id="egohome" class="egohome"><a href="../blog"><span class="hidden" style="display:block; ">HOME</span></a></li>

[el_roboto]

sorry I explained that terribly, it's ok I solved the problem

thanks for the reply though! :)

[Ingolemo]

In all likelihood, you probably don't need unique classes and unique IDs on all your links.

Is there a particular reason why you have them both?

[phranque]

el_roboto:
it is always nice to have a resolution to each posted problem so future searches on the site can find it...

[el_roboto]

hello

unique classes and id's as each class has a difference background image, so when css is on menu made of images, when off, it falls back to the text.

Id's are there as there is a class change onMouseOver

in regards to the fix, it was a pretty straight forward one, i'll just give you a snippet

<li id="egohome" class="egohome"><a href="/blog"><span class="hiddenNav">HOME</span></a></li>
<li id="egofun" class="egofun"><a href=".net/fun"><span class="hiddenNav">FUN</span></a></li>

hidden nav is set to display:block; but visibility is off

[mattur]

You should generally avoid using identical id's and class names like this:

<li id="egohome" class="egohome">

It's redundant, and never(?) needed. Your code could be optimised to something like:

<ul id="egomenu">
<li><a href="/blog/" id="egohome"><b>Home</b></a></li>
...etc

Which is a lot simpler and neater. For the image hovers, don't use javascript use CSS e.g. a:hover#egohome

[el_roboto]

You're right, that is much better! ta

[el_roboto]

What do you think would be the best option for achieving a 'selected' effect in which the menu item stays on its hover style while you're on it's page.

The menu is an include, so I'd usually put some php in with the inc_menu.php to check the current location, do a series of if/else's to print a value into relevant variable, therefore echo "-on" within the chosen items ...class="egohome<?php echo$nav4;?>"... then have an egohome-on class in addition to egohome and ego:hover.

Just interested to know if anyone has any neater ideas?