Topic: CSS help or ideas..... (Page 1 of 1)

Well I'm redesigning my site again, getting bored of the plain grey and emm grey. So I'm making a whole new site with colours and more goodies than just showing artwork. I'm playing with CSS more than I ever have and have a question to be answered regarding CSS.

1) Can you set a CSS style for links (hover, active, etc) just for a layer or does it have to affect the whole page?

I know that you can set CSS just for tables but for some reason the links (hover, active, etc) just effect the whole page and not just the table (or layer) that I want it to for the type of navigation I have.

It's just that I want a different hover and visited state for the layer navigation, which I can't seem to do. I have tried but it just affects the whole page. Any ideas or ways around this?

I would show the page I'm have problems with but it's top secret at the moment so I can't show

-- DS --

DS: Try something like:

DIV.myDiv a:hover {

    ETC.

}

which should only set the styles within the DIV with the class myDiv (thats just off the top of my head but it should work - browser support is fine).

___________________
Emps

FAQs: Emperor

Emp: Thanks but where would that be placed? in the CSS stlye sheet or on the page it's self?

As you now I'm not a coder so knowing where things are placed are needed for my small brian to work

DS: See briggl's CSS tutorials for the various places you can put CSS - unless you have a good reason then place that code in your external CSS file and then all you need is something like:

<div class="myDiv">

 <a href="">Whatever</a>

</div>

and only the styles inside that DIV will be styled.

___________________
Emps

FAQs: Emperor

Thanks I'll give it a try!!

well it works, thanks again emp

**seems to be over run with thanks in this topic**


[This message has been edited by Darkshadow (edited 06-17-2002).]

Of course, div.mydiv can be any sort of selector - for instance, TD a:hover would affect links in tables, and P a:hover would affect links in paragraph tags. You get the idea.

Also, be sure not to confuse

P a:hover {color:red;}

with

P, a:hover {color:red;}

The comma is important.

Another note would be sure to list all the link stuff in the right order. If not it won't work.

a
a:link
a:hover
a:visited

(is that right?)

I have a template that I work from so sometimes I can't remember the exact order.

Later,
C:\


~Binary is best~

CPromt: Almost right

Put a:visited between a:link and a:hover and move the a from the top of the list down to the bottom and add :active and everything's fine.

a:link
a:visited
a:hover
a:active

Though I have to admit that I didn't really know this, I just had a look at the FAQ: http://faq.ozoneasylum.com/556/

kuckus (cell #282)