Forum Moderators: not2easy
Anyway, I have a question that someone may know the answer to. I use a style sheet to get my links looking the way want. the problem is, how can I EXCLUDE some of the links from looking that way?
The <a name> tag is the thing....because it needs to have a in the tag, it gives the anchor the appearance of a link. Which obviously isnt what I want, when the anchor text is perhaps a heading further down the page.
I have scoured every css tutorial i can think of, to try and find the answer. Hopefully, someone knows what to do.
Thanks very much, and take care.
AJ
There are several ways to do this and one thing to remember which may help is everything is a child (or parent) to something. Say for example you are using a two column layout with the left being navigation and right content.
#navigation a {
color: #000;
}
#content a {
color: #00F;
}
This will assign black and blue links respectively to the two columns. You can even take this further to:
#content h1 a {
color: #0FO;
}
With this, all your content links are blue except those in an <h1> tag. you can alos do this with <p>, <uL> and so on. The only other solution is assign classes:
a.normal {
color: #F00;
}
a.normal:visited {
color: #090;
}
a.normal:hover {
color: #0F0;
}
Then you anchors read:
<a href="whatever" class="normal">
Hope this helps.
Marshall
[edited by: Marshall at 7:18 am (utc) on Sep. 14, 2007]
a:hover { font-family: Comic Sans MS, Arial, Verdana, sans-serif;
font-size: 14px;
background-color: #00068f;
color: #ffffff;
}
probably i should have my fonts set to a percentage, but that something I will change later.
Anyway, I want to have a list of links at the top of the page, that jump to various sections on the page, or even other pages. The anchor link could be an h2 heading, h3, a bolded word or whatever.
Surely i dont need to create a separate id or class, for every different instance? This must be something people do all the time, but for some reason, I havent found anything written about it anywhere.
I have even considered using a transparent gif at the anchor points, and styling a class so they dont show up on hover. But thats getting pretty far fetched, and Im sure its not something that needs to be done?
Thanks, AJ
<div id="somename"
<tr id="somename"
Then in your CSS file you would put the a tag like this;
#somename a:hover { font-family: Comic Sans MS, Arial, Verdana, sans-serif;
font-size: 14px;
background-color: #00068f;
color: #ffffff;
}
I understand what your saying. If i do that, it would mean putting all content inside divs with the id name, EXCEPT for areas that use the <a name => tag right? I thought there must be some way of making a class that excludes any styling applied to it, so it goes back to whatever the default is?
So with the links, a class that allows the <a name tag> to be whatever its originally intended to be....a bold word, an h2 or h3 etc.
I would have thought this is something that people have come up against before and found the solution.
In the meantime, i think about all I can do is to make sure all my anchors are h3 tags. then make a class called anchor or something, and style it as the h3 should be....i cant think of anything else.
Cheers, AJ
Surely i dont need to create a separate id or class
This is the advantage of CSS. As I mentioned in my earlier post, you can assign an anchor style to an entire section or child of that section. If you want your "normal" anchors, say anchors in regular text sections, and your main content area is #content, then you can either use the default setting or
#content a {
color: #00F;
}
which would make all the text anchors blue and normal weight, in this instance. But if in that same <div> you want the <h2> bold, then
#content h2 a {
color: #00F;
font-weight: bold;
}
From there, you work down:
#content h2 a:visited {
color: #009;
font-weight: bold; /* need not be repeated here */
}
#content h2 a:hover {
color: #0F0;
font-weight: bold; /* need not be repeated here */
text-decoration: none;
}
And so on. This could be a <div> or <td> if you are using tables. So, unless I am misunderstanding your question/problem (which would not be the first time ;) ) then this should be the solution.
Also, once you apply the font-family, font-size or weight to the "a", you need not repeat them for the "visited" and "hover" unless you are changing the font family, size or weight.
Marshall
And don't call me Shirley! (see post about best lines from a movie quotes [webmasterworld.com])
[edited by: Marshall at 12:13 pm (utc) on Sep. 14, 2007]
