ivanmax Posted April 26, 2006 Posted April 26, 2006 Hi everybody! Can somebody tell me if it is possible to avoid the line under the text in a link created in html? http://www.pedaldoc.com/html/mainpages_eng...0real_Intro.htm I want to avoid the line under the "About us" appearing. Thanks a lot to everybody! Iván. Quote
TCH-Thomas Posted April 26, 2006 Posted April 26, 2006 There´s probably better ways but here is one... ><a href="pagename.htm" style="text-decoration:none"> Quote
ivanmax Posted April 26, 2006 Author Posted April 26, 2006 (edited) Thanks a lot, that works. Could somebody explain me (or point me to a good tutorial) how to do a rollover button using html or Css? I mean a button which is only a line of text that changes colour when the cursor goes over it and that changes colour again when the link is visited? I have had lots of problems with flash lately after the Microsolf update and I am going to ditch all the flash stuff from my site: www.pedaldoc.com Regards and thanks in advance to everybody. Ivan. Edited April 26, 2006 by ivanmax Quote
TCH-JimE Posted April 26, 2006 Posted April 26, 2006 Hello, Its all to do with with the A href css tag. Remember, all these CSS bits but fit in the ><head> <style type="text/css"> INSERT HERE </style> </head> <body> </body> </html> E.g. insert this bit in your style area in the <head> tag ><style type="text/css"> A:link {text-decoration: none} A:visited {text-decoration: none} A:active {text-decoration: none} A:hover {text-decoration: underline; color: red;} </style> Then if you add this in your body content area: ><a href="www.totalchoicehosting.com">The Worlds best web hosting company</a> Now try it out. Each one of the link, visited, active and hover are self explantory really and you can do just about everything you want to them. E.g. this turns it to red background: ><style type="text/css"> A:link {background: #FFCC00; text-decoration: none} A:visited {background: #FFCC00; text-decoration: none} A:active {background: #FFCC00; text-decoration: none} A:hover {background: #FFCC00; font-weight:bold; color: red;} </style> Or you could have several classes: >.class1 A:link {text-decoration: none} .class1 A:visited {text-decoration: none} .class1 A:active {text-decoration: none} .class1 A:hover {text-decoration: underline; color: red;} .class2 A:link {text-decoration: underline overline} .class2 A:visited {text-decoration: underline overline} .class2 A:active {text-decoration: underline overline} .class2 A:hover {text-decoration: underline; color:green;} and then: ><span class="class1"><a href="www.totalchoicehosting.com">The Worlds best web hosting company</a></span> <span class="class2"><a href="www.totalchoicehosting.com">The number one hosting comapny</a></span> Give it a try, any problems, give us a shout! JimE Quote
ivanmax Posted April 26, 2006 Author Posted April 26, 2006 Thanks a lot to everybody. Let´s see if I can get rid of those dodgy flash buttons. They look really horrible after the microsoft update! Thanks again, Iván. Quote
abinidi Posted April 26, 2006 Posted April 26, 2006 As you do this, remember that for accessability reasons you don't want to exclusively use color to identify links on your page. There are a good percentage of people out there who are color blind who won't be able to differentiate between colors to know what is a link and what isn't. It's not a bad idea to take a screen shot of your page and view it in Photoshop (or similar) and convert the image to greyscale. If the you can still differentiate between normal text and links then you're probably okay. Removing the underline on links can make it hard for your users to know WHAT is a link and what isn't... Quote
Samrc Posted April 26, 2006 Posted April 26, 2006 Don, I love the Listamatic site. Quick easy reference! Quote
abinidi Posted April 26, 2006 Posted April 26, 2006 Wow. That Listamatic site was awesome!! Thanks Don! Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.