View Full Version : Specific Header Attributes


FleursdeMaya
01-24-2005, 11:51 PM
Is there a way to make header attributes different than those of the rest of the style sheet? For instance, on my site I want the links to be one size, but I want all the header links to be a different size. But when I changed the A:link (etc) tags, it over-rode the font specifications I had for the headers. Is there a way to do this? Do you even get what I'm asking?

starlet
01-24-2005, 11:55 PM
Classes/IDs

http://www.htmlgoodies.com/beyond/classid.html

pb&j
01-24-2005, 11:55 PM
Here is an example that shows three different situations. One for normal full page links, the second for specific links, and the third for a group of links.

This would go into the HEAD section of your coding :
<style type="text/css">
a {text-decoration:none; color:#ff0000;}
a.testing {text-decoration:underline; color:#0000ff;}
.testing a {text-decoration:none; color:#c0c0c0;}
</style>

The first line will affect any normal link in your coding :
<a href="somepage.html"> text here </a>

The second line will affect individual links that specify that class in them :
<a href="somepage.html" class="testing"> text here </a>

The third line is for affecting a group of links such as in a DIV area :
<div class="testing">
<a href="somepage1.html"> text one here </a>
<a href="somepage2.html"> text two here </a>
<a href="somepage3.html"> text three here </a>
<a href="somepage4.html"> text four here </a>
</div>

The above shows only the main A tag being styled. You can also enter the specifics of LINK, ALINK, VLINK, and HOVER as well.

Example :
a.testing:hover {background-color:#00ff00;}
.testing a:hover {color:#ff0000;}

FleursdeMaya
01-25-2005, 11:40 PM
Thank you sooooo much. This will be perfect. :)

FleursdeMaya
01-26-2005, 12:18 AM
Hmmmm. I just put it in, and some of that helped incredibly, but for the header links, they only grew big on hover, when I had them set to be big always. If I pasted the code here, could someone maybe tell me what I'm doing wrong??

.testing a:link {font-size: 14pt;}
.testing a:hover {font-size: 14pt;}
.testing a:alink {font-size: 14pt;}
.testing a:vlink {font-size: 14pt;}

---bla--bla--bla---

<h1 align=center class=testing>
<a href="board.php?type=priv" title="The message boards">Homelands</a> ¤
<a href="index.php" title="Public front page">Borderlands</a> ¤
<a href="members.php" title="Private welcome page">Entrance</a> ¤
<a href="index.php?logout" title="Log out">Wander</a> ¤
<a href="voting.php" title="Voting">Politics</a> ¤
<a href="list.php" title="Member List">Aquaintences</a> ¤
<a href="messaging.php" title="Private Messaging">Converse</a> ¤
<a href="account.php" title="Account Setup">[current_username]</a><br>
<a href="how2play.html" title="Learn how to play">Learn to Dream</a> ¤
<a href="rules.html" title="Rules">Laws</a> ¤
<a href="goodgames.html" title="Other good games">Allies</a> ¤
<a href="credits_links.html" title="Credits/links">Acknowledgements</a></h1>

I can individually make each link the correct size (I finally realized you could do that) but I'd prefer to just have one easily changeable master tag. So is there any chance someone sees my problem??

P.S. Could you put a different keyword in instead of 'testing' to give you more specific classes? Or is the 'testing' part of the code?

Rosey
01-26-2005, 12:28 AM
you can name is whatever you want.

It should work the way pbj did it. Do you have it online so we could see?

FleursdeMaya
01-26-2005, 12:43 AM
I can give you my website if you want, though I'm not sure how that will help. I copied the code in my last post, though I can copy the whole thing if it would be helpful. Before I just gave you the parts it was used in. It worked on hover, but nothing else.
My Website (http://www.avidgamers.com/Dreamlands)

P.S. ::sheepish face:: One more questions. Maybe my last. Can you make a specific class have specific link attributes? For instance: what would I add to the following code to make it turn a specific color (yellow) on hover?

.visit:visited { color: ccffff; text-decoration: none;}

Rosey
01-26-2005, 03:33 AM
ok for links i don't think putting the class like that in the td tag is enough. I think the only way to do it is to put the code in the <a href> tag itself so it would look like this:

<a href="blah.html" class="whatever">clicky!</a>

The links you have now seem to be working ok other than the fact that they are in times . You have to specify font face and size in the link part of your css as well.