www.webdeveloper.com
Results 1 to 5 of 5

Thread: alternative link style

  1. #1
    Join Date
    Oct 2010
    Posts
    20

    alternative link style

    hi all,

    i'm doing pretty basic web pages. in the footer area, i'd like to have something like this:

    | copyright 2010, mycompany | privacy policy | terms of service |

    the privacy policy and terms would send you to the appropriate pages, but i don't want them to stick out like regular links which i have defined like this in my style sheet.

    A:link { color: #000088 }
    A:visited {color: #333366 }
    A:active {color: #FF0000 }

    the copyright text uses a muted style like this:

    .copy {
    font-size: 8pt;
    color: #777777;
    }

    i would like to have the links displayed just like that. in other words, normal links throughout the pages use the style shown above, but the less visited pages (like privacy policy etc.) should appear without blue unterline.

    thanks for any help!

    stefan

  2. #2
    Join Date
    Aug 2010
    Location
    San Diego
    Posts
    242
    Try

    .copy a { text-decoration:none; color: #777777; }
    ...Mike

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,213
    You may not know it, but a link has four different states that it can be in. CSS allows you to customize each state. Please refer to the following keywords that each correspond to one specific state:

    * link - this is a link that has not been used, nor is a mouse pointer hovering over it
    * visited - this is a link that has been used before, but has no mouse on it
    * hover - this is a link currently has a mouse pointer hovering over it/on it
    * active - this is a link that is in the process of being clicked

    Order matters. If "a:active" precedes "a:hover", the effects in "a:hover" will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.

    Pseudo Classes

    You can set links contained in different parts of your web page to be different colors by using the pseudo class. For example, lets say you want your links in the content area to have a different color then the links in the left or right column of your webpage.

    You can do this in the following fashion:

    Code:
    #pseudo_content a:link {color: #090;}
    #pseudo_content a:visited {color: #999;}
    #pseudo_content a:hover {color: #333;}
    #pseudo_content a:focus {color: #333;}
    #pseudo_content a:active {color: #090;}
    Now assuming that you have your main content in a division named "content" all links within that division will now be styled by this new style selector. Should your selector have a different name, just change the #pseudo_content selector to match your division name.

    Then for the links in a column you could use the following:

    Code:
    #pseudo_column a:link {color: #090;}
    #pseudo_column a:visited {color: #999;}
    #pseudo_column a:hover {color: #333;}
    #pseudo_column a:focus {color: #333;}
    #pseudo_column a:active {color: #090;}
    Once again, this assumes the name of the column division, just change the name to match yours.

    This same method can be accomplished by declaring a class instead of an id.

    Code:
    a.pseudo_column:link {color: #090;}
    a.pseudo_column:visited {color: #999;}
    a.pseudo_column:hover {color: #333;}
    a.pseudo_column:focus {color: #333;}
    a.pseudo_column:active {color: #090;}
    Though in this case you will need to add a class to each link

    Code:
    <a class="pseudo_column" href="" title="">some link text</a>
    But, there is still yet an easier way

    Code:
    .pseudo_column a:link {color: #090;}
    .pseudo_column a:visited {color: #999;}
    .pseudo_column a:hover {color: #333;}
    .pseudo_column a:focus {color: #333;}
    .pseudo_column a:active {color: #090;}
    Then in the (X)HTML file
    Code:
    <div class="pseudo_column">
    <a href="" title="Link Description">Link Text Description</a>
    </div>

  4. #4
    Join Date
    Oct 2010
    Posts
    20
    thank you guys for the help, both on the very short hand end and long hand end! much appreciated!!

    stefan

  5. #5
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,213
    Welcome. LOL

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles