CSS problem with navigation [Archive]

View Full Version : CSS problem with navigation

avenue

03-23-2004, 06:24 AM

When the user rolls over the link I want a line under and over the word. Will CSS work or will I have to use JavaScript. Here is the code I have so far:

a:link {text-decoration:none;}
a:hover {text-decoration:overline;}

this works for just the overline. When I add underline it just underlines the link when rollover.

Please help...:(

Zopester

03-23-2004, 06:27 AM

You can indeed do this, but using underline and overline won't cut it I'm afraid.

You have to cheat!

a:hover {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
text-decoration: none;
}

Use borders! :D (and specify text-decoration: none, because otherwise you'll get the normal underline as well)

avenue

03-23-2004, 07:04 AM

Thanks zopester. I figured there was some kind of funky trick...

At the default font size i couldn't get it to work. I changed the code to this and it works:

<html>
<head>
<title>CSS Nav Effects</title>

<style type="text/css">

</style>
</head>

<body>
<p><a href="index.html">Home</a> <a href="about.html">About</a> <a href="contact.html">Contact</a></p>
</body>
</html>

I tried to use larger fonts with no success. Any suggestions?

Zopester

03-23-2004, 07:11 AM

<html>
<head>
<title>CSS Nav Effects</title>

<style type="text/css">

</style>
</head>

<body>
<p><a href="index.html">Home</a> <a href="about.html">About</a> <a href="contact.html">Contact</a></p>
</body>
</html>

You needed to specify the visited attribute, font-size doesn't matter.

The above code works.

Zopester

03-23-2004, 07:17 AM

Incidentally, this is a slightly more "correct" way of doing navigation, using an unordered list. After all, what is a navigation bar if it isn't simply a list of links?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Nav Effects</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

</style>
</head>

<body>

<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

</body>
</html>

I've marked this up as XHTML 1.0 Transitional. Not your original question, I know, but just sharing the knowledge. :D

avenue

03-23-2004, 07:39 AM

Zopester RULES!!! :)

Zopester

03-23-2004, 07:44 AM

Oh, stop. :blush:

stripeyteapot

03-23-2004, 07:52 AM

Zopester you're addicted to w3 ... lol

Zopester

03-23-2004, 07:59 AM

I think any front-end designer worth his salt should be validating everything that leaves the office. Why run the risk of non-interoperabilty because you didn't run your work through the W3C validator? That's a false economy.

So yeah, I'm an addict. But it's an addiction I'm proud to share, and attempt to get others hooked on. I'm like the dealer offering freebies to get em hooked...:D

OK, maybe not. Bad analogy. I'll shut up now.

avenue

03-24-2004, 06:26 PM

well said, thanks for the dedication.

serialbeggar

03-25-2004, 09:43 PM

Fun with menu links: http://css.maxdesign.com.au/listamatic/

Zopester

03-26-2004, 04:48 AM

More fun with menu links (and a code auto-generator!):

http://www.accessify.com/tools-and-wizards/list-o-matic/list-o-matic.asp