Doing away with underlined links

rodash · #1 04-25-2007, 03:57 AM

In website design, how do you design pages so links aren't underlined in the browsers?

ITHost-KoreyR · #2 04-25-2007, 04:04 AM

if youre talking about navigation, create the image with the text as part of it.

I'll use an example from our site: http://www.ithost.ca/images/intec_adv.jpg looks like it has text, but if you make the image a link or path to somewhere on/off your site, your text wont highlight or underlin (because theres no text to begin with!)

Its late and I'm sure I could have done a better job explaining that, but I'm sure you know what I'm getting at

KiranHost · #3 04-25-2007, 05:01 AM

You can use the STYLE parameter. i.e.

<A STYLE="text-decoration:none" HREF="link.html">Home Page</A>

siforek · #4 04-25-2007, 06:48 AM

Try using CSS. Place this between <head> and </head>

Code:

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

This will of course remove underline from all links on that page.
More information: http://www.google.com/search?hl=en&q...=Google+Search

***bear*** · #5 04-25-2007, 07:00 AM

Quote:

Originally Posted by ITHost-Korey

if youre talking about navigation, create the image with the text as part of it.

If you do this, make sure to specify the image with border="0" or it will show a default line around it.

As mentioned, CSS is your best bet. Bear in mind the user can override your choice, so it's not perfect. Besides, it may look better, but from a usability standpoint (not to mention accessibility) it's not a good idea to hide your links. Up to you, of course.

gocard · #6 04-25-2007, 01:30 PM

I'd recommend the CSS approach (good for SEO, users can highlight the text), and I'd also recommend underlining on hover (or changing color, etc.), just so that there's some sort of user feedback that this is indeed a link (the automatic changing of the pointer on many browsers is too subtle in my opinion):

Code:

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

You're probably already aware of this, but the most important thing is that you keep it consistent. If you're underlining some links, but not others, the ones that aren't underlined are definitely going to get missed.

siforek · #7 04-25-2007, 09:34 PM

Just know that you can do anything. CSS gives you an incredible amount of power over the look of your sites. Another suggestion, Make a separate style file(style.css) and attach it to your pages. This way you could make 1 modification to that file and it would change on your entire site rather than changing the head of each html document.

http://tizag.com & http://w3schools.com are very helpful design/development tutorial site. Anyone know of any others?

DeMiNe0- · #8 04-26-2007, 01:15 AM

I would freshen up in your CSS, it's a simple CSS function that can do this.

bluedreamer · #9 04-26-2007, 10:06 AM

Quote:

Originally Posted by bear

Besides, it may look better, but from a usability standpoint (not to mention accessibility) it's not a good idea to hide your links. Up to you, of course.

Here here, people with visual impairments often cannot distinguish text links from plain text if the underline is not there. The default state for text links is having an underline - it's done for a purpose.

crandall87 · #10 04-26-2007, 10:58 AM

Yes I agree the less obvious links should be underlined. They don't look too bad if you have them the same colour as your text.

siforek · #11 04-26-2007, 02:29 PM

Quote:

Originally Posted by crandall87

They don't look too bad if you have them the same colour as your text.

I'll usually lighten/darken the color just a bit & keep'm underlined for default links(part of an article or something). That way it's not jumping out at you to click it till you know why you'd want to.

Stay away from text effects/filters unless you already know, or have the time to make'm work in all browsers(css+javascript+css will do the trick).

bluedreamer · #12 04-26-2007, 06:09 PM

Quote:

Originally Posted by crandall87

They don't look too bad if you have them the same colour as your text.

I have to disagree with you big time. If you suffer from any type of colour blindness non underlined links that are the same or similar colour to plain text makes it impossible for you to see them. Colour blindness affects about 10% of males and up to 2% of females, add to that people with generally poor eyesight and you are effectively shutting out a lot of a sites visitors.

crandall87 · #13 04-26-2007, 06:17 PM

I didn't mean in an accessibility way. I meant in terms of design links look good underlined in the same colour. Personally if my links are not underlined they are bold and a different colour or text links on a nav bar.

siforek · #14 04-26-2007, 06:17 PM

Quote:

Originally Posted by bluedreamer

I have to disagree with you big time. If you suffer from any type of colour blindness non underlined links that are the same or similar colour to plain text makes it impossible for you to see them. Colour blindness affects about 10% of males and up to 2% of females, add to that people with generally poor eyesight and you are effectively shutting out a lot of a sites visitors.

Those figures are actually pretty close. It's details like that that can set you apart from other designers. But I think rodash's got the idea.

...12 replies just for removing underlines from link.. We must be bored. lol