How to remove the underline from the Hyperlink (Full Version)

All Forums >> [Community] >> OutFront Discoveries



Message

hhammash -> How to remove the underline from the Hyperlink (9/29/2002 17:55:27)

How to Remove Underlines from Your Hyperlinks

Add this style code to the head section of your page in HTML view:

<style><!--
a {text-decoration: none; }
--></style>

Regards
Hisham



chrisnew1 -> RE: How to remove the underline from the Hyperlink (10/2/2002 12:38:00)

Or, if you have FP2002, you can just click the " Underline" format icon on the toolbar once or twice.

...Just wanted to throw in my 2 cents. [;)]

-Chris



lois wakeman -> RE: How to remove the underline from the Hyperlink (10/4/2002 6:32:52)

This is fine for links in navigation bars and menus, where users can easily tell from the context what' s a link, but don' t forget that most people scan text areas for links as one of their primary means of navigation and orientation, so by removing the underline, you make this quite a bit harder to do. Sometimes, we have to sacrifice a bit of aesthetic quality in the interest of usability!
If you must remove the underline in body text, at least consider using the style to set a light tint background colour instead - but remember, most users are used to underlines for links, and changing things just for the sake of it can sometimes be counterproductive.



Charles W Davis -> RE: How to remove the underline from the Hyperlink (10/13/2002 20:43:46)

Lois,

Amen! I see so many requests for ways to disable things that a vast majority of folks use.

I only hope that once they find out how, they don' t use it!



hhammash -> RE: How to remove the underline from the Hyperlink (10/23/2002 13:41:44)

Hi,

Thank you all for your input and ideas.


Hisham



rdouglass -> RE: How to remove the underline from the Hyperlink (10/24/2002 13:42:07)

<$.02>

I also don' t like the underlined links, however you just gotta' let people know it is a link. I use this on almost all my pages:

<style>
<!--
A:link {text-decoration: none; color: #0000ff}
A:visited {text-decoration: none; color: #0000ff}
A:hover { text-decoration: none; color: #ff0000 }
//-->
</style>

Gets rid of the underline but keeps the familiar blue color for links. Changes to red when mouseover......

</$.02>



hhammash -> RE: How to remove the underline from the Hyperlink (10/27/2002 12:30:43)

Hi rdouglas,

Thank you for this addition. The color change in elegant and nice.

Thanks
Hisham



scarednewbie -> RE: How to remove the underline from the Hyperlink (11/18/2002 23:46:27)

quote:

<style>
<!--
A:link {text-decoration: none; color: #0000ff}
A:visited {text-decoration: none; color: #0000ff}
A:hover { text-decoration: none; color: #ff0000 }
//-->
</style>


I found out more, well, I really, learned more, you can do it like this...

<style>
<!--
A:link {text-decoration: none; color: blue }
A:visited {text-decoration: none; color: blue }
A:hover { text-decoration: none; color: blue }
//-->
</style>

Now, to be precise on your colors, use the color code, if you want red, green, aqua, etc. just type it in. Here also, you can do this like when your mouse goes over the text it gets bold, like so...

<style>
<!--
A:link {text-decoration: none; color: #0000ff }
A:visited {text-decoration: none; color: #0000ff }
A:hover { font-wieght: bold; text-decoration: none; color: #ff0000 }
//-->
</style>

That font-wieght part gives it the poke. Also, some people complain that they want their link to be a certain color/type when the page is loading. That can be simply done by doing...

<style>
<!--
A:link { text-decoration: none; color: #0000ff }
A:active { text-decoration: none; color: #0000ff }
A:visited { text-decoration: none; color: #0000ff }
A:hover { text-decoration: none; color: #ff0000 }
//-->
</style>

I love myself, but you are also forgetting, you should do this...

<STYLE TYPE=" text/css" >
<!--
A:link {text-decoration: none; color: #0000ff}
A:visited {text-decoration: none; color: #0000ff}
A:hover { text-decoration: none; color: #ff0000 }
//-->
</style>

See that type part, that gives it the knowledge to know you are using css. Some sites you NEED to put that on their otherwise the links won' work correctly..

Also, I have experienced this code not workinf 100% perfect with the visited part. Sometimes it doesn' t follow my visited command...



scarednewbie -> RE: How to remove the underline from the Hyperlink (11/18/2002 23:47:08)

Oh P.S.

<style>
<!--
A:link {text-decoration: none; color: #0000ff}
A:visited {text-decoration: none; color: #0000ff}
A:hover { text-decoration: none; color: #ff0000 }
//-->
</style>

you do it like that... there is no need for the <!-- and //--> part....



bnavis -> RE: How to remove the underline from the Hyperlink (12/4/2002 23:23:24)

It took awhile but I have come to accept that design is important but never sacrifice the site' s usability.



flashlight -> RE: How to remove the underline from the Hyperlink (12/24/2002 10:31:56)

Rdouglass, Scared Newbie and others,

How can I do the no underline and rollover red on the links on the left side of this page: www.tsgcom.com?

I don' t see how to fit your code with mine.

Thank you,
Genny



Kitka -> RE: How to remove the underline from the Hyperlink (12/24/2002 16:35:10)

quote:

How can I do the no underline and rollover red on the links on the left side of this page: www.tsgcom.com?

I don' t see how to fit your code with mine.


I' m not sure if you are wanting to change the link style for the whole page or just the links on the left.

If it is for the whole page place this code within your <head>... </head> tags (and adjust the colours to suit your theme):

<style type=" text/css" >
<!--
a:link {color: #0000FF; text-decoration: none;}
a:visited {color: #00FF00; text-decoration: none;}
a:hover {color: #FF0000; text-decoration: none;}
a:active {color: #0000FF; text-decoration: none;}
-->
</style>

If you wish to only change the links on the left, you will need to assign them a special " class" . This code goes within your <head> tags:

<style type=" text/css" >
<!--
a.left:link {color: #0000FF; text-decoration: none;}
a.left:visited {color: #00FF00; text-decoration: none;}
a.left:hover {color: #FF0000; text-decoration: none;}
a.left:active {color: #0000FF; text-decoration: none;}
-->
</style>

PLUS ... you then need to designate exactly which links will use this particular style by adding a " class" declaration to the link like this:

<a class=" left" href=" offair.htm" >OFF THE AIR?</a>

I named the style " left" but you can call it anything you wish.

Good luck [:)]



flashlight -> RE: How to remove the underline from the Hyperlink (12/26/2002 12:50:53)

Thanks so much Kitka. It looks good on my page but I am still thinking about whether or not to use it.

I was wondering if you, or anyone else on here, knows how to make the links like they are at msn.com? No underline and at desired color on the page, but with rollover turning red and being underlined?

Thanks:)
Genny



Kitka -> RE: How to remove the underline from the Hyperlink (12/26/2002 13:11:27)

quote:

I was wondering if you, or anyone else on here, knows how to make the links like they are at msn.com? No underline and at desired color on the page, but with rollover turning red and being underlined?


Sure! There is a great tutorial at w3schools:

http://www.w3schools.com/css/tryit.asp?filename=trycss_link2

Play around with it - you' ll learn a lot about CSS - I did!

You could also look at the paragraph called " Setting Link Colors" at this site:

http://www.w3.org/MarkUp/Guide/Style



Cookie -> RE: How to remove the underline from the Hyperlink (1/2/2003 12:05:46)

I quite like to use: 

<style type=" text/css" > 
<!-- 
a:link {color: #0000FF; text-decoration: none;} 
a:visited {color: #00FF00; text-decoration: none;} 
a:hover {color: #FF0000; text-decoration: underline;} 
--> 
</style>


As this underlines as you mouse over!



hhammash -> RE: How to remove the underline from the Hyperlink (1/16/2003 4:34:46)

Hi all,

Kitka,
Nice solution for the left par.

Can we make many style between the <Style> and </Style>
a.left
a.right
a.myLinks

Etc.
Or do we have to make separate <Style> and </Style>

Also, is there a good tutorial for that on the web?

Thanks
Hisham



Kitka -> RE: How to remove the underline from the Hyperlink (1/16/2003 5:30:56)


quote:

ORIGINAL: hhammash

Can we make many style between the <Style> and </Style>
a.left
a.right
a.myLinks


Yes, indeed you can! As many different ones as you wish.[:)]

quote:

Or do we have to make separate <Style> and </Style>


No - there should only be one instance of <style> .... </style> in the headers.

Although, even better for an internal stylesheet is: <style type=" text/css" > .... </style>

quote:

Also, is there a good tutorial for that on the web?


The best that I know of is: http://www.w3schools.com/css/css_intro.asp



hhammash -> RE: How to remove the underline from the Hyperlink (1/16/2003 7:51:38)

Hi,

Thank you Kitka

I appreciate it.

Hisham



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875