Google Answers Logo
View Question
 
Q: text-decoration underline and none on same page ( Answered 5 out of 5 stars,   2 Comments )
Question  
Subject: text-decoration underline and none on same page
Category: Computers > Programming
Asked by: twiddler-ga
List Price: $4.00
Posted: 26 Apr 2002 18:57 PDT
Expires: 03 May 2002 18:57 PDT
Question ID: 6277
Is it possible to have two links on the same web page...one with the
traditional underline, and one link with none, or the underline
removed? What would that code be...please provide a working simple
example.
Answer  
Subject: Re: text-decoration underline and none on same page
Answered By: skmitchell-ga on 26 Apr 2002 19:16 PDT
Rated:5 out of 5 stars
 
Hello twiddler.  You can use stylesheets to specify whether a link
should be underlined or not.  By default (as you know) they are. 
Specifically, to remove an underline, you can use the following style
sheet code:

<STYLE TYPE="text/css">
<!-- 
A:link {text-decoration: none}
-->
</STYLE>

This, however, will remove underlining for ALL URLs.  You could create
a class of links that perform underlining like so:

<STYLE TYPE="text/css">
<!-- 
A:link.nounderline {text-decoration: none}
-->
</STYLE>

Now, when you create a hyperlink, like:

<a href="://www.google.com">Google</a>

it will be underlined, like normal.  To create one *without*
underlining, simply specify class="nounderline" in the hyperlink tag. 
The following example shows two links - the one to Yahoo is NOT
underlined, while the Google on is:

<STYLE TYPE="text/css">
<!-- 
A:link.nounderline {text-decoration: none}
-->
</STYLE>

<a class="nounderline" href="http://www.yahoo.com">Yahoo</a><br>
<a href="://www.google.com">Google</a>

As an aside, I find it nice to have the links not underlined by
default, but have them underlined when the user moves their mouse over
it.  This can be done using the following stylesheet specification:

<STYLE TYPE="text/css">
<!-- 
A:link {text-decoration: none}
A:visited{text-decoration:none}
A:active{text-decoration:none}
a:hover{text-decoration:underline}
-->
</STYLE>

(you would need to add the .nounderline to each rule if you wanted to
have both underlined and nonunderlined links).

Finally, for more information on stylesheets, check out the following
URLs:
http://hotwired.lycos.com/webmonkey/authoring/stylesheets/
http://www.webreference.com/authoring/style/sheets/
http://wdvl.internet.com/Authoring/Style/Sheets/
http://directory.google.com/Top/Computers/Programming/Internet/CSS/?tc=1/

Happy Programming!
twiddler-ga rated this answer:5 out of 5 stars
thank you very much :D

this is exactly what I was looking for.

Comments  
Subject: Re: text-decoration underline and none on same page
From: xemion-ga on 27 Apr 2002 13:44 PDT
 
twiddler,

Adding multiple style sheets and using classes can be a lot of work
when you only want to change one link. You can change one link at a
time by using the below code:

<a style="text-decoration: none;" href="://www.google.com">Google
With No Underline</a>

<a style="text-decoration: underline;"
href="://www.google.com">Google With An Underline</a>

There a pros and cons to both methods.  Using the classes is overall a
better solution, while using the style attribute is more of a "quick
fix".  I suggest reading the links skmitchell gave you for more
information.  I just wanted to point out this alternative method.

Good luck with your coding!

Xemion
Subject: Re: text-decoration underline and none on same page
From: mplungjan-ga on 01 Jun 2002 02:26 PDT
 
However you may want not to use inline styles on hrefs since Netscape
4 can be very unhappy with that particular thing.

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  


Google Home - Answers FAQ - Terms of Service - Privacy Policy