Hi,

i want to make a horizontal menu for my site (simple html so far, no css) , should look like this:

HOME | PORTFOLIO | FAQ | ORDER | CONTACT

Now, as i'm not a webdesigner really, how can i achieve that the links are NOT underlined as soon as i put an href around them ?
It looks crap with the underlines, that's why :)

Thanks in advance !

Make sure your menu is has been given an id or class to distunguish it (so you can have other link styles on the same page). Eg:


<div id="menu">
my menu links
</div>


Then use CSS to make sure those links aren't underlined:


#menu a { text-decoration:none; }


Job done.

Thanks a lot,

but as said the site is simple html, no css and i don't have the slightest clue about css at all - so is there a way to implement it without css but rather simple html code ?

Thanks ! :)

AFAIK the only other way to do it would be to use javascript. HTML doesn't (and shouldn't) offer a way to style links

If you want to incorporate the styles into the individual links you can do:


<a style="text-decoration:none" href="home.html"> | <a style="text-decoration:none" href="portfolio.html"> | ...ad nauseum

As you can see, this method gets old quickly. Much better to separate the styles into a CSS file by using an id or class as I mentioned above.

Originally posted by beatz
Thanks a lot,

but as said the site is simple html, no css and i don't have the slightest clue about css at all - so is there a way to implement it without css but rather simple html code ?

Thanks ! :)

Just as an fyi...css *can* be simple html. If you put the style he referred to between <style> </style> tags between your head tags on your html pages, all you have to do is use the other part he mentioned or try class="menu" within the <td> that your menu is sitting in. CSS isn't like a whole new language to learn, it can be done right inside your normal html. (Obviously, it can be VERY advanced and powerful if you want it to be, but you can start small as mentioned and accomplish things a lot easier.

If you decided to make all your links underline in the future, you'd have to search/replace or edit all those html tags whereas with css, you'd change your style in one place to update the whole page/site. It's worth playing around with. :)

Good luck,
Jason

Be Careful, when you don't underline your links, people may not recognize them, especially if you also changed the default colors.

Powi, this is for a horizontal menu bar. Are you saying you don't recognise the links on the menubar at the top of this very page - no underlines, and the default colour has been changed.

IMO the old Jakob Nielsen advice about not changing links because "people won't understand they're links" is less relevant these days. People are more web-savvy than they used to be, and who's to say beatz's target audience aren't expert users anyway? But even if they're novices, I doubt anyone would mistake a menu bar for anything but a menu bar.

IMO, a lot of what Jakob Nielsen has said in the past is out-of-date - not wrong, but needs some adjustment to get with the times. Unfortunately, this gives him a bad name, and people will disregard the vast litany of good advice he has given developers over the years.

The point is that Powi's advice is correct. You must make absolutely certain that people will understand a link is a link. This is a good, important tenet to remember. Zopester is also correct - a navigational feature distinguished as such away from a page's content get a little different treatment than normal links. So, follow both pieces of advice - that's my advice :)

Paul H

as said use css its simple and gets the job done

I've got this as css...

.links {
font-family: "BankGothic Lt BT";
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #000000;
text-align: center;
text-decoration: none;

But its still showing the underlined links, anything I've done wrong?

btw, using Dreamweaver MX for both html and css.

Yes, you've created a class called "links," but probably haven't tied it to your actual anchor tags in HTML. You can go about this one of two ways.

1. The hard way - include class="links" in every anchor tag, i.e. <a href="anotherpage.html" class="links">Go Somewhere</a>. Then change .links to a.links

2. The easy way - instead of changing your HTML for every link, simply make the rule apply to all a tags, i.e. a { CSS GOES HERE }. If you have links that you do not want affected by this rule, wrap them in a container and apply a different rule, or give them a class and write a rule for that class.

HTH!

Paul H

That works great, thanks, but i've actually tied it, or at i think i did.
<td class="links"><a href="main.html" target="mainFrame">home</a> This was what I had previously and had the style applied to it except for the 'no underline' links.

So now I have <td class="links"><a href="main.html" target="mainFrame" class="links">home</a> ie extra class="links"

It does work but just find it weird that it didn't work by having td class=...

It didn't work on <td class="links"> because you're not applying the style to the table cell. You're applying the style to the link within the table cell. So - as you've now discovered - when you attach the class="links" attribute to the <a/> element you're away!

You can remove the redundant class from the <td/> by the way. It's not doing anything and is just making your page that little bit weightier in terms of code size.

What you should have is

<td>
<a href="main.html" target="mainFrame" class="links" title="link title description">home</a>
</td>

If this does not work, you should check to make sure you have included your code to include the html to look for your external style sheet, or the you have put your css in the html document itself.

Just class your link :)

Originally posted by rois
<td class="links"><a href="main.html" target="mainFrame">home</a>
This will work just fine. The way you apply your style to your links now is to declare the rules using descendents.

.links a { CSS HERE }

You see, there are many different ways to skin this cat. It's hard to know the best way without seeing the page in question, but between the various methods described, hopefully you'll find the one that works best for your page.

<tr>
<td class="links"><a href="main.html" target="mainFrame" class="links">home</a>
| <a href="about.html" target="mainFrame" class="links">about</a>
| <a href="service.html" target="mainfram" class="links">service</a>
| <a href="contact.html" target="mainFrame" class="links">contact </a></td>
</tr>

The <td class="links"> should tell it to go look for css right?

But if I had the above but remove td class... it actually mess things up.

Those links are actually placed inside a table.

Ok, here's what you do.

Remove class="links" from all of your <a href> tags. You won't need it. Then, use .links a { CSS HERE } to style your links. This will work, and it seems to be the best approach for this particular scenario. Once you're done, you may want to read up a little bit on "descendent selectors." Using these (as you would be doing here), can make your code very efficient and easy to edit.

Good luck!

Paul H

Thanks Paul,

will give it a try.