...

View Full Version : Struggle with 2nd color for links in CSS



wieas
01-14-2010, 05:17 AM
Hi! I am feeling really stupid. I have been struggling for three weeks with my css code trying to get a second color for links on: http://www.orionconsultinggroup.net

I have looked it up on several websites and I am afraid that I am making a mess of my css without positive results. I have designed a web page that has a dark gray (#252525) background with a header and navigation panel that contain ecru type (#D4CFBB). I have an inset named #CV which has an ecru background (#D4CFBB) with dark gray lettering (#252525)--the inverse. I cannot, for the life of me, seem to be able to achieve a second color for the links in the #CV area. When I have added a link color in #CV, it turns the type to the background color (the default setting) and the type becomes invisible. Can anyone help me with this? I know I am missing something pretty fundamental. Thanks in advance for your help. Margaret

Here is the code to the website (http://www.orionconsultinggroup.net)



@charset “utf-8”;

#Header {
position:absolute;
left:29px;
top:8px;
width:966px;
height:157px;
z-index:1;
}
#Nav {
position:absolute;
left:28px;
top:177px;
width:196px;
height:475px;
z-index:2;
}
.footer {
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
color: #D4CFBB;
}
#CV {
position:absolute;
left:253px;
top:177px;
width:704px;
z-index:3;
padding-left: 20px;
padding-right: 20px;
background-color: #D4CFBB;
color: #252525;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
}
body {
background-color: #252525;
}
a:link {
color: #D4CFBB;
}
a:visited {
color: #D4CFBB;
}
a:hover {
color: #D4CFBB;
}
a:active {
color: #D4CFBB;
}

.subSubHeading {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: left;
font-style: italic;
margin-top: 0px;
}
.sectionTitle {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
}
li {
margin: 10px;
}
.company img {
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
a:link a:visited {
color: #D4CFBB;
text-decoration: none;
}
a:hover {
color: #F0F0F0;

}
a:active {
color: #D4CFBB;
}
.heading {
font-size: 28px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
color: #D4CFBB;
margin-bottom: 0px;
}
address {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: italic;
color: #D4CFBB;
}
#navLinks
a:link, #navLinks
a:visited {
color: #D4CFBB;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
}
#navLinks a:hover {
color: #F0F0F0;
text-decoration: underline;
}
.SubHeader {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #252525;
margin-bottom: 0px;
}
#CVLinks
a:link, #CVLinks
a:visited {
color: #252525;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
}
#CVLinks a:hover {
color: #252525;
text-decoration: underline;
}

Excavator
01-14-2010, 09:15 AM
Hello wieas,
I'm fairly certain from your question and the bit of CSS you posted (the link is wrong) that you have an element called #CV with some links in it. I may be wrong but I don't think you have an element called #CVLinks...
Try styling your links like this -

#CV a:link, #CV a:visited {
color: #252525;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
}
#CV a:hover {
color: #252525;
text-decoration: underline;
}

wieas
01-14-2010, 02:58 PM
Thank you, Excavator. Here is a link to the page containing the #CV division:

http://www.orionconsultinggroup.net/About%20Orion.html

Where would I place the code you suggest: on the Orion_screen.css, or on the About Orion.html?

Sorry to be so confused.

wieas
01-14-2010, 04:13 PM
Thank you, Excavator! You are genius! I had *tried* to do that, but I did it incorrectly. This is really great to have a person like you as a second pair of eyes. Thank you again!!!:D

Excavator
01-14-2010, 04:20 PM
Thank you, Excavator. Here is a link to the page containing the #CV division:

http://www.orionconsultinggroup.net/About%20Orion.html

Where would I place the code you suggest: on the Orion_screen.css, or on the About Orion.html?

Sorry to be so confused.

The CSS I quoted in my first reply would go in Orion_screen.css, at the bottom.
The mistake you need to correct to so you can style links in #CV is changing #CVLinks a:xxx to #CV a:xxx


Have a look at a tutorial that shows how to build and style links - http://www.w3schools.com/CSS/css_pseudo_classes.asp


And another that shows how to style specifici links with a class - http://www.w3schools.com/Css/pr_pseudo_link.asp

You could also check out the links about validation and tables in my signature line below.

Excavator
01-14-2010, 04:23 PM
This is really great to have a person like you as a second pair of eyes.

I guess you got it fixed then :thumbsup:

A great "second pair of eyes" is the validator, although it would not have found the error you just fixed.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum