5 replies [Last post]
mable
Offline
newbie
Last seen: 18 years 6 weeks ago
Joined: 2004-08-23
Posts: 3
Points: 0

I have written a style shee that I have linked to on the web page that i have created. The text appears in a white table so i have made the links black and then a grey when they are hovered over and visited. now there is a table that i want to have navigation text links at the bottom of my page, This tables background is black. I want these links white, and then light grey wehn hovered. How do i write the code for these links in the individual tags. I want to keep the style sheet rules the same. It doesnt seem to work with a link:, i am new at this, thanks for the help

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 25 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

in line css link question

In the table with the navigation links that need to be different colours, give the table an ID, such as:

<table id="nav">

Then within your external CSS file, you can boss-about the a links within this individual table with:

table#nav a
{
color: #fff;
}
table#nav a:hover
{
color: #ccc;
}

The next sentence is true. The previous sentence is false. Discuss...

mable
Offline
newbie
Last seen: 18 years 6 weeks ago
Joined: 2004-08-23
Posts: 3
Points: 0

in line css link question

hmmmm.. I am still having troubles, at first this seemed to do the trick but now the rules for the nav table are being applied to another table that I have not given that ID to. In fact, the CSS rules for the nav table are being applied to the whole page.
here is what my CSS code looks like.

/* CSS Document */
body,td,th {
	font-family: Times New Roman, Times, serif;
	font-size: 14px;
	color: #000000;
	text-align: justify;
	vertical-align: top;
}
body {
	background-image:    url("assets/images/page_background.jpg");
	background-attachment: fixed;
	background-repeat: no-repeat;
	
}
a:link {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	color: #333333;
}
a:hover {
	font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	color: #666666
}
a:visited {
font-family: "Times New Roman", Times, serif;
	font-size: 14px;
	color: #666666
}
h1 {
	font-size: x-large;
}
h2 {
	font-size: 14px;
	color: #000000;
	font-weight: bold;
}
table#nav
body,td,th{
font-size:x-small;
color:#FFFFFF;}

 table#nav 
 a:link {
 font-size:small; 
 color: #fff; 
 } 
 table#nav a:hover 
 { 
 font-size:small;
 color: #999999; 
 }
 table#nav a:visited
  { 
 font-size:small;
 color: #999999; 
 
 }

and this is the html code for my table:

<table id="nav" width="680" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><div align="center">
<a href="home.html">home</a> : 
<a href="shows.html">shows</a> : 
<a href="media.html">media</a> : 
<a href="photoalbum.html">pictures</a> : 
<a href="band.html">the band</a> : 
<a href="http://us.1.p.webhosting.yahoo.com/gb/view?member=dontblink27&.start=1" target="_blank">guest book</a> : <a href="contact.html">contact</a> : 
<a href="links.html">links</a> </div></td>
</tr>
<tr>
<td height="15"><div align="center">site designed by nick hall : 
<a href="mailto:[email protected]">[email protected]</a> 
</div></td>
</tr>
</table>

thank you for the help

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 25 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

in line css link question

Simple fix... remove the body,td,th from the following:

table#nav
body,td,th{
font-size:x-small;
color:#FFFFFF;}

So it should read:

table#nav
{
font-size:x-small;
color:#FFFFFF;
}

If you want to apply it specifically to the td, and th of the table use:

table#nav td,table#nav th
{
font-size: x-small;
color: #fff;
}

The next sentence is true. The previous sentence is false. Discuss...

mable
Offline
newbie
Last seen: 18 years 6 weeks ago
Joined: 2004-08-23
Posts: 3
Points: 0

in line css link question

Thnak you for the help.
I have deleted body,td,th
it now reads:
table#nav
{
font-size:x-small;
color:#FFFFFF;
}

so now the nav table is exactly how i want it, but the rest of the page is still following the nav table rules. The whole page is written in white instead of black, except for h2,
h1 and paragraphs are in white.
I dont know how to fix it.
thanks

co2
co2's picture
Offline
Leader
UK
Last seen: 14 years 25 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

in line css link question

Sounds like you've still got a rule set for the body element in your CSS. The body CSS selector is purely for the body tag in your HTML. Ensure that it only appears the once at the top of the CSS file (this isn't a set rule, but helps).

Make sure it doesn't get used elsewhere as your previous example.

If this still doesn't help, post a link or the full CSS and HTML.

Smile

The next sentence is true. The previous sentence is false. Discuss...