Adding a visited link color

[kimmer]

I'm playing with some pre-made (free) CSS templates. You get to manipulate them ... and so I am (it's honestly a great way to learn).  I'm stumped on how to add a visited link color to the one I'm using for photo album links. (The entire code is at the end of all this). Currently all the links are color 333 (a gray), and when you mouse over they do turn black. I'd like them to show RED once you've visited a page. I tried adding an "a:visited: to the code like this:

CODE

a {
    color: #333;
}

a:visited {
    color: #red;
}

a:hover {
    text-decoration: none;
    color: #000;
}

but that didn't work.  So I changed red to "CC0000" ... and that changed EVERY link on the page red.

I'm thinking that perhaps I need to make a new class and give it special link colors? If so, where in the code do I put the new class and it's code so that it doesn't muck up the whole thing?

Any help from any of our CSS Wizards would be humbly and joyously appreciated.

If you want to see the page:
http://www.spatulagraphics.com/oregoncoast.html

Here's the actual code:

CODE

/* Elements */

* {
    color: #666;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background: #FFFFFF url(images/orecoast_images/img01.gif);
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 11px;
}

h1, h2, h3 {
    margin: 0;
    padding: 0;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

h4, h5, h6 {
}

p, ol, ul, dl, blockquote {
    margin-top: 0;
    line-height: 18px;
}

a {
    color: #333;
}

a:hover {
    text-decoration: none;
    color: #000;
}

/* Wrapper */

#wrapper {
    width: 600px;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    background: url(images/orecoast_images//img02.gif) repeat-y;
}

html>body #wrapper {
    height: auto;
}

/* Header */

#header {
    width: 600px;
    height: 104px;
    background: url(images/orecoast_images//img03.gif) no-repeat;
}

#header h1 {
    float: left;
    padding: 35px 0 0 20px;
    font-size: 48px;
    font-weight: normal;
    letter-spacing: -1px;
}

#header h2 {
    float: right;
    padding: 68px 20px 0 0;
    font-size: 13px;
}

#header a {
    text-decoration: none;
}

/* Menu */

#menu {
    width: 600px;
    height: 35px;
    padding-top: 13px;
    background: url(images/orecoast_images//img04.gif);
}

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: normal;
}

#menu li {
    display: inline;
}

#menu a {
    display: block;
    float: left;
    width: 112px;
    height: 18px;
    padding: 4px 4px 0 4px;
    text-align: center;
    text-decoration: none;
    background: url(images/orecoast_images//img05.gif) no-repeat center top;
}

#menu .active a, #menu a:hover {
    background-image: url(images/orecoast_images//img06.gif);
}

/* Content */

#content {
    width: 600px;
    background: url(images/orecoast_imagess//img07.gif);
}

#content h2 {
    margin-bottom: 1em;
}

#content h3 {
    margin-bottom: 0;
}

#colOne {
    float: right;
    width: 340px;
    padding: 20px 20px 0 20px;
}

#colTwo {
    float: left;
    width: 180px;
    padding: 20px 20px 0 20px;
}

#colTwo ul {
    margin-left: 0;
    padding-left: 0;
    list-style-position: inside;
}

/* Footer */

#footer {
    width: 600px;
    background: url(imaimages/orecoast_images/ges/img08.gif) no-repeat;
}

#footer p {
    margin: 0;
    padding: 20px 0 0 0;
    text-align: center;
    font-size: smaller;
}

[Xairbusdriver]

You have at least two choices:

1. Create a class for some anchors—Menu anchors, anchor in the body, anchors for images, etc. Then assign the appropriate class when using the anchor.

2. Create anchors as children of "Body"—This would make them all follow the rules you want.

An important rule with styling anchors, BTW, is to assign them in the 'correct' order.
1. The basic style for any link.
2. The style for ":link".
3. Style for a ":visited" link.
4. A ":hover" link.
5. And finally an ":active" link.
However, you may not want/need all five.

The 'logic' is basically the same as a "Case statement". What ever 'state' the link is in is what determines which style gets applied.
If the link has never been accessed in this current session, the plain link style is used.
If the mouse is hovering over the link, the 'hover' rule applies.
Once you've visited the link and you are not holding the mouse over the link, the 'visited' style applies.
If you arrange the declarations in a different order you may get strange, shifting color/style effects that you may not want and that confuse the user.

