CSS Namespace and Inheritance

[Genimuse]

I don't quite understand how the CSS namespace works, nor how things are inherited. Here's my situation:

In the top right corner of this intranet page there will be, say, three icons that link to commonly used pages in the site, but will be customized (on the server side via ASP) for each user. In effect there are 3 "slots" where icons (with links) can appear, and any icon can appear in any slot.

I define the slots like this:

#icon1 {
	position: absolute;
	right:130px;
	top:10px;
	width:60px;
	height:50px;
	}

#icon2 {
	position: absolute;
	right:70px;
	top:10px;
	width:60px;
	height:50px;
	}

That kind of thing. Then I have these mouseover (hover) icons that change shape when the user moves over them, icons that fit in the "slots," like this:

#phone a {
	display: block;
	padding-top: 50px; height: 0px !important;
	height /**/: 50px; overflow: hidden;
}

#phone {
	width: 59px;
	background-image: url(gfx/iconPhone.gif);
}
#phone a {
	background-image: url(gfx/iconPhone.gif);
}

#phone a:hover {
	background-position: 0 -50px;
}

Each one individually works, but I want to combine them into the same space.

Because I don't understand how to have both things be true (due, I think, to a lack of understanding of the namespace and inheritance), I currently am forced to have a TON of styles, one for every icon in each possible slot, like this:

/* PHONE in position 1 */
#iconphone1 {
	position: absolute;
	right:130px;
	top:10px;
	width:60px;
	height:50px;
	}

#iconphone1 a {
	display: block;
	padding-top: 50px; height: 0px !important;
	height /**/: 50px; overflow: hidden;
}

#iconphone1 {
	width: 59px;
	background-image: url(gfx/iconPhone.gif);
}
#iconphone1 a {
	background-image: url(gfx/iconPhone.gif);
}

#iconphone1 a:hover {
	background-position: 0 -50px;
}

And then there's "iconphone2" and "iconphone3," and of course "iconcalendar1" and "iconcalendar2," etc., ad naseum.

I assume there's some kind of thing I can do if my stylesheets are designed correctly where I can reference something like "icon1.phone" or "icon2.phone" or "icon1.calendar," etc., but I'm not sure how to do it.

I apologize in advance if this is a really dumb question, as I'm only just learning CSS and know I've got a lot to learn.

 

[chessbot]

To have images change on mouseovers, the best way is to use Javascript. See a Javascript tutorial

--Chessbot

 

[Genimuse]

I'm very familiar with doing them in Javascript (I've done it dozens... no, probably hundreds of times), but I disagree that it's necessarily the best thing to use. CSS requires a lot less code and works beautifully, and is super-easy to modify. I'm very happy with it overall.

Because this project is an intranet I know which browsers will be used and so don't have to worry about degradation for older browsers, but using unordered lists as a menu rollover degrades beautifully to older browsers and even text browsers.

Javascript is great, but I don't see how it's inherently better than CSS for this purpose.

 

[chessbot]

CSS requires a lot less code

if there is no solution to your first post, then javascript requires a lot less code

AFAIK, there is no solution to your first post

--Chessbot

 

[Genimuse]

If there's no solution then I can see how it might be less code.

Though thinking about how to do it with Javascript, I'm not sure it would be that much smaller (depending on the number of icons), but I would be able to encapsulate the rollover code at least.

Stil, I'm hoping for a CSS solution.

 

[chessbot]

we will see

--Chessbot

 

[Genimuse]

The solution turns out to be really simple.

Define the icon "slots" using id (like div#icon1) and the icon items using class (like div.phone), and then apply the id and class to the div in the HTML. Works like a champ, very cool.

 

[chessbot]

i stand corrected

--Chessbot

 

[jemminger]

Genimuse,

that's the way to go, and is what i would have suggested had you not figured it out already - common shared styles in classes, item-specific styles in id's

additionally you can piggyback classes for "multiple inheritance" of sorts

.foo {
color:red;
}
.bar {
font-weight:bold;
}

<span class="foo bar">i have foo and bar class attributes</span>

=========================================================
-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }

 

[Genimuse]

Ah, excellent, I didn't know that, either. Thanks very much.