CSS... global a:hover setting?

Eric Chadwick

Question to the Cascading Style Sheet gurus...

I have a couple different link classes (a.resume, a.footer, a.video, etc.) but I'd like them to all use the same a:hover style. Is there a way to do this?

Here's what I have right now. The a:hover only seems to affect classless links...

a {
  color: #ffaa00;
  text-decoration: underline;
 }

a:hover {
  color: #664400;
  text-decoration: underline;
 }

a.resume {
  color: #2222AA;
  text-decoration: underline;
}

a.footer {
 color: #666;
}

Brice Vandemoortele

a.resume:hover, a.footer:hover, a.video:hover {
color: #664400;
text-decoration: underline;
}

Brice Vandemoortele

Just so you know, a:hover does not affect the ones with classes because the selector has a lower specificity. Specificity is basically the priority of a css rule. id (#) or inline css (style="blabla") count for 100, classes(.) for 10 and regular tags and pseudo-classes ( : ) for 1.
a:hover = 2
a.yeah = 11
a.yeah:hover = 12

Eric Chadwick

Thank you Brice! How did you learn CSS? I've tried parsing the W3C spec, but it's pretty rough going. I've also tried a few CSS tutorial sites, but usually for specific things, not global theory.

Brice Vandemoortele

hi there, you're welcome
I got interested in web accessibility before I started 3d. I had to survive on the linux powered familial computer and web standards issue were a lot more frustrating back in 98 I think it comes very easily if you have a clever html structure, it is then just a matter of assigning this structure a cool look. That's why I guess it's important to know selectors first. Unfortunately the website I used the most is only in german and french. Once I got more used to the basics (browsing trough csszengarden helped a lot) I read a few w3c documents. Than by the time you gather more tricks It's an enjoyable syntax to learn since you have immediate feedback, pretty much like shaders, except that you only need a (proper) browser :P
btw I helps a lot to use the web developer toolbar plugin in firefox, it allows you to modify any page and to pick up specific elements' style while you're browsing.

cheers

Eric Chadwick

Thanks man, good tips, I appreciate it.

Sage

Eric if you want some quick info on CSS you might want to try Lynda.com for a month. It took out all the annoyance of learning the stuff for me. They are video tutorials on there and show some pretty cool things that you can do with it. I'm not sure how far along you are but it's fairly quick to pick up and forget if you don't use it often. I was thinking something along what Brice did but didn't feel like looking it up the syntax and all plus I don't know enough.

www.lynda.com

worth the money.

Alex

Eric Chadwick

Thanks Alex I'll look into it.

LoTekK

An [arguably] more elegant way to do it (depending on how you're using the classed anchors) would be to class the parent element that each anchor is nested in. For example, assuming you currently have each anchor within a div, you could class the respective <div> elements and style the anchors within them.

<div class="resume">
content
<a href="url">text</a>
</div>

css:

a {
  color: #ffaa00;
  text-decoration: underline;
 }

a:hover {
  color: #664400;
  text-decoration: underline;
 }

.resume a {
  color: #2222AA;
  text-decoration: underline;
}

.footer a {
 color: #666;
}

This may not be ideal, depending on how your links are structured, or how you plan on using them. If you go with Brice's suggestion, however:

[b]a:hover,[/b] a.resume:hover, a.footer:hover, a.video:hover {
color: #664400;
text-decoration: underline;
}

All in one, so there's less to change (and therefore forget).

Brice Vandemoortele

And add useless html syntax just for the sake of presentation right? This is not more elegant You should always keep content ans style separated or keep those extra tags to a minimum (especially div - which stands for divider - that people tend to use when they don't know what other tag to use while it should be used to 'divide' a large document into sections)
If you assume those tags are in the same container, which is not the case here (footer >< resume) the best would be to ID or class a meaningful parent:

<ul class="menu">
    <li><a href="">my first link</a></li>
    <li><a href="">mu 2nd one</a></li>
</ul>

LoTekK

I didn't actually mean adding extra containers. Like I said, depending on how his links are set up, it could be more elegant than adding specific classes to a global styling. Besides, if you'd looked at the html I typed up, I didn't say to nest the anchor within a div. I meant if the anchors showed up in specific sections.

Eric Chadwick

I went with the all-in-one. When I'm less busy I'll look into these other options, thanks for posting guys.

Eric Chadwick

Ok, so I have another CSS issue.

On my index page I want to convert all my thumbnails to bkg-image-reposition rollovers. Problem is, I can't get the divs to appear side-by-side, four to a row. Instead each one makes its own row, and the clickable area fills the entire row. I guess I have to use tables?

div.gmtsinterface {
    width: 132px;
    height: 100px; 
    margin-right: 16px;
    margin-bottom: 16px;
    border: 1px solid #664400;
    background-image: url(thm/gmts_interface.png);
    }

div.gmtsinterface:hover {
    background-position: -132px 0px;
    cursor: pointer;
    border: 1px solid #ffaa00;
 }

LoTekK

Off the top of my head, I'd say you need to float the divs (added in bold):

div.gmtsinterface {
    [b]float: left; [i]/* (or right, depending on layout) */[/i][/b]
    width: 132px;
    height: 100px; 
    margin-right: 16px;
    margin-bottom: 16px;
    border: 1px solid #664400;
    background-image: url(thm/gmts_interface.png);
    }

div.gmtsinterface:hover {
    background-position: -132px 0px;
    cursor: pointer;
    border: 1px solid #ffaa00;
 }

[/QUOTE]

Eric Chadwick

Awesome. Thank you fine sir.

Eric Chadwick

It's working great, thanks a ton. It's always the simple things.
http://ericchadwick.com