Jump to content
thanhtan

Simple Navigation Not Working

Recommended Posts

Hi, I have a simple rollover navigation, which is as follows::

Code:

 

<ul id="nav"> <li><a href="about.html" class="about"></a></li>

<li><a href="guestpics.html" class="guestPics"></a></li>

<li><a href="staff.html" class="staff"></a></li>

<li><a href="webcams.html" class="webcams"></a></li>

<li><a href="parties.html" class="parties"></a></li>

<li><a href="contact.html" class="contact"></a></li>

</ul>

 

Here is the CSS for the about link::

Code:

 

#nav a.about{ background-image:url(images/nav/about_off.gif); width:77px; height:18px; }

#nav a.about:hover { background-image:url(images/nav/about_on.gif);}

 

 

I don't see what I am doing wrong? Can someone help?

 

thanks

Share this post


Link to post
Share on other sites

Welcome to the forums thantan :)

 

A link would be nice but if you add the full url to the image it will probably work.

 

>#nav a.about{ background-image:url(http://you-domain/images/nav/about_off.gif); width:77px; height: 18px;}
#nav a.about:hover { background-image:url(http://you-domain/images/nav/about_on.gif);}

Share this post


Link to post
Share on other sites

You might also need to specify the links as block

 

>#nav a.about{ background-image:url(http://you-domain/images/nav/about_off.gif); width:77px; height: 18px; display:block;}
#nav a.about:hover { background-image:url(http://you-domain/images/nav/about_on.gif);}

Share this post


Link to post
Share on other sites

Yes you don't really say what the problem is. One problem I have found with using CSS for image rollovers is that the browser seems to download the image each time and so you get an obvious delay unless you include the picture somewhere else on the page but say with dimensions of 1x1.

Share this post


Link to post
Share on other sites

thanhtan which browser are you using to view your site.. your code seems to be fine.. there is difference between browsers visibility.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...