Stylesheets and links

Discussion in 'HTML' started by Steve R., Jan 9, 2004.

  1. Steve R.

    Steve R. Guest

    Mark wrote in message ...
    > Hi, my site has ....


    URL ??

    It's going to be a lot easier to analyse that way :~)
     
    Steve R., Jan 9, 2004
    #1
    1. Advertising

  2. Mark <0SPAM> wrote:
    > 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.
    --
    Michael Wilcox
    mjwilco at yahoo dot com
    Essential Tools for the Web Developer - http://mikewilcox.t35.com
     
    Michael Wilcox, Jan 9, 2004
    #2
    1. Advertising

  3. Steve R.

    brucie Guest

    brucie, Jan 9, 2004
    #3
  4. Mark wrote:

    >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, Jan 9, 2004
    #4
  5. Mark wrote:

    >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
     
    Michael Fesser, Jan 9, 2004
    #5
  6. Steve R.

    Mark Guest

    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, Jan 9, 2004
    #6
  7. Steve R.

    Mark Guest

    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, Jan 9, 2004
    #7
  8. Steve R.

    Mark Guest

    Hi everyone, thanks for your help. I should be able to get it sorted from
    here, thanks again
    Mark
     
    Mark, Jan 10, 2004
    #8
  9. Steve R.

    Eric Bohlman Guest

    Michael Fesser <> wrote in
    news::

    > 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.
     
    Eric Bohlman, Jan 10, 2004
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?U2xlZXB5?=

    SmartNavigation, Stylesheets and Frames

    =?Utf-8?B?U2xlZXB5?=, May 3, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    1,441
    =?Utf-8?B?U2xlZXB5?=
    May 4, 2004
  2. JezB
    Replies:
    2
    Views:
    407
  3. Oleg Ogurok

    Re: Web User Controls And StyleSheets

    Oleg Ogurok, Jun 30, 2004, in forum: ASP .Net
    Replies:
    7
    Views:
    564
    Steven Cheng[MSFT]
    Jul 8, 2004
  4. George

    Css Stylesheets and aspx

    George, Aug 24, 2004, in forum: ASP .Net
    Replies:
    5
    Views:
    26,693
    George
    Aug 24, 2004
  5. TJS

    freeTextBox and stylesheets

    TJS, Oct 22, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    358
Loading...

Share This Page