Basic CSS question

Discussion in 'HTML' started by Lee Davidson, Jun 29, 2003.

  1. Lee Davidson

    Lee Davidson Guest

    I can't seem to get CSS to work for specific tags. I can when it is a
    class alone, however. Here is the CSS in question:

    A .blue
    {
    COLOR: blue;
    TEXT-DECORATION: none
    }
    A A:visited
    {
    COLOR: blue;
    TEXT-DECORATION: none
    }
    A A:hover
    {
    FONT-WEIGHT: bolder;
    COLOR: green
    }
    A A:active
    {
    COLOR: blue;
    TEXT-DECORATION: none
    }

    In the first case I want the link to be blue without an underline. In
    the other cases, I want the link to change (hover) or not change
    (visited and active same color). I had the last three as an inline
    style (not in an .css file) and they worked, but now they don't as part
    of the .css file.

    Help.
     
    Lee Davidson, Jun 29, 2003
    #1
    1. Advertising

  2. Lee Davidson wrote:

    > I can't seem to get CSS to work for specific tags. I can when it is a
    > class alone, however. Here is the CSS in question:
    >
    > A .blue


    Applies to elements of .blue inside <a>.

    > A A:visited
    > A A:hover
    > A A:active


    Applies to <a> elements with various pseudo-classes inside other <a>
    elements. Invalid in HTML.

    --
    David Dorward http://david.us-lot.org/
    Redesign in progress: http://stone.thecoreworlds.net/
    Microsoft announces IE is dead (so upgrade):
    http://minutillo.com/steve/weblog/2003/5/30/microsoft-announces-ie-is-dead
     
    David Dorward, Jun 29, 2003
    #2
    1. Advertising

  3. Lee Davidson

    picayunish Guest

    When Lee Davidson was making a web page, a :-? appears and wrote:
    > I can't seem to get CSS to work for specific tags. I can when it is a
    > class alone, however. Here is the CSS in question:
    >
    > A .blue
    > {
    > COLOR: blue;
    > TEXT-DECORATION: none
    > }
    > A A:visited
    > {
    > COLOR: blue;
    > TEXT-DECORATION: none
    > }
    > A A:hover
    > {
    > FONT-WEIGHT: bolder;
    > COLOR: green
    > }
    > A A:active
    > {
    > COLOR: blue;
    > TEXT-DECORATION: none
    > }
    >
    > In the first case I want the link to be blue without an underline. In
    > the other cases, I want the link to change (hover) or not change
    > (visited and active same color). I had the last three as an inline
    > style (not in an .css file) and they worked, but now they don't as part
    > of the .css file.


    Try this.
    a.blue, a.blue:visited, a.blue:active {color: blue; background:
    transparent; text-decoration: none;}
    a.blue:hover {font-weight: bold; color: green; background: transparent;}
    --
    Edwin van der Vaart (Geen familie van....)
    http://www.semi-conductors.nl/ PHP Redirect to semi-conductor.nl
    http://www.semi-conductor.nl/ Links to Semiconductors sites
    http://members.chello.nl/e.vandervaart/ Experimental site
    http://host.deluxnetwork.com/~evdvaart/ Test site
     
    picayunish, Jun 29, 2003
    #3
  4. Lee Davidson

    brucie Guest

    In post <>
    Lee Davidson said...

    > TEXT-DECORATION: none


    Links Want To Be Links
    http://www.cs.tut.fi/~jkorpela/www/links.html


    > A:visited
    > COLOR: blue;


    thats the same color as your unvisited links. how is a visitor
    supposed to know where they've been? why do you want to annoy your
    visitors?

    > A:hover
    > FONT-WEIGHT: bolder;
    > COLOR: green


    changing the font-weight on hover may cause the window to redraw or
    the text to be truncated. use some other effect to indicate hover


    --
    brucie a. blackford. 30/June/2003 08:47:37 am kilo.
    http://loser.brucies.com/
     
    brucie, Jun 29, 2003
    #4
  5. Lee Davidson

    Lee David Guest

    I'm not sure I'm following this. BTW, Interdev formats the .CSS and I
    don't know how to get to the raw code to change anything.

    What I'm after is in certain cases of <a> tags to have the text
    unhighlighted and blue. This is a name tag jump so the viewer doesn't
    need to see underlining or color switches on clicking the tag.

    In the second case, I want the color to change as the mouse is moved
    over a group of links, but no other changes to happen. This worked when
    I was using a style sheet on the page, but I want to "graduate" to using
    style sheets.

    I'm not sure why the "A:" appears after the "A" tag, but are you saying
    it should be like the "blue" class?

    Tnanks,
    Lee

    David Dorward wrote:
    > Lee Davidson wrote:
    >
    >
    >>I can't seem to get CSS to work for specific tags. I can when it is a
    >>class alone, however. Here is the CSS in question:
    >>
    >>A .blue

    >
    >
    > Applies to elements of .blue inside <a>.
    >
    >
    >>A A:visited
    >>A A:hover
    >>A A:active

    >
    >
    > Applies to <a> elements with various pseudo-classes inside other <a>
    > elements. Invalid in HTML.
    >
     
    Lee David, Jun 30, 2003
    #5
  6. Lee Davidson

    Lee David Guest

    I didn't think of it in that way, that is as the visited and active as
    subsets of "blue" which is a class associated with an "a" tag. I can't
    get the blue to work by itself so adding the rest to it won't work until
    I do.

    Should there be that space between "A" and ".blue" or is that just
    something that visual interdev is helpful to add?

    Thanks,
    Lee

    picayunish wrote:
    > When Lee Davidson was making a web page, a :-? appears and wrote:
    >
    >>I can't seem to get CSS to work for specific tags. I can when it is a
    >>class alone, however. Here is the CSS in question:
    >>
    >>A .blue
    >>{
    >> COLOR: blue;
    >> TEXT-DECORATION: none
    >>}
    >>A A:visited
    >>{
    >> COLOR: blue;
    >> TEXT-DECORATION: none
    >>}
    >>A A:hover
    >>{
    >> FONT-WEIGHT: bolder;
    >> COLOR: green
    >>}
    >>A A:active
    >>{
    >> COLOR: blue;
    >> TEXT-DECORATION: none
    >>}
    >>
    >>In the first case I want the link to be blue without an underline. In
    >>the other cases, I want the link to change (hover) or not change
    >>(visited and active same color). I had the last three as an inline
    >>style (not in an .css file) and they worked, but now they don't as part
    >>of the .css file.

    >
    >
    > Try this.
    > a.blue, a.blue:visited, a.blue:active {color: blue; background:
    > transparent; text-decoration: none;}
    > a.blue:hover {font-weight: bold; color: green; background: transparent;}
     
    Lee David, Jun 30, 2003
    #6
  7. Lee Davidson

    Lee David Guest

    Thanks for your input. Unfortunately, my question was about syntax and
    not style. If I can 't get the syntax down, then everything else is moot.

    Any suggestions as to why the style isn't working will be greatly
    appreciated.

    Lee


    brucie wrote:
    > In post <>
    > Lee Davidson said...
    >
    >
    >> TEXT-DECORATION: none

    >
    >
    > Links Want To Be Links
    > http://www.cs.tut.fi/~jkorpela/www/links.html
    >
    >
    >
    >>A:visited
    >> COLOR: blue;

    >
    >
    > thats the same color as your unvisited links. how is a visitor
    > supposed to know where they've been? why do you want to annoy your
    > visitors?
    >
    >
    >>A:hover
    >> FONT-WEIGHT: bolder;
    >> COLOR: green

    >
    >
    > changing the font-weight on hover may cause the window to redraw or
    > the text to be truncated. use some other effect to indicate hover
    >
    >
     
    Lee David, Jun 30, 2003
    #7
  8. Lee Davidson

    brucie Guest

    brucie, Jun 30, 2003
    #8
  9. Lee David pounced upon this pigeonhole and pronounced:
    > I'm not sure I'm following this. BTW, Interdev formats the .CSS and I
    > don't know how to get to the raw code to change anything.


    Instead of just clicking the .css file to open it, right-click and choose
    Open With... then pick the Source Code (Text) Editor

    Set this editor as Default so the VI wizard thingy doesn't mess up your
    structure after you repair it.

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Jun 30, 2003
    #9
  10. Lee Davidson

    Lee David Guest

    Thank you very much. I'll try it first thing in the morning.

    Lee
     
    Lee David, Jun 30, 2003
    #10
  11. Lee Davidson

    Bagbourne Guest

    "Lee David" <> wrote in message
    news:...
    > brucie wrote:
    > > In post <>
    > > Lee Davidson said...
    > >
    > >
    > >> TEXT-DECORATION: none

    > >
    > >
    > > Links Want To Be Links
    > > http://www.cs.tut.fi/~jkorpela/www/links.html
    > >
    > >
    > >
    > >>A:visited
    > >> COLOR: blue;

    > >
    > >
    > > thats the same color as your unvisited links. how is a visitor
    > > supposed to know where they've been? why do you want to annoy your
    > > visitors?
    > >
    > >
    > >>A:hover
    > >> FONT-WEIGHT: bolder;
    > >> COLOR: green

    > >
    > >
    > > changing the font-weight on hover may cause the window to redraw or
    > > the text to be truncated. use some other effect to indicate hover
    > >
    > >

    > Thanks for your input. Unfortunately, my question was about syntax and
    > not style. If I can 't get the syntax down, then everything else is moot.
    >
    > Any suggestions as to why the style isn't working will be greatly
    > appreciated.


    Yes, but bolding things on hover is really horrible! It makes the links
    wobble between bold and normal when your mouse moves over them, and pushes
    the rest of any flowed content around as it does so. You can probably fix
    this by giving them a "display:block" style and a fixed pixel width style if
    you really want the bolding effect..

    You have a problem with your selectors. Look at
    http://www.htmlhelp.com/reference/css/structure.html

    Nige
     
    Bagbourne, Jun 30, 2003
    #11
  12. Lee Davidson

    Sid Ismail Guest

    On Sun, 29 Jun 2003 20:52:09 -0500, Lee David
    <> wrote:

    > What I'm after is in certain cases of <a> tags to have the text
    > unhighlighted and blue. This is a name tag jump so the viewer doesn't
    > need to see underlining or color switches on clicking the tag.



    CSS pseudo-classes

    A.blue:visited {color: #003399;}
    A.blue:link {color: #003399;}
    A.blue:active {color: #003399;}
    A.blue:hover {color: red;}

    A.white:visited {color: #ffffff;}
    A.white:link {color: #ffffff;}
    A.white:active {color: #ffffff;}
    A.white:hover {color: red;}

    and then -

    <a href="blah1.html" class="blue">Blue Link</a>
    <a href="blah2.html" class="white">White Link</a>

    Now play with text-decoration.

    Sid
     
    Sid Ismail, Jun 30, 2003
    #12
  13. Lee Davidson

    Lee David Guest

    Thank you again. That exactly worked and all is what I want now.
     
    Lee David, Jun 30, 2003
    #13
  14. Lee Davidson

    Lee David Guest

    Thanks for the suggestion. I removed the "bold" and am letting the
    color speak for the highlighting.
     
    Lee David, Jun 30, 2003
    #14
    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. Spartanicus

    Basic CSS positioning Question??

    Spartanicus, Sep 5, 2004, in forum: HTML
    Replies:
    11
    Views:
    573
  2. Engineer
    Replies:
    6
    Views:
    643
    Jeremy Bowers
    May 1, 2005
  3. Rangy
    Replies:
    2
    Views:
    329
    Bergamot
    Mar 8, 2007
  4. CSS Basic Question

    , Sep 16, 2007, in forum: HTML
    Replies:
    6
    Views:
    362
    Ethan2007
    Sep 16, 2007
  5. richard
    Replies:
    12
    Views:
    774
    dorayme
    Mar 9, 2010
Loading...

Share This Page