A visitor just asked me recently how he could remove the underlining from his links using either the free Nvu or KompoZer web editors. He wanted to put some links in his navigation bar and did not want them to be underlined since it would ruin the visual effect.
This article assumes that you already know how to use either Nvu or KompoZer. These are free web editors that you can use to create your website. If this assumption is not correct, you should first proceed to one of my basic Nvu or KompoZer tutorials, which will help you to design your website using those editors:
It doesn't really matter which editor you choose; they're nearly the same. KompoZer is essentially Nvu with some of its bugs fixed. The link to get the free editors can be found in the tutorials itself.
In addition, if you are truly a beginner, you should start by reading my article How to Create / Start a Website. It guides a newcomer through all the stages of creating a website, and explains numerous things that new webmasters need to know.
Alternatively, if you don't use those editors at all, you may prefer to read How to Remove the Underlining from Links (HTML/CSS) instead. The latter accomplishes the same thing directly using CSS, and as such can be used in any web editor, blog software or CMS.
Before you wantonly remove the underlining from all the links on your site, be aware that links that are blue and underlined, like those you see on thesitewizard.com, are more or less a standard on the Internet. Anyone used to surfing the web will instantly recognise such blue underlined text as links, and will know that they can click on it to get more information on that particular item.
If you change your links so that they are no longer underlined, you are removing an important visual cue to links on your web page. Your visitors may end up not realising that the text they are reading are really links. Even if you change the colour of the text, they may misinterpret that different-coloured text as an attempt to emphasize some words.
This does not of course mean that you should never remove the underlining from your links, or change their colour. But you should be aware that what you do has certain consequences for the usability of your site. You may also want to provide some other visual cue that the text is actually a clickable link.
If all you want is to create buttons for your navigation bar, like those you see in the side column on thesitewizard.com and thefreecountry.com, it's much easier to simply use the Free Navigation Menu Wizard. The wizard creates buttons with the colours you specify, along with special effects like a changed colour when you hover your mouse over the button.
There are even tutorials for Nvu and KompoZer users to guide them step by step through the whole process:
Removing the underline from links that look like buttons on a navigation bar is a fairly standard practice among websites, and thus should not unduly affect usability for the majority of web surfers.
Start up either Nvu or KompoZer and load the page that you want to modify.
Select the text that you want to make into a link (for example, by dragging your mouse over the desired text). If you already have a link on your page that you want to modify, you should still do the same (that is, select the entire text of the link).
Click the "Insert" menu. In the menu that appears, select the "Link..." menu item. In future, I shall refer to such a procedure as "Insert | Link...". A dialog box labelled "Link Properties" should appear.
If this is a new link that you want to make, enter the web address (URL) for that link in the "Link Location" space. For example, if the link is to point to "http://www.example.com/", enter "http://www.example.com/" into the blank space in the "Link Location" section. If this is an existing link that you selected, the URL should already be in the box so you can skip this step.
Once you enter something into that "Link Location" space, the "Advanced Edit" button in the lower portion of that dialog box should be enabled. Click it. A new dialog box, labelled "Advanced Property Editor", should appear.
Somewhere at the top of the Advanced Property Editor dialog box, you should be able to see a row of three tabs: "HTML Attributes", "Inline Style" and "JavaScript Events". Click the "Inline Style" tab.
In the blank space under "Property", enter "text-decoration" without the quotation marks. Do not change the word "text-decoration" in any way. That is, don't add spaces, change from the small letters (lowercase) to capital letters (uppercase) or change my hyphen character into something else. Just enter it exactly as I provided it here. One way to do this is to cut and paste the word "text-decoration", without the quotation marks, into the box.
In the blank space under "Value", enter "none" without the quotation marks. Again, don't change anything, just put the word "none" exactly as I furnished it.
Click the "OK" button to dismiss the Advanced Property Editor, and then the "OK" button on the Link Properties dialog box to accept your changes.
If you use Nvu, your link will still appear to be underlined, but don't worry. This is just a bug in Nvu. If you have followed my procedure correctly, your link will not be underlined in a real web browser. (KompoZer has apparently fixed this bug, so your link should no longer show up as underlined in that editor.)
Save the page, publish it and load it up in a real web browser to check that your linked text appears as it should.
That's it. You have now removed the underlining from your link using Nvu/KompoZer.
Copyright © 2008-2018 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Remove the Underlining from Your Links in Nvu/KompoZer