In your code sample, you did not declare a 'visited' style, so the default style of the browser would take effect ( I think ).

In the sample in the first part of your post, you did not declare a 'link' or an 'active' style. For all I know, that may have caused the reaction you saw.

Another 'trick' when editing/testing CSS is to set your browser's cache(s) to zero. This will force every page (and any style sheets) to reload on every manual refresh of a page. Style sheets usually end up being cached and the browser may not 'see' the changes you make on the file on the server.

[kimmer]

Thanks, ABD. I'll play with it again tomorrow.

Cache .... I use a different browser when I change the code. I only have ... ummm ... 6 on my puter. LOL!

[Xairbusdriver]

QUOTE

I use a different browser when I change the code.

But if you ever use it for a subsequent change, it may still be using the cached style sheet. If you're on a cable/DSL connection, you'll probably not even notice the lack of caching, anyway. It is much more important and time saving on dial up. BTW, no guarantees on the suggested changes making any difference. I'm just guessing and too lazy to check my books!

[Paddy]

Kimmer, you can just use the following:

QUOTE

a:link   {
   color:#333;
}
a:visited  {
   color: #CC0000
}
a:hover   {
   color: #000
   text-decoration: none
}

I think the problem is the missing a:link style.

[jcarter]

Hi Kimmer and ABD,
I am taking a class in Dreamweaver now, and I used this,
a:link   {color: #1e43cb; }   blue
a:visited   {color: #6500c4}    purple
a:hover   {background-color: #1FA41C; text-decoration: underline}
a:active   {background-color: #C72727; text-decoration: underline}

<!-- a link is blue, a visited is purple, a hover is green and a active is red, the last 2 are underlined if you want, its ugly though.   -->

I am a bit confused by all of this CSS, but am slowly getting it into my old brain, its really neat what you can do with it!
I am looking for a class in CSS next so that I can pick up the basics so that I would understand what is really happening with it.

Those templates!   What do you have to do to use them?  Just get the source, copy it into your page, and substitute your own pictures?
I wish there was some of that info in our class but there isn't.
By the way, your pictures are absolutely gorgeous!  

I found this site, and its helping me,
http://www.w3schools.com/
Jane

[kimmer]

ABD, I'm still muddling through your excellent advice -- haven't had much time to monkey with things.

Paddy, "a:link" turned all my visited links to red (even the buttons). :-/

QUOTE(jcarter @ Dec 16 2007, 05:12 AM) <{POST_SNAPBACK}>

Those templates!   What do you have to do to use them?  Just get the source, copy it into your page, and substitute your own pictures?

There are several sites that offer free templates. Some tell you to just view source and copy it. Others give you the entire package with graphics. They come in a zip file. Then, depending on the licensing agreement, you can open things and manipulate. They usually don't give you the PS files, but once in a while someone does.

QUOTE

I wish there was some of that info in our class but there isn't.

Most likely not there, because using them is a shortcut and most folks consider it cheating. I find it an easy way to learn, plus I don't have the graphics abilities to make the pieces and parts -- and mostly I am bumping into other deadlines and so using available templates works for me at this point.

QUOTE

By the way, your pictures are absolutely gorgeous!

Thanks, and thanks for the link.

[Xairbusdriver]

Make sure the list of assignments are in the correct order:
1. :link (What it should look like before being visited, hovered over or clicked on)
2. :visited (The browser's history has recorded the visit)
3. :hover (While the cursor is over but not clicking)
4. :active (While being clicked)

And Paddy is correct, you don't need the plain A if you have the ":link" defined.

While it can be hard to get the changed style sheet to be recognized if your cache is not set to zero, you will also need to have the browser storing your surfing History so the :visited style will work.

Underlined links are as bad as any underlined text. It just looks like junk. Unfortunately, early browsers/computers didn't support color so another graphic way of indicating a hyperlink was needed. There is absolutely no reason to continue to garbage up a page with text obscuring underlines!

[jcarter]

I guess that I wont try these templates, as Ive got more pictures and graphics that I could use in 100 years, and I love making more and making digital art out of them.

But what I was more thinking of, if you see a page that you really like the layout of, can you copy the code, then use all of your own stuff and pictures.  But now that I am taking Dreamweaver class, that is probably not what I need to do.  I should try it once though.  I do take my best pages that Ive made, and copy my code into another page and add new pictures and text.
This is how Ive done these pages, so they sort of look alike except for the pictures, text, and the background images.
http://www.jcarter.net/lilly/three-months.html

OH, something clicked in my brain!!!!  This is the style sheet that we can create and apply to all our pages, I havent gotten that far in the lesson yet.
This sure is fun, but I am struggling with it, its not all that easy, but I am catching on.
Jane

[kimmer]

QUOTE(Xairbusdriver @ Dec 16 2007, 12:35 PM) <{POST_SNAPBACK}>

Make sure the list of assignments are in the correct order

They are.

QUOTE

While it can be hard to get the changed style sheet to be recognized if your cache is not set to zero, you will also need to have the browser storing your surfing History so the :visited style will work.

Cache and history are not probs - I've got them covered -- or uncovered as the case may be.

I was re-reading the code while I munched on my cheese sandwich and here's what I think (and feel free to tell me if I'm all wrong here):

• The current link definitions apply to EVERY link on the page -- no matter where the link sits (wrapper, header, body, footer, etc).
• I need to set up different link definitions for header and menu and content.If I'm correct, then I have to learn where to place the definitions.

Next week my copy of  CSS: The Definitive Guide should be here and that will be some good read and learn time.

QUOTE(jcarter @ Dec 16 2007, 01:35 PM) <{POST_SNAPBACK}>

But what I was more thinking of, if you see a page that you really like the layout of, can you copy the code, then use all of your own stuff and pictures.

You would have to read the individual license for the each page you want to copy. Some of them allow all kinds of modification, some allow less -- but usually they ALL require that you leave in certain headers, footers and copyright and link info. Like I said, you have to read the license that comes with them.

[jcarter]

These would be classmates pages, so I guess there wouldnt be any licence, but I could ask permission.
Thanks,
Jane

[kimmer]

QUOTE(jcarter @ Dec 16 2007, 02:47 PM) <{POST_SNAPBACK}>

These would be classmates pages, so I guess there wouldnt be any licence, but I could ask permission.

Okay. I thought you meant the free templates and code that I'm using.  Yes, ask them and offer to include a comment that states you found the source code at so-and-so's site and include the url to their site in your comment. That's what I have done in the past.

The only time I actually have a link back to someone's site on the page itself (like in a footer - is when it is a licensed code and requires the footer be left intact (like some of the freebies I'm using).

[jcarter]

This Dreamweaver program is really neat!  Its taking me a good while, as its got a pretty good learning curve. But you can do a lot with it.
I keep getting frustrated and going back and cranking my old html stuff into it, but am learning to try not to do that, as I can really mess stuff up doing that.
The CSS stuff is still eluding me somewhat, but thats my winter project, along with Lilly and family.
Jane

[Paddy]

Kimmer, I don't know why what I suggested didn't work, since I got it to work fine in Safari and FF (checked and double-checked).

However, I didn't play with the entire style sheet - just with those styles, so there may be something else in there messing things up. This, I'm afraid, can be one of the problems with taking someone else's style sheet and modifying it - things they've done may make things you add not work or do things you didn't expect. Of course, I've managed to do that all by myself too, but usually can backtrack and sort myself out. Not always though - I recently gave up on an all-CSS 3 column template with header and footer for one site I was working on; things were going swimmingly until I tried to add a navigation bar, at which point the page layout fell apart. Fiddled for 2 days and then decided that since the site itself is only going to exist in a non-CMS form for a few months, that I shouldn't waste my time! I will figure it out sooner or later - that just wasn't the time or the site to be doing it on! (And yes, I'll go looking for someone else's layout to see if I can sort out where I blundered - though that's what I did for those 2 days as well)

BTW - you could always go to the forums at http://www.webmasterworld.com and post the code and see if anyone there can help. You cannot put direct links to sites (I guess they're trying to avoid spammers, but it does make it a bit difficult to discuss sometimes) but can post problematic code.

Ah, the mysteries of CSS.

[kimmer]

Thanks for the forum link, Paddy.

So many forums
So few about which I know
So many forums
So little time to go.

QUOTE

Ah, the mysteries of CSS.

They are almost as much fun as reading a mystery from Dame Agatha. hehehe