CSS Question

I'm re-making my website, again, but this time I'm making sure it holds up to validation standards, and working almost entirely with CSS.
Meaning, all pages refer to one css file, and the html markup and tags should be identical on every page, with only the text content being different.
But I'm sure you knew that.
Anyway, I have a link bar. This link bar is full of Div's, and each div is a box that's a link taking you to a different page. The background of these div links is set up all in css.

Eh, I'll just give you the code..

Html:

Code: [Select]

<div id="links_wrapper">

<div id="link_home"><a href="index.html">Home</a></div>
<div id="link_about"><a href="about.html">About</a></div>
<div id="link_audio"><a href="audio.html">Audio & Scores</a></div>
<div id="link_video"><a href="video">Video</a></div>
<div id="link_contact"><a href="contact">Contact</a></div>

</div>


Here is the CSS for the wrapper and just ONE of the link divs:
(the background color is just in case there's lag loading the background image, to avoid ugly color clashes before it's done loading.)
(i.e. the background image is the entire size of the div, if you needed to know that.)

Code: [Select]

#links_wrapper {
height: 24px;
width: 780px;
margin: 2px auto;
}

#link_home {
background: #081472;
background-image: url(images/button_home.png);
background-repeat: no-repeat;
float: left;
height: 24px;
width: 154px;
margin-left: 1px;
text-indent: -9999px;
}

#links_wrapper a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}

#links_wrapper a:hover {
background: #00b060;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

My question is this: Is there some CSS psuedo class element or whatever that will look at the html file name and change background accordingly?

Like, when it's on index.html, the background of #link_home is different.
Or, more clearly, when you're viewing about.html, the background of #link_about is different.

You know, to reflect to the website user what page you're currently on, aside from just using header text or html title text of stuff like that.




I figured I'd ask here, since you guy are usually pretty awesome with this kind of stuff.
But if you don't know, don't sweat it, I'll ask someone here at the university if they know.

On each page (say contact.html) give the current link an extra class. Such as <div id="link_contact" class="link_active">.

Then in your css:

.link_active {
whatever-shit: here;
}

=o

If you want to go for ultra-anal correctness it's probably better to use a horizontal list and consolidate your CSS (I imagine you have alot of duplicate properties in that css) but who cares, lol. I don't use it for rmrk's menu.

Each button has a different background to it (the text is included in the png), but I guess I could do that and just do a transparent color overlay or something.

Thanks.

Code: homepage [Select]


<ul id="navigation">
   <li class="home_active"><a href="#">Link Home</a></li>
   <li><a href="#">Link About Page</a></li>
</ul>


Code: aboutpage [Select]


<ul id="navigation">
   <li><a href="#">Link Home</a></li>
   <li class="about_active"><a href="#">Link About Page</a></li>
</ul>


Code: css [Select]


li.home_active{
   background:url('home-nav.png') top left no-repeat;
}
li.about_active{
   background:url('about-nav.png') top left no-repeat;
}


of course you'll need to adjust the LI's to have enough spacing to show the background image.

I may have totally misread your first post though haha. BUT you don't want to state all the CLASS names to each LI on every page. So when it's your contact page, only your contact LI link will have the class

Rather use background positioning.

Do something like this for your link images (probably better to use top/bottom):



Don't create an exctra "active" class for each and every link, not only does that require an extra image to be loaded on each new page (with positioned backgrounds the default / active states are all loaded as soon as somebody comes to your site), as I said just have an extra class.

Code: [Select]

#links_wrapper div .active {
background-position: 0 -32px;
}

Assuming your link images are 32px high =o

Something like how the image rollovers work here.



Then it's just a case of adding an active class on the end of your current ones.

Code: [Select]

<div id="links_wrapper">

<div id="link_home" class="active"><a href="index.html">Home</a></div>
<div id="link_about"><a href="about.html">About</a></div>
<div id="link_audio"><a href="audio.html">Audio & Scores</a></div>
<div id="link_video"><a href="video">Video</a></div>
<div id="link_contact"><a href="contact">Contact</a></div>

</div>

Roph's right

background position is something I've never learned to adopt

Roph, that's genius, thank you.

Except it doesn't work. I made the doubled buttons like you suggested, and if I put background-position: 0 -24px; in the #link_whatever's properties, it works, so I know I'm using the right code.

But when I put it in an .active class, it doesn't work. It also doesn't work in my a:hover block, either...
...and no, I didn't leave the background-position code in the #link_whatever blocks, I removed it completely, so it's not like it's getting "move the background" messages from more than one place.


edit: Strangely enough, it works in Dreamweaver. But when I test the page in firefox or IE, it doesn't.

edit: nevermind, I figured it out. I was using .active and a:hover at the same time. So I WAS sending the "move background" message from two places. Derp.

another edit: LOL but I think I found a way for it to work, though it's incredibly cheap. I'll make a third tier for the buttons, another at the bottom, that's identical to the one above it. That way I can use the a:hover trick.

So the button images will be:

Text
Inverted Text
Inverted Text again


lolololol


...OR I could be fancy and make a third color scheme just for a:hover and make the background-position: 156px 0;

so it would be

Text               | Hover text
Inverted Text   | Hover text




edit: nevermind, it's not working. I'll just use transparency effects on a:hover instead.

Thanks for your help, guys!