Forum Moderators: not2easy
I would also settle for a 'strikethru' of a hyperlink AFTER it is clicked and page refreshed...but again I do not want to use the current CSS 'visited' link to accomplish this since I only want certain sections (tables) to be effected.
Any Help will be appreciated.
MsBarb
table a:link { color: red; }
table a:visited { color: purple; }
if you only want it to affect certain tables, then give each table its own ID... or its own class... something like this...
<table id="blah">
and do this...
#blah a:link { color: green; }
<html>
<head>
<style>
a {
font-size: 1.3em;
}
a.text-decor:visited {
text-decoration: line-through;
}
</style>
</head>
<body>
<div>
<a href="http://www.example.com" class="text-decor">
www.example.com
</a>
</body>
</html>
The table pages that I will be building will have many text hyperlinks in different cells that I will devote to say Advertising, PTR Programs, etc. ONLY links in these table do I want to be effected by a color change or strikethru AFTER page refresh...that change action telling members they have already clicked the link so they can easily SEE if new links have been added to the category subjects I will put on a page.
I do not know a lot of PHP code and even less about CSS, so please correct me about something...
<table id="blah"> let's say 1 table id will be PTR, so
<table id="PTR"> ...correct?
and do this...
#blah a:link { color: green; }
so then I would put in the CSS this:
#PTR a:link { color: green; }
#PTR v:link { color: red; }
...with my 2 lines above being the control for all links in table "PTR"...right?
And if by chance I am understanding correctly, does it make a difference WHERE in the CSS that I put the controls for that table ID? I ask this because the CSS as a whole is controlled by { } and spaces...isn't it?
Thanks again for your help, and I will soon be trying it out.
I take it that THAT piece of code controls tables and paragraphs, right? As for using the < > and " in the CSS...I see no others anywhere so now I am confused as to how I can enter & test what we have talked about.
[edited by: SuzyUK at 9:38 pm (utc) on May 26, 2008]
[edit reason] Please No URI's, see guidelines at top of forum [/edit]
a:link {
font-family: Trebuchet MS, Verdana, Arial, Helvetica;
font-size: 10px;
color: #006699;
text-decoration: none
}
a:visited {
font-family: Trebuchet MS, Verdana, Arial, Helvetica;
font-size: 10px;
color: #006699;
text-decoration: none
}
a:hover {
font-family: Trebuchet MS, Verdana, Arial, Helvetica;
font-size: 10px;
color: #006699;
text-decoration: underline
}
body {
font-family: Trebuchet MS, Verdana, Arial, Helvetica;
font-size: 10px;
color: #333333;
background-color: #FFFFFF;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px
}
A.menu:link {
color: #EEEEEE;
text-decoration: none;
font-family: Trebuchet MS, Verdana, Arial, Helvetica;
font-size: 11px
}
A.menu:visited {
color: #EEEEEE;
text-decoration: none;
font-family: Trebuchet MS, Verdana, Arial, Helvetica;
font-size: 11px
}
A.menu:hover {
color: #FFFFFF;
text-decoration: none;
font-family: Trebuchet MS, Verdana, Arial, Helvetica;
font-size: 11px
}
.menu {
font-family: Trebuchet MS, Verdana, Arial, Helvetica;
font-size: 11px;
color: #EEEEEE
}
td,p {
font-family: Trebuchet MS, Verdana, Arial, Helvetica;
font-size: 10px;
color: #333333
}
.text {
font-family: Trebuchet MS, Verdana, Arial, Helvetica;
font-size: 10px;
color: #333333
}
.account_menu {
background-color: #f9f9f9;
width: 145px
}
body {
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size: 11pt;
color: #333;
background-color: #fff;
margin: 10px;
}
a {
text-decoration: none;
color: 069;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.menu {
color: #eee;
}
.menu {
color: #eee;
}
td, p {
color: #333;
}
.text {
color: #333;
}
.account_menu {
background-color: #f9f9f9;
width: 145px;
}
1. Good practice (though not required) to end your font-family: declaration with the most generic option possible.
2. This (font-family: Trebuchet MS, Verdana, Arial, Helvetica;) appears to be a 'global declaration', so I have removed from all of the extra locations.
3. font-size: 11px; - Also appears to be a global declaration and so have removed the unneeded repetitiveness.
4. Moved the <body> declaration to the top of the document to help bring a natural order and flow. (Makes life easier later.)
5. margin: 10px; - Is shorthand that includes top, right, bottom, and left.
6. #eee, #fff - Shorthand color declarations.
7. Not 'required', but good habit to keep to lowercase usage only. (IMO)
8. If the site/page becomes more complex, better to add classes now - even if you won't need them until later. For example, you have declared "td, p" to have color: #333;. This is a global declaration. If you add <p> later that will have a different color, they will HAVE to be classed to override the global declaration which states that EVERY <p> will be color: #333;
9. points are okay. I'll leave that 'point' aside, but I usually set html, body to font-size: 100%, and then make adjustments in IDs or classes with ems.
10. You may find yourself locked in a tricky spot down the road with the body set at 11pt; - That could make development a lot harder if the site grows and expands.
11. a.menu {
color: #eee;
}
I assume that you will be putting a background-color: or image behind this; or it will be very difficult to read.
12. Doesn't hurt to have it declared, but default background-color: for the body is almost certainly always going to be #fff
13. Global example - You have declared:
a {
text-decoration: none;
}
Therefore, this will carry through all <a>, including the classed a.menu - which is why one should always be careful about making a global declaration. Use IDs and classes as much as possible. That global body: font-size: 11pt; concerns me. No problem if it suits your needs, but if your needs change, it could become a lot harder to upgrade the site down the road. Global changes made later could cause all sorts of hassles.
so they can easily SEE if new links have been added to the category subjects I will put on a page.
Forcing that the user's browser (for 'return visitors') recall which links have been visited and which have not is another matter, and a lot more complex; beyond what CSS (or I) can do for you. You may want to consider a method of introducing 'new' links in a 'more obvious' fashion and sidestep that issue for the moment. The user's browser (and settings) may recall links visited from previous visits, but not necessarily. This is a separate issue from streamlining your CSS file(s).
a.menu {
color: #eee;
}
.menu {
color: #eee;
}
td, p {
color: #333;
}
.text {
color: #333;
}
.menu, a.menu {
color: #eee;
}
.text, td, p {
color: #333;
}
So for this: "1. Good practice (though not required) to end your font-family: declaration with the most generic option possible."
you are saying that my favorite font (Trebuchet MS) should be listed as: Verdana, Arial, Helvetica, sans-serif, Trebuchet MS? But then all pages will use Verdana, right?..which is not a bad font either.
7. Not 'required', but good habit to keep to lowercase usage only. (IMO)...I do understand about the lowercase useage but do not understand in reference to where you are talking about the CSS.
8. If the site/page becomes more complex, better to add classes now - even if you won't need them until later....CLASSES, sorry I am lost here and have no idea what you are talking about. Could it be the earlier table specifications I would like to add to only some page areas?
9. points are okay. I'll leave that 'point' aside, but I usually set html, body to font-size: 100%, and then make adjustments in IDs or classes with ems....This is how the programmer wrote the CSS and all us POs of the script use and I do not really bother with sizes, just font faces.
11. a.menu {
color: #eee;
}
I assume that this in reference to an active menu link, right? I had always been told is good idea to have visited and active links change colors so members can easily see.
I assume that you will be putting a background-color: or image behind this; or it will be very difficult to read....Yes, I do haave an image background with table cells that have another light colored image background...and use both through the site. Most pages of the site use a header file which includes the page background image...
body {
background-image: url(../../images/gray-blueBKG.jpg);
13. Global example - You have declared:
a {
text-decoration: none;
}
Therefore, this will carry through all <a>, including the classed a.menu - which is why one should always be careful about making a global declaration. Use IDs and classes as much as possible. That global body: font-size: 11pt; concerns me. No problem if it suits your needs, but if your needs change, it could become a lot harder to upgrade the site down the road. Global changes made later could cause all sorts of hassles.
Oh my, a programmer friend of mine had been helping me with stuff and I was using his suggestions about all that Global stuff. My attempt was to make all my pages, script driven and/or pure HTML be as Search Engine friendly as possible.
Again, thank you very much for your help. I do appreciate it, even though I am confused about much. Know of a good place for me to begin to learn CSS stuff?
So for this: "1. Good practice (though not required) to end your font-family: declaration with the most generic option possible."
you are saying that my favorite font (Trebuchet MS) should be listed as: Verdana, Arial, Helvetica, sans-serif, Trebuchet MS? But then all pages will use Verdana, right?..which is not a bad font either.
The browser will look for the fonts in the order that they are listed in your declaration, so just select your order of preference. In this case, it will look for 'Trebuchet MS' first, then 'Verdana'. If not available, it will go to the third choice, and so forth, down to the generic bottom-rung sans-serif;, in which case it will select some sans-serif font. A minor issue really. Most people will be have most of these fonts available.
W3C - Fonts [w3.org] - This affects your selection of Trebuchet MS
Notice that the font family name "new century schoolbook", which contains spaces, is enclosed in quotes.
Any font name containing whitespace must be quoted, with either single or double quotes.
(Note: If a family-name contains white-space, it should be quoted. Single quotes must be used when using the "style" attribute in HTML.)
I do understand about the lowercase useage but do not understand in reference to where you are talking about the CSS.
The original file had A.menu:link and #EEEEEE;. Ticky-tack on my part - just mentioning. I sometimes capitalize the first letter of font names anyway though; that's just me:))
CLASSES, sorry I am lost here and have no idea what you are talking about. Could it be the earlier table specifications I would like to add to only some page areas?
a.menu or .menu - These are classes. The "." indicates that what follows will be a class.
For example. <a> will have color: #069; (Note the #. It is required. I gave you a typ0 that should be corrected.) However, <a class="menu"> will have color: #eee;
As a second example. <div> will use the global color declaration found in the body, #333. <div class="menu"> will have the color: #eee;
This is how the programmer wrote the CSS and all us POs of the script use and I do not really bother with sizes, just font faces.
Do the least damage possible, and make the least edits necessary to get what you need. This is a managerial issue.
I assume that this in reference to an active menu link, right? I had always been told is good idea to have visited and active links change colors so members can easily see.
Personally, I don't worry too much about :active. I do make distinctions between the default color, as well as the :visited and :hover colors. Personal preference. Do what works for you.
Get the project as far as you can, then turn it over to your friend to tweak out the last details.
Know of a good place for me to begin to learn CSS stuff?
WebmasterWorld
To be honest, changes are rarely made by the script programmers which leaves us POs kind of stuck with using only what we are provided, then trying to tweak HTML or PHP code around to get what we want...
In this situation, do as little as possible to get what you need done. Sounds like a train wreck waiting to happen as more and more people add more and more code, month after month. This is a management issue.
At no time did I mean to be 'picky' about anything, but my old brain take much longer to learn now days :-)
Last thing, please...
I can simply use this example...
tableptr a:link { color: red; }
tableptr a:visited { color: purple; }
....and then where I want to use those table 'commands', use this on the HTML page...
<table id="blah"> and do this...
#tableptr a:link { color: green; }
....but where do you suggest that I put the tableptr code snippets in the CSS?...provided I have actually typed them correctly here :-)
1. Be sure to put the "." in front of tableptr. This identifies it as a class.
2. You can have a class and an ID that have the same name; after all, they are distinct. However, for safety sake I would still rename one or the other - and name it in such a way that its purpose will be readily identifiable to you a year from now. It is good practice to name classes and IDs in such a fashion that you don't have to attempt remember what you meant:))
3. Test the ID as currently presented and you may run into issues. I have switched it from general ID to a <a> specific ID. (Others may offer differing opinions.)
HTML
<table class="tableptr">
<tr>
<td>
<a href="http://www.examplea.com">
LINK
</a>
</td>
</tr>
<tr>
<td>
<a id="tableptr"href="http://www.exampleb.com">
LINK
</a>
</td>
</tr>
<tr>
<td>
<a href="http://www.examplec.com">
LINK
</a>
</td>
</tr>
</table>
4. Not sure that you've quite got it yet, but you'll work it out once a complete sample is ready for testing. NOTE: You can only call an ID once on a page, while you can call a class as many times as needed. To examplify - You can only use <a id="tableptr"> one time in this table or on this page. Suppose you have several links that get color: green;? You are better off to rename the ID and to make it a class.
5. IDs are very powerful because of the weight that they are given in the calculation of the cascade. However, if the ID turns out to be 'handy', then you have a problem, so an ID should only be used when certain that it will only appear one time on a page; as with an <h1> header for example.
6. Time to hack out the page and start testing - see where you are.
