Reply
Multiple CSS Link Styles - Issues.
Old 12-07-2007, 11:06 AM Multiple CSS Link Styles - Issues.
Experienced Talker

Posts: 44
Hello, I want to learn how to have multiple designations to one rollover class such as: p, H1, .newclass, H2 a:visited - what is the best way to do this? the way I have it here doesn't work.

Also, I have a ID style:

#leftnav { padding-left: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; color: #666666; }

This works but then it causes bugs, is this how you would write the rollovers for an ID style? With a pound sign in front? I cant find any other style sheets written like this...

#leftnav a:link { color: #666666; text-decoration: none; }
#leftnav a:hover { background: #666666; color: #e8e8dd !important; text-decoration: none; }
#leftnav a:visited { color: #666666; text-decoration: none; }
Boar is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
Old 12-07-2007, 11:58 AM Re: Multiple CSS Link Styles - Issues.
tripy's Avatar
Fetchez la vache!

Posts: 2,134
Name: Thierry
Location: In the void
You are mixing things up...

In a css stylesheet, the # means that the style apply to an element identified by it's id, a ".something" means the style identify to every elements which have a class named "something" attached to them.

When you see something like
Code:
p, H1, .newclass, H2 a:visited
, this means that every elements <p>, <h1>, anything with the class "newclass" and every links already visited inside a <H2> element will be affected by the rule.
Check there for a concise but really handy reference:
http://www.ilovejackdaniels.com/chea...s-cheat-sheet/

The "rollover" that you speak of, is obtained by using the pseudo-selector :hover
But beware that IE can only apply the :hover on links, and nothing else.
__________________
Listen to the ducky: "This is awesome!!!"

tripy is offline
Reply With Quote
View Public Profile
 
Old 12-07-2007, 01:31 PM Re: Multiple CSS Link Styles - Issues.
Experienced Talker

Posts: 44
tripy, I understand the first two points already. Problem was that I couldn't get strings like this to work: "p, H1, .newclass, H2 a:visited" Should this work?

Now for the # sign, should I keep text elements in .classes and just avoid putting them in the # sign values?

OR the pseudo fix would look like this #leftnav :hover {} ?
Boar is offline
Reply With Quote
View Public Profile
 
Old 12-07-2007, 02:38 PM Re: Multiple CSS Link Styles - Issues.
LadynRed's Avatar
Super Moderator

Posts: 6,699
Location: Tennessee
The hover pseudo class will only work on links in IE 6 and below, you need a bit of JS to make it work in IE on any other element.

If you're going to use pseudo classes, then they MUST be defined in a specific order:
Link, Visited, Hover, Active - just remember LoVeHAte.

The problem may be specificity. You can add rules to multiple elements, comma separated, but you may have to be more specific in the way you use them.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 12-07-2007, 02:47 PM Re: Multiple CSS Link Styles - Issues.
Experienced Talker

Posts: 44
Should I just avoid adding text styles to something like this and make a seperate .class for text? Would that the proper way or do people do this?

#leftnav { padding-left: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 22px; color: #666666; }


Also if I make a seperate text class should I apply it using <span= OR <div class= ?
Boar is offline
Reply With Quote
View Public Profile
 
Old 12-07-2007, 03:01 PM Re: Multiple CSS Link Styles - Issues.
LadynRed's Avatar
Super Moderator

Posts: 6,699
Location: Tennessee
You can apply the text class to the <p>, but you're question was referring to a navigation setup. It is best to use an unordered list for nav links, then you can target and style the UL, the LI, and the links inside them.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!
"Using or working with IE is like having to wear a 1970's polyester suit with pantyhose and a girdle, to work everyday"
Carolina Corvette Club
LadynRed is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Multiple CSS Link Styles - Issues.
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.13361 seconds with 12 queries