I have a style sheet that is applied to all pages in my site. It defines background and a:active/hover/link/visited as well as some text and paragraph formatting
I am going to add a naviagtion menu containing graphical buttons to some of the pages and would like to know how to prevent the a:active/hover/link/visited styles applying themselves to the buttons while still applying to text links on the same page.
Is there a way of blocking them? or could I somehow redefine the link styles in the navigation <table> tags?
Any advice appreciatedYou can make distinctions in a couple of ways.
You can specify that all anchors inside a table cell (TD) will have the different style: TD A {some style statements}
You can also use classes: .menu {some style statements}
...
<a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"...">Thanks for that, I have attempted your suggestion but it doesnt work. This will almost certainly be my fault as I am not sure what style statement I should use to overide the others.Since you did not post a link or any code, I could not be more specific. In fact, I was not sure what you meant by "the buttons". Here is a simple example for you to consider:
<style>
A {color: green}
A: hover {color: yellow}
TD A:hover {color: green}
</style>
<table>
<tr><td><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">This should be a plain green link</a></td></tr>
</table>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">This should change to yellow on mouseover</a>OK, What I have at the moment is:
<table><tr><td><a href=http://www.webdeveloper.com/forum/archive/index.php/"filename">Text</a></td></tr></table>
The a:link {text-decoration: none; color: #0000FF}
a:visited {text-decoration: none; color: #6A5ACD}
a:hover {text-decoration: none; color: #FFFFFF; background-color: #000066}
a:active {text-decoration: none; color: #6A5ACD}
styles apply to this link as well as:
<table><tr><td><a href=http://www.webdeveloper.com/forum/archive/index.php/"filename"><img name="image" src="folder/image.gif"></a></td></tr></table>
My goal is to prevent these styles from affecting the graphic image.
I have tried using "td a:hover" etc which worked on the graphic but also affected the text link as they are both inside a table cell.
I have also tried:
.menu.a:link {text-decoration: none;color: White}
.menu.a:visited {text-decoration: none; color: White}
.menu.a:hover {text-decoration: none;color: White; background-color: White}
.menu.a:active {text-decoration: none; color: White}
and then
<table><tr><td><a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"filename"><img name="image" src="folder/image.gif"></a></td></tr></table>
but this did not work, or if it did, it was still overwritten by the original a:hover/link/visited/active styles.
Any help would be gratefully accepted, and also some suggestions for a good source of CSS information to fill the gaps in my knowledge as it looks like I am going to be using CSS alot more than I first thought.
ThanksYour second approach is the right way to do it, but this code is wrong:
.menu.a:link {text-decoration: none; color: White}
It says "if class 'menu' then class 'a' then a link" but there is no class a. You need to remove the dot.
I use this in my stylesheets to override the main link styles:
a.styles:link {color:#33c;}
This says "if element 'a' then also class 'styles' and a link, use specified colour". Try it.Many thanks, that last piece of code you gave me worked a treat.
I am going to add a naviagtion menu containing graphical buttons to some of the pages and would like to know how to prevent the a:active/hover/link/visited styles applying themselves to the buttons while still applying to text links on the same page.
Is there a way of blocking them? or could I somehow redefine the link styles in the navigation <table> tags?
Any advice appreciatedYou can make distinctions in a couple of ways.
You can specify that all anchors inside a table cell (TD) will have the different style: TD A {some style statements}
You can also use classes: .menu {some style statements}
...
<a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"...">Thanks for that, I have attempted your suggestion but it doesnt work. This will almost certainly be my fault as I am not sure what style statement I should use to overide the others.Since you did not post a link or any code, I could not be more specific. In fact, I was not sure what you meant by "the buttons". Here is a simple example for you to consider:
<style>
A {color: green}
A: hover {color: yellow}
TD A:hover {color: green}
</style>
<table>
<tr><td><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">This should be a plain green link</a></td></tr>
</table>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">This should change to yellow on mouseover</a>OK, What I have at the moment is:
<table><tr><td><a href=http://www.webdeveloper.com/forum/archive/index.php/"filename">Text</a></td></tr></table>
The a:link {text-decoration: none; color: #0000FF}
a:visited {text-decoration: none; color: #6A5ACD}
a:hover {text-decoration: none; color: #FFFFFF; background-color: #000066}
a:active {text-decoration: none; color: #6A5ACD}
styles apply to this link as well as:
<table><tr><td><a href=http://www.webdeveloper.com/forum/archive/index.php/"filename"><img name="image" src="folder/image.gif"></a></td></tr></table>
My goal is to prevent these styles from affecting the graphic image.
I have tried using "td a:hover" etc which worked on the graphic but also affected the text link as they are both inside a table cell.
I have also tried:
.menu.a:link {text-decoration: none;color: White}
.menu.a:visited {text-decoration: none; color: White}
.menu.a:hover {text-decoration: none;color: White; background-color: White}
.menu.a:active {text-decoration: none; color: White}
and then
<table><tr><td><a class="menu" href=http://www.webdeveloper.com/forum/archive/index.php/"filename"><img name="image" src="folder/image.gif"></a></td></tr></table>
but this did not work, or if it did, it was still overwritten by the original a:hover/link/visited/active styles.
Any help would be gratefully accepted, and also some suggestions for a good source of CSS information to fill the gaps in my knowledge as it looks like I am going to be using CSS alot more than I first thought.
ThanksYour second approach is the right way to do it, but this code is wrong:
.menu.a:link {text-decoration: none; color: White}
It says "if class 'menu' then class 'a' then a link" but there is no class a. You need to remove the dot.
I use this in my stylesheets to override the main link styles:
a.styles:link {color:#33c;}
This says "if element 'a' then also class 'styles' and a link, use specified colour". Try it.Many thanks, that last piece of code you gave me worked a treat.