Not underlining some links

**jglasspoole** · Mar 7, 2001, 16:32

I am trying to incorporate a horizontal navigation bar on my Web site with non-underlined links. Since I want all of my other links underlined, what do I need to do to make some links sans underlines. Is it possible? Any help you can give me is greatly appreciated.

**dominique** · Mar 7, 2001, 19:00

The stuff in blue-bold-italic is what you have to add to your page. It uses Cascading Style Sheets (CSS) to acheive the effect you want.

Code:

<html>
<head>
<title>No Underlines</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.nav {  text-decoration: none}
-->
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<p><a href="hey.html" class="nav">Hello World!</a></p>
</body>
</html>

Greater explanation can be given if you still have some questions. I hope this is what you were looking for.

**gthorley** · Mar 7, 2001, 19:05

Great reply.

If sitepoint ever gives out awards you should get one.

**jglasspoole** · Mar 8, 2001, 10:06

Dominique,

Would I add the class: nav to all of my links in the navigation bar (as you did in the example)? Is it possible to just note it once? I was looking in my CSS book last night and was thinking of setting the CSS for my navbar as an ID. Would that be the same as a class?

Thanks for your help,

**dominique** · Mar 8, 2001, 22:53

Too bad I can't follow up my great response with another one, but I don't know enough about CSS to help you more.

I was trying some stuff with <span> but I couldn't get it working. I know there is something with ID but I'm unfamiliar with it.

Maybe someone else knows. As for me I always use class="" with my links.

**lynlimz** · Mar 10, 2001, 10:53

I'll try to help.
I'll just give you a general solution, though not viable if you use CSS extensively.

To remove the lines in links, do this:

<style type="text/css">
a:link { text-decoration : none; }
a:hover { text-decoration : none; }
a:visited { text-decoration : none; }
</style>

do note that with this, all links, regardless of whether the link is in your horizontal table or not, all links will not have the underline option.

an alternative would be:

<style type="text/css">
a.sidebar:link { text-decoration : underline; }
a.sidebar:hover { text-decoration : underline; }
a.sidebar:visited { text-decoration : underline; }
</style>

all links you want without underlining, you add this code:

class="sidebar"

eg: <a class="sidebar" href="#">hello</a>

If you have any more problems, or that i didn't answer your question, please feel free to ask more! we're here to help =)

**dominique** · Mar 10, 2001, 11:49

Although your code acheives the desired effect lynlimz, it still requires you to add class="" to every link in the nav bar, which is what we were trying to avoid.

Maybe there is no other way to do it....

**lynlimz** · Mar 10, 2001, 11:59

Yes.
In standards compliance sake, ther is no other way.
However, you could do this.
before the navigational tbale begins,
you add this before your navigational bar.
this is making use of the fact that the latter styles reside over the original file.

<style type="text/css">
a:link { text-decoration : none; }
a:hover { text-decoration : none; }
a:visited { text-decoration : none; }
</style>

after that, when the navigational bar is done with, you just add the code again, this time replace 'none' with 'underline'

**lynlimz** · Mar 10, 2001, 12:04

Oh yes.
Another alternavtive would be using images for the navigational menu =)

sorry, but I can't think of a more viable solution.
thats all i have in my brain... ( if i had one

)

i';ve listed the most efficient ways/methods already

**dominique** · Mar 10, 2001, 16:23

I'd stick with adding class="" to the links since it's more standards compliant and loads a lot faster than images.

It isn't all that big of a deal anyway...

**mmj** · Mar 13, 2001, 00:39

dominique is right

lynlimz's method of redefining everything is not very standards compliant.

You should always test your html/styles on all browsers. Netscape handles things differently. In some cases, the same term in Netscape has a totally different name so both versions need to be included in order to be compatible with both browsers.

Test all the way down to version 4. Some people still use IE4 or NS4 - in fact quite a lot of visitors to my sites use NS4.

**lynlimz** · Mar 13, 2001, 06:31

mmj,

My first post was directed at being standards compliance. But the problem is they want not to place class="" which is simply unavoidable if you want to use style sheets extensively. Specifically having different styles for different links in different areas of the page.

In terms of compatibility, all my methods work in versions 4.0 and above, including mozilla.

**mmj** · Mar 13, 2001, 07:17

lynlimz, I have no problem with this.

I have also used this technique in headers and navigation bars, etc.

I was just emphasising the need to make sure something works in all of the various browsers, especially when CSS is involved. I was also illustrating the fact that even though some conventions are not standards compliant, they may sometimes be accepted by the major browsers anyway.

My comments were directed towards jglasspoole, just as a helpful reminder that when experimenting with new CSS things, it is good to check cross-browser compatibility.

A while ago, I designed a navigation bar that was to be included in many pages. Rather than allocate all the links to custom styles I just changed the default <A> styles within the head section (as you described) and redifined these defaults below the navigation bar. Thankfully, it worked.

**lynlimz** · Mar 15, 2001, 00:25

Yeah. Definitely.

Thanks!

**webtipzcom** · Mar 15, 2001, 04:15

check out my website and grab the css file by yourself, it works,

rgds
Markus
http://www.webtipz.com

**hmahonen** · Mar 15, 2001, 04:51

Originally posted by lynlimz
<style type="text/css">
a:link { text-decoration : none; }
a:hover { text-decoration : none; }
a:visited { text-decoration : none; }
</style>

If you want to follow the standards, the order of link elements specified in CSS file (either external or via style tag) has a matter, correct order is:

Code:

<style type="text/css">
A:link    { color: red }    /* unvisited links */
A:visited { color: blue }   /* visited links   */
A:hover   { color: yellow } /* user hovers     */
A:active  { color: lime }   /* active links    */
</style>

Direct quote from CSS2 specification: Note that the A:hover must be placed after the A:link and A:visited rules, since otherwise the cascading rules will hide the 'color' property of the A:hover rule. Similarly, because A:active is placed after A:hover, the active color (lime) will apply when the user both activates and hovers over the A element.

**lynlimz** · Mar 15, 2001, 07:33

Yeha./ I forgot about the arrangement.

In IE, it will still work. However, Mozilla browsers fail in the coloring when the order is incorrect

**creole** · Mar 15, 2001, 09:39

hmahonen...

Thanks...I didn't know that and I consider myself very skilled at CSS.

to address the issue of ID over class...ID has a greater specificity than does class. YOU would use ID if you wanted to assign a very high specificity to an object. One that will override nearly ANY other style that could be inherited from another (parent) object.

**lynlimz** · Mar 15, 2001, 18:37

Hmm..Thanks for that tip creole.
Certainly makes things easier eh?

**creole** · Mar 15, 2001, 20:25

it certainly does...how are you doing by the way lynlimz? I haven't talked to you in a while/

**lynlimz** · Mar 16, 2001, 01:45

Yeah. Same here. In fact, to be alittle off-topic, I'
ve not been active in sitepoint for 2 weeks or more. Been extremely busy with my projects and work.
However, I'm getting more free time...hmm..so here I am! ehehz. =)

The SitePoint Forums have moved.

User Tag List

Thread: Not underlining some links

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions