SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member queencheeze's Avatar
    Join Date
    Jun 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re. FAQ How can I have sets of different coloured links

    Quote Originally Posted by Paul O'B
    FAQ :How can I have sets of different coloured links?

    There are a number of different ways but first lets recap on how to set all link colours on your page first. ...
    I'm teaching myself HTML and CSS and at my age it's not intuitive! :'( My questions may seem infantile, nevertheless, I would appreciate any (simple) help you can give me.

    My pages are already HTML coded with tables, and I want to update with a new look using my newfound knowledge. Is it possible to use a stylesheet to change the color of links within tables? My first attempt changed one cell within the table but not the others.

    As I said, any help you can give needs to be stated VERY simply.

    TIA
    Queencheeze

  2. #2
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Post a link to the code so we can take a peek.

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's definitely possible. CSS is basically a bunch of occurrences of this:
    Code:
    selector { rules }
    The selector says which element or elements are affected by the rules inside the curly braces. What you need to do is:
    1. write a selector that singles out your links, and
    2. write rules to set the colour for the selected links.


    If you want to change the colour of links inside one cell, but not inside another cell, you need a means to identify the table cell. The easiest way is to assign an identifier to the table cell, like this:
    HTML Code:
    <td id="my-cell">...</td>
    If you want all links within that cell to be red, for instance, you then write your rules like this:
    Code:
    #my-cell a:link, #my-cell a:visited
    {
      color:#900;
    }
    The '#' character says 'any element with an "id" attribute whose value is whatever comes after the "#" (in this case "my-cell").'
    The "a" identifies a link (<a> element).
    When there's a space between '#my-cell' and 'a' it means 'an <a> element that is a descendant of an element with id="my-cell".' (Descendant means child, grand-child, great grand-child, etc.)
    The ':link' and ':visited' are so-called pseudo-classes. ':link' specifies unvisited links, while ':visited' specifies visited links. If you want different colours for these states, use different rules:
    Code:
    #my-cell a:link {color:#900}
    #my-cell a:visited {color:#009}
    This will make your unvisited links red and your visited links blue.
    The comma in the selector groups two selectors together. In other words, it allows you to specify the same rules for more than one selector at a time.

    'color' is a property which controls the foreground colour of things. '#900' is a value; a colour value to be precise. The '#' here signifies a hexadecimal colour representation. The normal form uses six hex digits, but you can use three as well (each digit is then doubled, so '#900' is the same as '#990000').

    If you want another colour for your links when the mouse hovers over it, define another rule:
    Code:
    #my-cell a:hover {color:#f60}
    If you want to change the colour of all links inside a given table, just assign the ID to the table instead:
    HTML Code:
    <table id="my-table">...</table>
    Code:
    #my-table a:link, #my-table a:visited
    {
      color:#900;
    }
    If you want the colour to apply to all links within all tables on the page, use a slightly different selector:
    Code:
    table a:link, table a:visited
    I hope that helps.
    Birnam wood is come to Dunsinane

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    link colors in Tables need the same CSS as links in div's P, etc

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>12345 12345 12345 12345 12345</title>
    		<style type="text/css">
    	body{
    	background-color:#ffffcc;
    	}
    	
    	table{
    	width:400px;
    	}
    	
    	td{
    	background-color:#ffcc99;
    	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size:12px;
    	padding: 2px;
    	text-align: left;
    	vertical-align: text-top;
    	font-style: italic;
    	border-color: #39c;
    	border-width: 1px 1px 0px 0px;
    	border-style: solid; 
    	}
    	.br{border-left:1px solid #39c;}
    	.bo{border-bottom:1px solid #39c;}
    	
    	/* genaral link style colors of table*/
    	a{
    	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    	font-size:12px;
    	text-decoration:none;
    	color:#ff6600;
    	}
    	/* separate colors*/
    	.ca{color:#ffffff;}
    	.cb{color:#000000;}
    	.cc{color:#0000ff;}
    	.cd{color:#99ff00;}
    	
    	/*colors a in tr class x*/
    	.cx a{color:#ffff33;}
    	/*colors a in tr class y*/
    	.cy a{color:#0099ff;}
    	
    </style>
    </head>
    <body>
    <table cellspacing="0">
    <tr>
    	<td class="br"><a href="##">12345</a></td>
    	<td ><a href="##">12345</a></td>
    	<td ><a href="##">12345</a></td>
    	<td ><a href="##">12345</a></td>
    </tr>
    <tr>
    	<td class="br"><a href="##" class="ca">12345</a></td>
    	<td ><a href="##" class="cb">12345</a></td>
    	<td ><a href="##" class="cc">12345</a></td>
    	<td ><a href="##" class="cd">12345</a></td>
    </tr>
    
    <tr class="cx">
    	<td class="br"><a href="##">12345</a></td>
    	<td ><a href="##">12345</a></td>
    	<td ><a href="##">12345</a></td>
    	<td ><a href="##">12345</a></td>
    </tr>
    <tr class="cy">
    	<td class="br bo"><a href="##">12345</a></td>
    	<td class="bo"><a href="##">12345</a></td>
    	<td class="bo"><a href="##">12345</a></td>
    	<td class="bo"><a href="##">12345</a></td>
    </tr>
    </table>
    </body>
    </html>

  5. #5
    SitePoint Member queencheeze's Avatar
    Join Date
    Jun 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    It's definitely possible. ....
    If you want the colour to apply to all links within all tables on the page, use a slightly different selector:
    Code:
    table a:link, table a:visited
    I hope that helps.
    Well, actually, it did .... mostly.

    <style type="text/css">
    table a:link { color: #66ffff}
    table a:visited { color: #cc0099}
    table a:active { color: #cc33ff}
    table a:hover { color: #0000ff; background-color: #ccffff; cursor: pointer; text-decoration: none}
    </style>

    This is my code. The 'visited', 'active', and 'hover' work. 'link' remains standard blue. I can't quite figure out why three out of four work.
    The Queen of Cheeze

  6. #6
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    IE is not taking a:link only a

  7. #7
    SitePoint Member queencheeze's Avatar
    Join Date
    Jun 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by all4nerds
    Hello

    IE is not taking a:link only a
    I'm not sure I understand what that means or what to do to fix it. Can you be more specific?
    The Queen of Cheeze

  8. #8
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    a:link {}

    a{}

    i switched the visited of, so its not active

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	table a{ color: #ff0000;}
    	/*table a:visited { color: #cc0099;}*/
    	table a:active { color: #cc33ff;}
    	table a:hover { color: #0000ff; background-color: #ccffff; cursor: pointer; text-decoration: none;}
    </style> 
    	</style>
    </head>
    
    <body>
    <table>
    <tr>
    	<td><a href="##">12345</a></td>
    </tr>
    </table>
    </body>
    </html>
    Last edited by all4nerds; Jun 18, 2005 at 14:19.

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by queencheeze
    Well, actually, it did .... mostly.

    <style type="text/css">
    table a:link { color: #66ffff}
    table a:visited { color: #cc0099}
    table a:active { color: #cc33ff}
    table a:hover { color: #0000ff; background-color: #ccffff; cursor: pointer; text-decoration: none}
    </style>

    This is my code. The 'visited', 'active', and 'hover' work. 'link' remains standard blue. I can't quite figure out why three out of four work.
    That looks OK (except that the order should normally be :link, :visited, :hover, :focus, :active).

    If this doesn't work, there must be some other CSS rules interfering with your rules.

    As far as I know, a:link works just fine in IE. It's just a:focus that it doesn't support (but it incorrectly applies :active when a link receives keyboard focus instead).
    Birnam wood is come to Dunsinane

  10. #10
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    That looks OK (except that the order should normally be :link, :visited, :hover, :focus, :active).

    If this doesn't work, there must be some other CSS rules interfering with your rules.

    As far as I know, a:link works just fine in IE. It's just a:focus that it doesn't support (but it incorrectly applies :active when a link receives keyboard focus instead).
    No its not working in IE, it was new for me also, see test below of simple hover menu

    PS there must be a real link in the href x.htm to get it to work , also new for me

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><!-- -->
    <head>
    <title>12345 12345 12345 123435 12345</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
    	body{background:#ebebeb;font-size:1em;}
    
    	.nav a:link{
    	font-family: Arial, Verdana , Helvetica , sans-serif;
    	font-size:60%;
    	font-weight:600;
    	background:#ebeff2;
    	color:#55616d;
    	padding: .5em 0 .7em .5em;
    	border-width:.1em .1em 0 .1em;
    	border-color:#7c8991 #7c8991 #7c8991 #7c8991;
    	border-style: solid;
    	text-decoration:none;
    	display:block;/*  */
    	text-align:left;
    	width:16em;
    	}/* */
    	
    	.nav .b{border-width:.1em .1em .1em .1em;}
    	
    	.nav a:hover{color:#ec9b4c;background:#fafbfd url(x.jpg) 95% no-repeat;}
    	
    </style>
    </head>
    <body>
    <div class="nav">
    <a href="##">HOME</a>
    <a href="##">CONTACTS</a>
    <a href="##">ABOUT US</a>
    <a href="##">FREE SMS</a>
    <a href="##">HELP</a>
    <a href="##">COMMENTS</a>
    <a href="##">GUEST BOOK</a>
    <a href="##">USEFULL TIPS</a>
    <a href="##">LINK EXCHANGE</a>
    <a href="##">FOR EMPLOYERS</a>
    <a href="##">SEND IT TO A FRIEND</a>
    <a href="##" class="b">LTD. PRESENTATION</a>
    </div>
    </body>
    </html>

  11. #11
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all4nerds, IE thinks your links are already visited, so you need .nav a:visited aswell.
    Simon Pieters

  12. #12
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    a:link <a href="#">HOME</a>is not working in IE

    a:link <a href="##">HOME</a>is not working in IE

    a:link <a href="">HOME</a> is working in IE

    a:link <a href="x.htm">HOME</a> is working in IE
    Last edited by all4nerds; Jun 19, 2005 at 11:38.

  13. #13
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "##" is not a valid URI? According to RFC 2396:
    URI-reference = &#91; absoluteURI | relativeURI &#93; &#91; "#" fragment &#93;
    Note that there can be only one fragment identifier.
    Birnam wood is come to Dunsinane

  14. #14
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Sorry still a no go a:link <a href="#">HOME</a> also is not working in IE !


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
  •