Print Page - Adding a visited link color

Archives => 2007 => Topic started by: kimmer on December 14, 2007, 03:57:07 PM

Title: Adding a visited link color
Post by: kimmer on December 14, 2007, 03:57:07 PM

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;
}

Title: Adding a visited link color
Post by: Xairbusdriver on December 14, 2007, 10:07:23 PM

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.

Title: Adding a visited link color
Post by: kimmer on December 14, 2007, 10:30:02 PM

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!

Title: Adding a visited link color
Post by: Xairbusdriver on December 15, 2007, 05:14:41 PM

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!

Title: Adding a visited link color
Post by: Paddy on December 15, 2007, 10:31:13 PM

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.

Title: Adding a visited link color
Post by: jcarter on December 16, 2007, 07:12:31 AM

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}



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

Title: Adding a visited link color
Post by: kimmer on December 16, 2007, 12:31:46 PM

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.

Title: Adding a visited link color
Post by: Xairbusdriver on December 16, 2007, 02:35:50 PM

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!

Title: Adding a visited link color
Post by: jcarter on December 16, 2007, 03:35:57 PM

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

Title: Adding a visited link color
Post by: kimmer on December 16, 2007, 03:46:56 PM

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.

Title: Adding a visited link color
Post by: jcarter on December 16, 2007, 04:47:58 PM

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

Title: Adding a visited link color
Post by: kimmer on December 16, 2007, 06:12:31 PM

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).

Title: Adding a visited link color
Post by: jcarter on December 16, 2007, 08:09:54 PM

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

Title: Adding a visited link color
Post by: Paddy on December 16, 2007, 09:42:49 PM

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.

Title: Adding a visited link color
Post by: kimmer on December 16, 2007, 11:17:10 PM

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

Title: Adding a visited link color
Post by: Xairbusdriver on December 17, 2007, 11:49:22 AM

Kimmer,
You are correct, the styles you created will apply to every link on the site/page. The fix for having different styles in different places is easy, of course, and is exactly what CSS is for. I do the same thing for links in my main navigation bar (actually a horizontally displayed list), the page nav list on the right-hand side of each page and other links in the body of the page. Just create a class for each type/location for those links.

a.menubutton:link {blah, blah, blah...;}
a.menubutton:visited {blah, blah, blah...;}
a.menubutton:hover {blah, blah, blah...;}
.
.
.
a.text:link {blah, blah, blah...;}
a.text:visited {blah, blah, blah...;}
a.text:active {blah, blah, blah...;}
.
.
.
a.whatever:kind_of_link...

Then, in the "menu" div, for example just use:
<a class="menubutton" href=".....">Home</a>

Then, in the "body" section, for example just use:
'...some interesting <a class="text" href=".....">some interesting text 'link'</a> in a paragraph...'

Note, you don't specify whether it is a "link", "active", "hover", etc. The browser does all that work, all you need to do is tell it which style to use in that area of the page with the 'class="..." ' label.

Jane,
"Borrowing" page layouts/designs as well as CSS techniques can help you understand the html/CSS. But cutting and pasting is a good way to create problems for yourself if you don't understand exactly what all the code does! That may be the only consequence you suffer, but it can be a very big one and waste a lot of time. The hardest part of a good site is the design part, as far as I'm concerned. The color palette, consistent page layout, paragraph, link, headline, sub-heads, sidebars, header/footer details...if all that is not helpful and easy to find/use, the viewers simply will not return or use the site as often as you might want. Of course, moving all the styling info to a style sheet makes the html much more compact and easier to edit but you'll probably find that you'll then be doing most of your 'tweaking' in the style sheet rather than in the html. ;-)

Title: Adding a visited link color
Post by: jcarter on December 17, 2007, 01:36:11 PM

I am finding that as I go along in the lessons with Dreamweaver that its becoming easier for me to actually get what I want to have the page look like.
At first I really didnt know what the page would look like, but now, in the Design mode, you see it as you construct. Then switch back to the code or have it split screen, and its all beginning to come together for me now.
Then when I get a page I really like the looks of, I try to model the others after it for that particular photo album, might have several pages linked together. I havent gotten to the point of having the thumbnails lead to the big picture yet, its all right in Dreamweaver, but its a long learning process. THere is another class in just CSS, and I am thinking to take that one when I feel as if I am ready.
Now that I can do more, I am experimenting around with it and its working! What a program! I can now get a pretty decent looking page, and I just love the graphics part, and am finally getting to use some of my stuff and pictures.

I guess that I really dont want to use the templates, though I see some of the amazing photo albums that the TS people have made here. So I will just keep on with pbase.com and dot mac for the photo albums that need the thumbnails and that fancy stuff. But there sure is a great feeling to make your own page from scratch! I really enjoy it.
Jane

Techsurvivors

Archives => 2007 => Topic started by: kimmer on December 14, 2007, 03:57:07 PM