943,712 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Two link types in different colours
Ad:
Permalink
Oct 13th, 2008
0

Two link types in different colours

Expand Post »
My navigation system consists of a main bar, which changes colour when a mouse hovers over it. Clicking this link results in a secondary menu appearing, in silver/white.

However, the content background is white, so these link colours aren't suitable. I have tried changing my CSS code so that the link colours are different for items within the content div, but haven't pulled it off as yet. I was hoping someone could point me in the right direction.

Page Code:
HTML and CSS Syntax (Toggle Plain Text)
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  3. <title>Further Flight</title>
  4. <link rel="stylesheet" type="text/css" href="http://www.further-flight.co.uk/style/20080820.css"/>
  5. </head>
  6.  
  7. <body>
  8.  
  9. <div id="secondary"><?php include($_SERVER['DOCUMENT_ROOT'].'/style/secondary_previews.php');?></div>
  10. <div id="header"><?php include($_SERVER['DOCUMENT_ROOT'].'/style/header.php');?></div>
  11. <div id="logo"><?php include($_SERVER['DOCUMENT_ROOT'].'/style/logo.php');?></div>
  12. <div id="navigation"><?php include($_SERVER['DOCUMENT_ROOT'].'/style/main.php');?></div>
  13.  
  14. <div id="content">
  15. 	<h2>Overview of Jackpot Previews</h2>
  16.  
  17. 	<p>	
  18. 	<a class="content">
  19.  
  20. 	Our resident columnist Pip, from Lodgehill Stables, selects three races a night to preview.  As soon as racing
  21. 	begins, we hope to bring this popular feature back to your screens!
  22.  
  23. 	</p></a>
  24. </div>

CSS Code:
HTML and CSS Syntax (Toggle Plain Text)
  1.  
  2. /*------  BASIC LAYOUT  ------*/
  3.  
  4. #secondary{
  5. 	margin: 0px 0px 0px 0px;
  6. 	width: 100%;
  7. 	height: 15px;
  8. 	font: 0.7em arial, verdana, sans-serif;
  9. 	background-color: #494949;
  10. 	padding: 5px 0px 5px 0px;
  11. 	text-indent: 10px;
  12. 	color: silver;
  13. }
  14.  
  15. #logo{
  16. 	height: 80px;
  17. 	background-color: #000000;
  18. 	z-index: 1;
  19. }
  20.  
  21. #header{
  22. 	position: absolute;
  23. 	top: 20px;
  24. 	right: 50px;
  25. 	text-align: right;
  26. 	z-index: 2;
  27. }
  28.  
  29. #footer{
  30. 	background: url(/images/footer.png) repeat-x;
  31. 	text-align: center;
  32. 	padding: 10px 0;
  33. 	font: bold 0.8em arial, verdana, sans-serif;
  34. 	text-align: center;
  35. 	color: #FFFFFF;
  36. 	border: 1px solid #000000;
  37. }
  38.  
  39.  
  40. /*------  ELEMENTS AND TAGS  ------*/
  41.  
  42. a:link {
  43. 	color: white;
  44. 	text-decoration:none;
  45. }
  46.  
  47. a:visited {
  48. 	color: silver;
  49. 	text-decoration:none;
  50. }
  51.  
  52. a:hover {
  53. 	color:silver;
  54. 	text-decoration:bold;
  55. }
  56.  
  57. body {
  58. 	background-image: url("/images/20080820_back1.png");
  59. 	background-repeat: repeat;
  60. }
  61.  
  62. h1	{
  63. 	color: #FFFFFF;
  64. 	font: 2em arial, verdana, sans-serif;
  65. 	letter-spacing: 2px;
  66. }
  67.  
  68. h2	{
  69. 	color: #C0C0C0;
  70. 	font: 0.9em arial, verdana, sans-serif;
  71. }
  72.  
  73.  
  74.  
  75.  
  76.  
  77.  
  78.  
  79.  
  80. /*------  CONTENT BOXES  ------*/
  81.  
  82. div#content {
  83. 	margin-top: 30px;
  84. 	padding: 20px;
  85. 	border: 1px solid #000000;
  86. 	background: #FFFFFF;
  87. 	font: 0.8em arial, verdana, sans-serif;
  88. 	}
  89.  
  90. div#content h2 {
  91. 	position: relative;
  92. 	float: left;
  93. 	margin: -38px 0 15px 0;
  94. 	padding: 8px;
  95. 	border: 1px solid #000000;
  96. 	background: black url(/images/blockactive.gif) center center repeat-x;
  97. 	font: bold 1em arial, verdana, sans-serif;
  98. 	color: #FFFFFF;
  99. 	}
  100.  
  101. div#content h1 {
  102. 	font: bold 0.8em arial, verdana, sans-serif;
  103. 	color: #000000;
  104. 	}
  105.  
  106. div#content p {
  107. 	clear: left;
  108. 	color: #000000;
  109. 	text-align: justify;
  110. 	}
  111.  
  112. 		a.content:link {
  113. 			color: blue;
  114. 			text-decoration:none;
  115. 		}
  116.  
  117. 		a.content:visited {
  118. 			color: purple;
  119. 			text-decoration:none;
  120. 		}
  121.  
  122. 		a.content:hover {
  123. 			color:red;
  124. 			text-decoration:bold;
  125. 		}
Reputation Points: 11
Solved Threads: 1
Light Poster
Borderline is offline Offline
49 posts
since Apr 2008
Permalink
Oct 13th, 2008
0

Re: Two link types in different colours

Oops, ignore my reply. I wasn't able to answer your question x_X
Last edited by ada_a; Oct 13th, 2008 at 12:12 pm.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
ada_a is offline Offline
9 posts
since Feb 2008
Permalink
Oct 15th, 2008
0

Re: Two link types in different colours

Browsers have accessibility settings to disable changing the colors of links. Check your settings.

Link color metastyles are global in nature.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Firefox Problem
Next Thread in HTML and CSS Forum Timeline: Dropdown Scripts





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC