homepage Welcome to WebmasterWorld Guest from 50.17.7.84
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
trouble with the <a> tag
AJAllen




msg:3450375
 6:38 am on Sep 14, 2007 (gmt 0)

my first post after discovering this forum. Hi everyone, im sure Im going to enjoy hanging out here.

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

 

Marshall




msg:3450403
 7:18 am on Sep 14, 2007 (gmt 0)

Hi AJ, welcome to WebmasterWorld.

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]

AJAllen




msg:3450577
 11:26 am on Sep 14, 2007 (gmt 0)

Hi Marshall, and thanks for the reply.
im not sure if im further ahead or not. What i have in my stylesheet for the links is this....
a { font-family: Comic Sans MS, Arial, Verdana, sans-serif; font-size: 14px; color: #000099; text-decoration: underline}

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

Angelis




msg:3450578
 11:33 am on Sep 14, 2007 (gmt 0)

If you have your <a> tag in a div or a table or whatever in your code do something like this.

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

AJAllen




msg:3450595
 12:09 pm on Sep 14, 2007 (gmt 0)

Hi there angelis
I have a hybrid type setup. A 3 column table for the basic layout, and all styling done in css files.

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

Marshall




msg:3450597
 12:11 pm on Sep 14, 2007 (gmt 0)

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]

AJAllen




msg:3450610
 12:44 pm on Sep 14, 2007 (gmt 0)

ok, thanks folks! I wll try and get my head around what's been said, and then try and put it into place. I appreciate the help....with luck i may be able to help out myself on the forums....especially with HTML questions. css is not my strong point lol.
Cheers, AJ

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved