rodash
04-25-2007, 03:57 AM
In website design, how do you design pages so links aren't underlined in the browsers?
 | View Full Version : Doing away with underlined links ITHost-KoreyR 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 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 04-25-2007, 06:48 AM Try using CSS. Place this between <head> and </head> <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=css+links&btnG=Google+Search bear 04-25-2007, 07:00 AM 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 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): <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 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- 04-26-2007, 01:15 AM I would freshen up in your CSS, it's a simple CSS function that can do this. bluedreamer 04-26-2007, 10:06 AM 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 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 04-26-2007, 02:29 PM 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 04-26-2007, 06:09 PM 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 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 04-26-2007, 06:17 PM 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:lovewht: bluedreamer 04-26-2007, 08:20 PM I meant in terms of design links look good underlined in the same colour. I know where you're coming from but even underlined/same colour is hard for some CB users, I should know I'm one of the 10% :) Those figures are actually pretty close. ...12 replies just for removing underlines from link.. We must be bored. lol:lovewht: lol.. I know they're close I'm one who should know! Bored, hell yes but we have to talk s**t sometimes ;) Andan 04-27-2007, 01:22 AM Using the style attribute within a <a></a> tag is equivilant to defining the style in a stylesheet. Although if you define it within a style sheet, you can just call the style up like so: <a class=""...></a> or <a id="" ...></a> It's more graceful and better to define it within CSS, then import the sheet at the top of your page with the <head></head>. Fixago 04-28-2007, 02:34 AM A shorter way to remove the underline from a link:* a { text-decoration:none; }I actually prefer the border-bottom:1px solid; technique because it's consistent across all browsers. Jay August 04-28-2007, 09:27 AM * a { text-decoration:none; } What does * do??? :) it has no use. (no need to explain yourself, I understand what it does but it just has no use.) if you just do a {text-decoration: none;} it works for all 'a' related shiznitz. Fixago 07-05-2007, 05:28 AM What does * do??? :) it has no use. (no need to explain yourself, I understand what it does but it just has no use.) if you just do a {text-decoration: none;} it works for all 'a' related shiznitz. Because it covers: a, a:link, a:active, a:visited, a:hover If you're an Opera user you would notice this. A lot of sites that THINK their links are underlined are not actually underlined at all. And usability rules state to use underlined links, preferably in blue (varying hues). |