Stylesheets and links

[Steve R.]

Mark wrote in message ...

Hi, my site has ....

URL ??

It's going to be a lot easier to analyse that way :~)

 

[Michael Wilcox]

Is it possible to create a subset of the a:active class and utilise
this in the table when a user does a mouse over on a link contained
in the table?? Kind of like

A:hover.myTable{color: #FFFFFF;font-family: 'Trebuchet MS' , Verdana,
Arial, Helvetica, sans-serif;background-color: #Blue;}

..myTable a:hover{color: #FFFFFF;font-family: 'Trebuchet MS' , Verdana,
Arial,
Helvetica, sans-serif;background-color: blue;}

Selectors (the elements) should be lowercase and the color blue shouldn't
have a # in front.

 

[brucie]

[<a>s]
What I would like to be able to do, is for a specified table utilize a
seperate set of styles

http://allmyfaqs.com/faq.pl?Links_with_different_colors

 

[Michael Fesser]

Hi, the site is not online as yet so unfortunately I cannot send through a
url.

Basically I have the following [...]

1) Wrong order of the pseudo-classes, use this:

:link
:visited
:hover
:active

2) It's not a good idea to have visited and unvisited links the same
color. This confuses your visitors.

3) There's a lot of redundant and unnecessary information in your CSS.
Keep it short (no need to specify the font-family again and again):

a {font-family: ...; background: #8DB4C4; color: #036);
a:visited {color: ...}
a:hover {color: white}
a:active {background: #547D9D; color: ...}

What I want to do is "override" this information so that the hyperlinks in
the navigation table have a different set of styles then those links
contained in the main page.

Apply a class or ID to the table or cell and use it in your CSS, e.g.

HTML:
<table id="nav">...

CSS:
#nav a {...}
#nav a:visited {...}
...

In addition, I want the table cell background to
change color when the mouse goes over a link in the table cell in the
navigation table.

Easy in browsers, difficult in IE.

But why do you use a table for navigation at all? There are better ways
(<ul> for example).

Micha

 

[Michael Fesser]

Hi, the site is not online as yet so unfortunately I cannot send through a
url.

Basically I have the following [...]

1) Wrong order of the pseudo-classes, use this:

:link
:visited
:hover
:active

2) It's not a good idea to have visited and unvisited links the same
color. This confuses your visitors.

3) There's a lot of redundant and unnecessary information in your CSS.
Keep it short (no need to specify the font-family again and again):

a {font-family: ...; background: #8DB4C4; color: #036);
a:visited {color: ...}
a:hover {background: #547D9D; color: white}
a:active {color: ...}

What I want to do is "override" this information so that the hyperlinks in
the navigation table have a different set of styles then those links
contained in the main page.

Apply a class or ID to the table or cell and use it in your CSS, e.g.

HTML:
<table id="nav">...

CSS:
#nav a {...}
#nav a:visited {...}
...

In addition, I want the table cell background to
change color when the mouse goes over a link in the table cell in the
navigation table.

Easy in browsers, difficult in IE.

But why do you use a table for navigation at all? There are better ways
(<ul> for example).

Micha

 

[Mark]

Hi, my site has a style sheet where all links are defined using the
following style;

A:active{color: #003366;font-family: 'Trebuchet MS' , Verdana, Arial,
Helvetica, sans-serif;background-color: #8db4c4;}

This is fine as all <a href links now look use the above style.

What I would like to be able to do, is for a specified table utilize a
seperate set of styles so that content in each of the table cells does the
following.

The initial link colour is white.
When a user places their mouse over the link the table cell background
changes to blue.

Is it possible to create a subset of the a:active class and utilise this in
the table when a user does a mouse over on a link contained in the table??
Kind of like

A:hover.myTable{color: #FFFFFF;font-family: 'Trebuchet MS' , Verdana, Arial,
Helvetica, sans-serif;background-color: #Blue;}

Any ideas pointers welcome

Thanks in advance
Mark

 

[Mark]

Hi, the site is not online as yet so unfortunately I cannot send through a
url.

Basically I have the following

The site has CSS styles which define all hyperlinks throughout the website.
There is also a navigation table on the left hand side of the page which
contain links. At the moment these links (Obviously) take on the styles as
defined by the link CSS style sheet (See below)

A:active
{
color: #003366;
font-family: 'Trebuchet MS' , Verdana, Arial, Helvetica, sans-serif;
background-color: #8db4c4;

}
A:visited
{
color: #003366;
font-family: 'Trebuchet MS' , Verdana, Arial, Helvetica, sans-serif;
background-color: #8db4c4;
}
A:link
{
color: #003366;
font-family: 'Trebuchet MS' , Verdana, Arial, Helvetica, sans-serif;
background-color: #8db4c4;
}
A:hover
{
color: white;
font-family: 'Trebuchet MS' , Verdana, Arial, Helvetica, sans-serif;
background-color: #547d9d;

}

What I want to do is "override" this information so that the hyperlinks in
the navigation table have a different set of styles then those links
contained in the main page. In addition, I want the table cell background to
change color when the mouse goes over a link in the table cell in the
navigation table.

Hope this makes sense

Thanks again
Mark

 

[Mark]

Hi everyone, thanks for your help. I should be able to get it sorted from
here, thanks again
Mark

 

[Eric Bohlman]

1) Wrong order of the pseudo-classes, use this:

:link
:visited
:hover
:active

Just to amplify, the reason is that all-four pseudoclasses have the same
specificity, which means that if an <a> matches more than one of them the
last one will win. If, say, you put :link last, then it would always
override the others.

2) It's not a good idea to have visited and unvisited links the same
color. This confuses your visitors.

That's true in general, though there are a few special cases where doing so
might be reasonable. The one that comes immediately to mind is when a link
leads to highly dynamic content (stock quotes, weather info, etc.) so that
two or more visits to it actually bring back different content. A less
clear case involves navigation bars and the like.