SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    May 2000
    Posts
    229
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a way that i can create a style
    in my "styles.css" that would set the colors of my links?

    like if i had a few different types of links on the page (in the body, on the nav bar etc etc...)

    id like to be able to create a style that would allow me to set the link and vlink... but also be able to set something like "Active link" to white, so that they could see what page their currently on. is there a way to do so?

    Im new to style sheets and dont know much about them.

    also i link to my style sheet in my head
    and then have been using the div tag to assign the style to the text im wanting affected
    ex. < div class="style" >...is there a better (more proper) tag to use?

  2. #2
    SitePoint Addict
    Join Date
    May 2000
    Posts
    229
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect!
    thank you very much

    And i suppose that since you put body after the "a" that means i could then create several link types?

    a.body
    a.nav
    a.title
    etc etc etc...?

    and the hover...is that like a mouseover?

  3. #3
    SitePoint Wizard silver trophy Karl's Avatar
    Join Date
    Jul 1999
    Location
    Derbyshire, UK
    Posts
    4,411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here we go:
    <BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
    a.body {
    stuff: value;
    }

    a.body:hover {
    stuff: value;
    }

    a.body:visited {
    stuff: value;
    }

    a.body:active {
    stuff: value;
    }
    [/code]

    called like &lt;a class="body" href=""&gt;link&lt;/body&gt;

    ------------------
    Karl Austin
    KDA Web Services
    "Everyone has a photographic memory. Some just don't have film."

  4. #4
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Correct on both questions.

    ------------------
    Wayne Luke - Sitepoint Moderator/Internet Media Developer
    Digital Magician Studios - Making Magic with Web Applications
    wluke@digitalmagician.com

  5. #5
    SitePoint Addict
    Join Date
    May 2000
    Posts
    229
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok well i used that exact chunk of code above... And i filled in each a.body style with its own color

    i made the a.body = bashe
    a.body:hover = white
    a.body:active = white
    a.body:visited = dark gray

    however... nothing seems to be happening

    the links are bashe and work fine, however, they do not change color when the mouse rolls over them and they do not change color to dark gray once visited... nor do they go to white when active

    any idea what i might have done wrong?

  6. #6
    Your Lord and Master, Foamy gold trophy Hierophant's Avatar
    Join Date
    Aug 1999
    Location
    Lancaster, Ca. USA
    Posts
    12,305
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    First put quotes (single or double) around the the options. This is only required by the options with more than 1 word but Netscape likes it better that way. Second, the hover pseudo-class only works in IE 4.0 and Netscape 6.0 and higher. As to why the others don't work, I don't know. Make sure your not use any FONT tags.

    Repeat after me...
    "Font tags are evil"

    ------------------
    Wayne Luke - Sitepoint Moderator/Internet Media Developer
    Digital Magician Studios - Making Magic with Web Applications
    wluke@digitalmagician.com

  7. #7
    SitePoint Addict
    Join Date
    May 2000
    Posts
    229
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok well your right... i looked at it thru my IE and the hover works great.

    however the Active still wasnt working =(

    so now that i know it wont work for Netscape, what is my next option?

    dare i say javascript?

  8. #8
    SitePoint Author Kevin Yank's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne, Australia
    Posts
    2,571
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Believe it or not, this is a feature of CSS.

    Consider the following style sheet:

    <BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>&lt;STYLE TYPE="text/css"&gt;
    &lt;!--

    A:hover { color: yellow }
    A:link { color: red }
    A:visited { color: blue }
    A:active { color: lime }

    --&gt;
    &lt;/STYLE&gt;[/code]

    At first glance, you might guess that a visited link will be blue, and that it will turn yellow when the mouse hovers over it... but this isn't quite right. With the mouse over it, the link is both visited and hovered! Thus, both of the applicable rules come into play, and it's up to the browser to decide which one to apply. Fortunately, the CSS specification has something to say on the subject:

    <BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>A:link { color: red } /* unvisited links */
    A:visited { color: blue } /* visited links */
    A:hover { color: yellow } /* user hovers */
    A:active { color: lime } /* active links */[/code]

    ------------------
    -Kevin Yank.
    http://www.SitePoint.com/
    Helping Small Business Grow Online!

    [This message has been edited by kyank (edited June 19, 2000).]


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •