SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2001
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question different link colors?

    I noticed that the index page of Sitepoint contains different link colors for unvisited links. I've tried this technique using style sheets, but I can never get it to work. Can anyone point me to a tutorial or describe in general terms how this works? I think it's a good look because it's hard to develop a color scheme where the links stand out greatly from the background color.

  2. #2
    Gone!
    Join Date
    Aug 2001
    Location
    Witty Location Parody
    Posts
    3,889
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use CSS tags like this in your page:

    Code:
    <STYLE TYPE="text/css">
    <!--
    
    A	{
    	color: #444444;
    	text-decoration: none;
    	}
    
    A:hover	{
    	color: #FF8800;
    	text-decoration: underline;
    	}
    
    A:active
    	{
    	color: #0000FF;
    	text-decoration: none;
    	}
    
    A:visited
    	{
    	color: #0000FF;
    	text-decoration: none;
    	}
    
    -->
    </STYLE>
    You can define the attributes for each link state.

    Glen

  3. #3
    SitePoint Zealot Snegolle's Avatar
    Join Date
    Jan 2002
    Location
    localhost
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Try google to find the tutorial

    I think they use <style></STYLE> 2 or more times at the same page. Itīs very simple and you can learn it within 1 hour I have some tutorial but they arenīt in english.


    Good luck

  4. #4
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Nottingham, England.
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eh you dont have to have 2 stylesheets.

    You can have different colours for different links by:

    a.Thislink:visited
    a.Thatlink:visited

    Then you can specify

    <a class="Thislink"....

    I think, that is I read your question correctly.
    Absence of evidence is not evidence of absence.

  5. #5
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    rdon,

    Paroxy is absolutely right. That's how it would be done with classes. With id's you would do:
    Code:
    #id {style}
    #id a:link, a:visited {style}
    #id a:active {style}
    #id a:hover {style}
    Hope this helps
    Aaron Brazell
    Technosailor



  6. #6
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, Sketchy...
    What is it with you and your #ID's
    I've never seen anyone do it like that except you... or is it some kind of PHP thingie?

  7. #7
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Nottingham, England.
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eh I normally use

    .Thislink a:link

    Hmm is it the same?
    Absence of evidence is not evidence of absence.

  8. #8
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    huh?! Plat, that's CSS for ya.

    #whatever is a id selector for CSS and .whatever is a class selector.

    Sketch
    Aaron Brazell
    Technosailor



  9. #9
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by paroxysm
    Eh I normally use

    .Thislink a:link

    Hmm is it the same?
    Thats how I do it, skethes way is funny
    must be somthing in the water over there

  10. #10
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Look, if you ask Creole, he'll agree with you and tell you that I use way too many ID's. Regardless, if you ever want to do it with ID's instead of classes, the way I showed is how it's done. Your method is probably more efficient so do it that way. Either one will work though.

    Sketch
    Aaron Brazell
    Technosailor



  11. #11
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A bit sketchy if you ask me

    [end of bad pun]

  12. #12
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PUHLEEZE end the bad pun!

    Sketch
    Aaron Brazell
    Technosailor



  13. #13
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought you could only assign an id to one element whereas class was reusable.

    Sketch, do you use the same #id multplie times in a file? Does it work?

  14. #14
    SitePoint Evangelist
    Join Date
    Jul 2001
    Location
    UK
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It'll work, but it's meant to be used for only one tag - probably the main difference between class and ID selectors.

  15. #15
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by isotope235
    I thought you could only assign an id to one element whereas class was reusable.

    Sketch, do you use the same #id multplie times in a file? Does it work?
    You're right, id's can only be used for a single element and classes are reusable, but that's moot. My only point was how to write links for id's in CSS.

    Sketch
    Aaron Brazell
    Technosailor



  16. #16
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Nottingham, England.
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Eh so how is classes more efficient than IDs? Hmm.
    Absence of evidence is not evidence of absence.

  17. #17
    SitePoint Enthusiast
    Join Date
    Sep 2001
    Posts
    57
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up thanks paroxysm

    paroxysm,

    Finally got around to trying your code and (sure enough) it works. I believe the problem I had before was trying to figure out where to place the class identifier in the a:link code. Thanks, chief.


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
  •