SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast cubechris's Avatar
    Join Date
    Aug 2004
    Location
    Gloucester UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hyperlink Colours

    Do hyperlinks all have to be the same colour on one page? as this is causing problems with my scheme?

  2. #2
    masquerading Nick's Avatar
    Join Date
    Jun 2003
    Location
    East Coast
    Posts
    2,215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No. Say you have a group of links you want to be a different color than the rest, you can put them inside a div and define them differently.

    Code:
    <div id="different"><a href="#">test</a></div>
    Code:
    #different a:link, #different a:hover, #different a:active, #different a:visited { color: #000000; }
    or just

    Code:
    #different a {
      color: #000000;
    }
    Nick . all that we see or seem, is but a dream within a dream
    Show someone you care, send them a virtual flower.
    Good deals on men's watches

  3. #3
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Generally it's best to keep all links on your site the same color. This helps to avoid user confusion. Some people like to style links to external sources in a differnet way which makes sense I suppose.

  4. #4
    SitePoint Enthusiast cubechris's Avatar
    Join Date
    Aug 2004
    Location
    Gloucester UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its just the colour scheme in certain boxes wouldnt work thats why i need to do it. Thanks!

  5. #5
    SitePoint Enthusiast cubechris's Avatar
    Join Date
    Aug 2004
    Location
    Gloucester UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div id="different"><a href="#">test</a></div>
    ok i used that but where do i define it? as just different doesnt so anything?

    where do i put the diving differences?

  6. #6
    SitePoint Enthusiast cubechris's Avatar
    Join Date
    Aug 2004
    Location
    Gloucester UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    well?

  7. #7
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  8. #8
    SitePoint Enthusiast cubechris's Avatar
    Join Date
    Aug 2004
    Location
    Gloucester UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that site is mainly a resource towards selling books, or more advanced CSS, how do i just change the hyperlink colour i know the rest? Thanks

  9. #9
    <? james('rules'); ?>
    Join Date
    Jun 2004
    Location
    Wales, UK
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Change a hyperlink colour using CSS as follows:
    HTML Code:
    a:link{color:yourcolor} // initial link color
    a:visited{color:yourcolor} // colour of the link once clicked
    a:hover{color:yourcolor} // color of the link when mouse is moved over it
    You can make a text-decoration aswell:
    HTML Code:
    a:link{color:yourcolor;text-decoration:none}
    This would take the underline from the link.

    Obviously yourcolor would be changed to a color of your choice.

    Regards,

    James
    If knowledge is power - Why isn't our army librarians?!
    Statistics show that 63% of all statistics are fake.
    When i was little i broke my neck, and i havent looked back since .
    I completed the internet in 1 week. The end boss was pretty easy though .

  10. #10
    <? james('rules'); ?>
    Join Date
    Jun 2004
    Location
    Wales, UK
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Woops, to have different colours for different links, use span class:
    HTML Code:
    <html>
    <head>
    <style type="text/css">
    .class1 A:link {text-decoration: none}
    .class1 A:visited {text-decoration: none}
    .class1 A:hover {text-decoration: underline; color: red;}
     
    .class2 A:link {text-decoration: underline overline}
    .class2 A:visited {text-decoration: underline overline}
    .class2 A:hover {text-decoration: underline; color: green;}
    </style>
    </head>
    <body>
    ONE TYPE OF LINKS
    <br>
    <span class="class1">
    <a href="http://www.yahoo.com">YAHOO</a>
    <br>
    <a href="http://www.google.com">GOOGLE</a>
    </span>
    <br>
    <br>
    ANOTHER TYPE OF LINKS
    <br>
    <span class="class2">
    <a href="http://www.yahoo.com">YAHOO</a>
    <br>
    <a href="http://www.google.com">GOOGLE</a>
    </span>
    </body>
    </html>
    Edit this how you like .

    Regards,

    James
    If knowledge is power - Why isn't our army librarians?!
    Statistics show that 63% of all statistics are fake.
    When i was little i broke my neck, and i havent looked back since .
    I completed the internet in 1 week. The end boss was pretty easy though .

  11. #11
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cubechris
    that site is mainly a resource towards selling books, or more advanced CSS, how do i just change the hyperlink colour i know the rest? Thanks
    The W3 are the people who WROTE THE STANDARD.

  12. #12
    SitePoint Enthusiast cubechris's Avatar
    Join Date
    Aug 2004
    Location
    Gloucester UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no wonder, there site was to confusing for me!

  13. #13
    SitePoint Enthusiast cubechris's Avatar
    Join Date
    Aug 2004
    Location
    Gloucester UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    also is it possible in Dreamweaver to make certain areas of an image a Hyperlink?

  14. #14
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Going back to the multiple linking styles - I find this to be the easiest way:

    Put this in your CSS:

    Code:
    a:link {
    	color: #0099FF;
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #0099FF;
    }
    a:hover {
    	text-decoration: underline;
    	color: #99CCFF;
    }
    a:active {
    	text-decoration: none;
    	color: #0099FF;
    }
    a.two:link {
    	color: #FF0000;
    	text-decoration: none;
    }
    a.two:visited {
    	text-decoration: none;
    	color: #FF0000;
    }
    a.two:hover {
    	text-decoration: underline;
    	color: #FF9B9B;
    }
    a.two:active {
    	text-decoration: none;
    	color: #FF0000;
    }
    And then do this in your html:

    HTML Code:
    <p><a href="#">Link 1</a></p>
    <p><a href="#" class="two">Link 2</a></p>
    You can create as many different link styles as you like

  15. #15
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cubechris
    also is it possible in Dreamweaver to make certain areas of an image a Hyperlink?
    Yes it is

    Simply select the image by clicking on it (in the design view), then down in the properties pane you'll notice a blue square, circle and random shape. These are used to create image maps.

    Simply select which tool you prefer (either square, circle or polygon) > select the area on the image which you wish to act as a link > then assign a URL back in the properties pane like you would to a normal link.

    If I haven't explained this perfectly - give me a shout!

  16. #16
    SitePoint Enthusiast cubechris's Avatar
    Join Date
    Aug 2004
    Location
    Gloucester UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the image hyperlink explanation! it worked a treat!

    but i take it you save the css file seperately then?

  17. #17
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cubechris
    thanks for the image hyperlink explanation! it worked a treat!

    but i take it you save the css file seperately then?
    You can either put this in your external stylesheet (recommended), or in the HEAD of your document like so:

    HTML Code:
    <html>
    <head>
    <style type="text/css">
    <!--
    a:link {
    	color: #0099FF;
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #0099FF;
    }
    a:hover {
    	text-decoration: underline;
    	color: #99CCFF;
    }
    a:active {
    	text-decoration: none;
    	color: #0099FF;
    }
    a.two:link {
    	color: #FF0000;
    	text-decoration: none;
    }
    a.two:visited {
    	text-decoration: none;
    	color: #FF0000;
    }
    a.two:hover {
    	text-decoration: underline;
    	color: #FF9B9B;
    }
    a.two:active {
    	text-decoration: none;
    	color: #FF0000;
    }
    -->
    </style>
    </head>
    <body>
    <p><a href="#">Link 1</a></p>
    <p><a href="#" class="two">Link 2</a></p>
    </body>
    </html>


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
  •