different links defferent colours?

@arumdevilMar 27.2004

I am very new to web design and only know some basic HTML, no PHP or XHTML and I don’t really know about CSS either.

I’m using Dreamweaver to design my own website, I want to have a table of links at the top of each page to navigate the site with separate visited and moseover colours than the rest of the page, ie the links for the navigation are grey and black on rollover (with no underline), but normal text links in the rest of the page are default.

I have set up the navigation links how I want in dreamweaver but now all links on the page follow the same rules. How can I get the rest to follow a different set of rules???

thanks,

to post a comment

Full-stack Developer

24 Comments(s) _↴

@VladdyMar 27.2004 — #Tables are used for tabular data. Links (in the vast majority of cases) are not.

Uninstall DW, open Notepad and learn [URL=http://www.w3.org/TR/1999/REC-html401-19991224]HTML[/URL] and [URL=http://www.w3.org/TR/CSS21/cover.html]CSS[/URL] - you will find your answer there.

@arumdevilauthorMar 27.2004 — #yeah, I was kind of expecting a reply like that. Not very helpful really if you don't mind me being frank.

I don't really have time to learn more code then I know, though I did start without DW.

if anyone has any more helpful suggestions I'm all ears.

Also, RE tables for tabular data, originally I had a table with images as links for navigation. Now I have replaced the images with table cells (with background images) and put text links inside them for easier editing.

So if tables are not for graphical navigation, how do I do it and get all the images where I want them? I'm up for learning what I need to know despite what I said before but your blunt statement isn't helping me at all. I don't know why you are so precious about the subject.

@VladdyMar 27.2004 — #Sorry, most people post questions here with intention to learn. Apparently you expect things to be done for you (since you do not have time to learn how to do it yourself). I can certainly do it, but then I expect to be paid. You are welcome to contact me with your project for a quote.

@arumdevilauthorMar 27.2004 — #I intended to post this reply before you replied to my above message, but you beat me to it.

Anyway, I replied to you in the middle of something else and I hadn't read your post properly - I didn't see the links you posted. So I apologize for my hasty over-reaction and ungrateful tone.

I'll check out the links you suggest. All I wanted was to be pointed in the right direction and I see that I was not clear enough in the first place and out of line with my subsequent reply.

If you could just give me some idea as to more specifically where I should be looking that would be fantastic and most appreciated. If not, I'm sure I'll get there in the end, and thanks anyway.

thanks,

arum

@PeOfEoMar 27.2004 — #To do this you need css. Why dont you look at how I am doing it here http://quasi-ke.servebeer.com/layout/ that is a site I am working on (slowly)... You are just going to have to dive into my source code to find it (hint its in the css file... it being css and all). www.w3schools.com probably has it somewhere in the css section.

@arumdevilauthorMar 27.2004 — #cheers mate

@bizabilityMar 28.2004 — #Just make sure it's obvious to users what are links and what are not...

...and make visited links a different color than unvisited.

Web standard is: blue unvisited, purple visited.

Something similar to these colors, black and pink, for example should be okay. Grey turning to black when moused over? Hmmm. Well, then what color once they are visited?

Do you mean that mouse over turning them black is to indicate to users that it is a link? If your content text is in black, not sure how good that is.

Just some thoughts from usability perspective.

It's easy to assume users will know what is a link and what isn't, so that's why compliance with web standards can help.

The more perfect you can make your site in functionality and usability, the better your site, user experience, and the entire Web will be. Problematic web sites sour users and can make them less prone to use the Internet for anything.

Peace! ?

@PeOfEoMar 28.2004 — #i keep visited and active the same as a normal link, only hover is different for me. Its not that important, unless it is a big list of users and they all have profiles, then something like that I would change it so the user can see where they have been, or an image gallery or something. Or if it were a list of articles. But I do not make visited and active stand out for normal body / nav links. Nor is it a web standard, atleast I have not heard of it being one, I do not see any way it could hurt accessability.

@bizabilityMar 28.2004 — #Not a web standard, sorry, it is more accurately described as a web convention. Also a design guideline. A web standard means basically "absolutely true for all situations. period." correct?

Jakob Nielsen advocates what I said.

See also Thomas Powell, WEB DESIGN, p. 32: "If we turn off link coloring so that links never look visited, we are forcing users to recall whether they have selected a certain link before."

I can't think of a situation where it would not be important to a user to know whether or not he/she had visited a given link. There could be a situation, but I can't think of one.

Navigation links, you mean like page tabs? I can see some types of site navigation links "Contact Us" and such not needing this coding. Okay. If that's what you mean, I agree with you there. But ALWAYS for articles. It's getting late and I can't think as clearly as I should on this topic. I give up, but I think we agree pretty much on this.

Designers need to have usability input, and usability guys need to study design more. That's my world view.

?

@PeOfEoMar 28.2004 — #The user is going to know if they have been to your pages because and if they are looking for the page with all the news then it is pretty obvious that it is the link 'news', just give nav links appropriat names and keep your aesthetics because I think having active and visited links are ugly. I have never heard of Jakob Nielsen, names of people usually do not mean anything to me. Unless it is Jeffrey Zeldman because I have a pretty good idea of what I am doing. Furthermore keeping the visited link is not a web standard, The vast majority of sites do not have it.

www.alistapart.com

www.ryanbeill.com

www.happycog.com

www.hicksdesign.co.uk

www.zeldman.com

That is a few standards compliant sites that do not use it, these sites are used as models for design. Also, you can look at any of the css zen garden layouts and find that a vast majority do not use an a visited site.

@arumdevilauthorMar 28.2004 — #Argh, a fine little debate you have created in my stead ?

It's the nav links that I want to control the color of - normal links I'm happy to have changing colour once visited but for my navigation tabs that would disrupt the look and feel.

grey with black mouseover is what I have now but it is with a rollover image[URL=http://www.guitars.arumdevil.com/]see here for the page[/URL] ,

I want to change it to text over a background image.

Now since posting this question I see it is the opinion of many members of this forum that tables should not be used to layout graphics on a web page.

This is the first I've heard of it, so I have a couple of questions regarding the subject:

1) why not?

2) then how??

cheers guys,

aurmdevil

@PeOfEoMar 28.2004 — #www.quasi-ke.servebeer.com/layout/ My menu does exactly what you want.

<i>
 </i>a:link {color:#788282;text-decoration:none;}
 a:visited {color:#788282;text-decoration:none;}
 a:hover {color:#aaaaaa;text-decoration:none;}
 a:active {color:#788282;text-decoration:none;}
 a.headerlnk:link {color:#000000;text-decoration:none;}
 a.headerlnk:visited {color:#000000;text-decoration:none;}
 a.headerlnk:hover {color:#788282;text-decoration:none;}
 a.headerlnk:active {color:#000000;text-decoration:none;}

the top part is body links you chan change visited if you want, the bottom part (headerlink class) is the menu that goes black to grey.

Put this in a <style type="text/css"></style> and put it in your head section.

@arumdevilauthorMar 28.2004 — #Thanks peofeo, that's very helpful, can't thank you enough ? ?

@PeOfEoMar 28.2004 — #no prob.

@Paul_JrMar 28.2004 — #[i]Originally posted by PeOfEo [/i]

[B]

<i>
 </i>a:link {color:#788282;text-decoration:none;}
 a:visited {color:#788282;text-decoration:none;}
 a:hover {color:#aaaaaa;text-decoration:none;}
 a:active {color:#788282;text-decoration:none;}
 a.headerlnk:link {color:#000000;text-decoration:none;}
 a.headerlnk:visited {color:#000000;text-decoration:none;}
 a.headerlnk:hover {color:#788282;text-decoration:none;}
 a.headerlnk:active {color:#000000;text-decoration:none;}

[/B][/QUOTE]
I prefer to use [URL=http://www.w3.org/TR/REC-CSS2/selector.html#descendant-selectors]descendant selectors[/URL], as it makes things easier.

@pyroMar 28.2004 — #They also help you avoid classitis.

@bizabilityMar 28.2004 — #arumdevil: I think I understand your link color strategy and I tend to agree with it. Hypertext links generally should change color to indicate they've been visited...to help the user know where they've been...it is annoying to forget what links you've visited and waste time selecting links you've already seen.

PeOfEo: Jakob Nielsen is widely considered the father of web usability analysis, a former software engineer at Sun.

www.useit.com

Design is usually a means to an end: help users accomplish a task or find info or enjoy functionalities (art, entertainment, music, games, video, etc.).

Usability is not aesthetic theory, it is tested principles based on observing actual typical users (low to high skilled) attempt to do things at web sites.

Design, programming and usability can work harmoniously together. That's why I come to this forum...to learn as much as I can about design and development issues as they exist in themselves, and as they relate to usability issues.

Thanks for your honest replies, though. I want to see your point, because you're correct in certain aspects or applications.

Very few principles apply always to every case.

@PeOfEoMar 28.2004 — #Like I said, a name and a degree are not things that impress me, many people like to say "I have a comp sci degree and do a lot of backend stuff but like to focus on design, I make 5,000,000,000 a year"... but you use invalid code? I would disaggree that visited link would make a site the least bit less accessable and if its for navigation it would screw up the aesthetics and if your links are titled appropriatly the user will not need it to be another color to see where he is going. A visited link could actually confuse the user if the link for the page the are on is a different color too they would have several links of different colors. If a browser does not support link colors or css it goes back to the defaults so it is no biggy there either.

@bizabilityMar 28.2004 — #Fair enough then, I think I understand your point and I appreciate your taking the time to help me understand.

Not to belabor the point, but if there is a lengthy list of articles, for example, in blue (meaning "hypertext links") type, and you are in a hurry, doing research, or looking for a fast answer to a question for a client...

...it's easy to click, click, click, click, what I call a "linking expedition," and soon you're dizzy and in a hurry, and you start clicking on links you already saw, and you get annoyed at the time wasted, and it's a violation of usability principles, in this specific case, to not have those visited links change in color to, say, purple.

You say "accessabililty" but I take that as accommodating blind, disabled users, etc. Whereas "usability" means simply easy to use, easy error recovery, easy memorability, etc. Like

"user friendly" but not "dumbed down" nor "anti-aesthetic."

?

@PeOfEoMar 28.2004 — #alrighty. I am not saything that leaving a visited link is bad but its just a preferences, I would still use it if I were makiing a forum or something.

@arumdevilauthorMar 28.2004 — #So, thanks to this thread (and largely PeOfEo) I now have the links for the navigation doing what I want, and I have started to understand what CSS is all about (despite what I may have implied before, I do actually want to learn).

So now, what about my other questions?

Why not use tables for layout of grafix?

if not tables then how to get images laid out in a precise way?

cheers

@PeOfEoMar 28.2004 — #with a css class. You can say

<img src="woot.woot" alt="woot" class="woot">

and in that class give the images a relative positioning with a margin of 10 from all sides, then have another class for column two and another for three or do a class for each row, well those would be the easiest ways I think. Its not that hard. I mean if I can lay out a news column with css www.quasi-ke.servebeer.com/layout/ (again with the thing I am worken on) then I could just as easily do it with css. If the galley is getting images from a data base and it is all automated server side the same applies just put them in a class. *note you do not have to use a data bound grid, just use a repeater (if you use asp.net... or run your select statement through a loop :p, this server side advice is probably over your head so if you do not understand me just ignore what I am saying.)

@SirHans004Mar 29.2004 — #I'd say that making visited links different from the unvisited links is ugly. Just plain ugly. I expect my visitors to be more intelligent than your average farm-house pig. Also, as PeOfEo said, many many "validcode-accessibilty-cssdesign" sites don't do it.

PeOfEo: Just a note on your on-going project... Good job so far, but that "fake latin" you've got there is, well, fake. It's faker than Fake. Your site deserves the Real Fake Latin. [URL=http://www.lipsum.org]LINK>>Lipsum.org<<LINK[/URL]

@PeOfEoMar 29.2004 — #heh never, that latin came from adam brill's fake latin maker

Also in #Full-stackDeveloper _↴

IE7 can't handle CSS Changing hosting providers... redirecting the domain name?What Is The Best Link To Use

Success!

Help @arumdevil spread the word by sharing this article on Twitter...

Tweet This

different links defferent colours?

24 Comments(s) _↴

Also in #Full-stackDeveloper _↴

Success!

Social

Version

different links defferent colours?

24 Comments(s) ↴

Also in #Full-stackDeveloper ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

24 Comments(s) _↴

Also in #Full-stackDeveloper _↴