Log in

View Full Version : CSS problems


vachola
May 9, 2008, 05:00 PM
Hello gurus,
Can one help me here. I have created this site and I try to make changes to the style sheets and they are not effected. ARC-KENYA (http://www.arc-kenya.org/parser.php?page=index)

1. In the contents, I want to change the active links to have a different color rather than back
2. When u place the mouse over the links ARO Fablab etc, they shake. Can some help me solve this please? I will appreciate

Artem
Jan 12, 2009, 11:42 AM
1. Not sure what you mean by active links, but when checking your CSS code, I see you have something called a:active {.. ;}
No point in using that, as for we can't see the Hit instance in our browser. Only link, visited and hover.
You can change the link color in the content like so:

a:link, a:visited {
color: color here
}

a:hover {
color: color here
}

Leaving you the possibility to specify your .menu a:link etc.
BTW: I prefer to use id="menu" (#menu) instead of class(.menu), for it is a part only seen once on every page.

2. It shakes because of the font-size change you make between a:link, menu a:link and again .menu a:link.
Take a look.



A {
font-size: 11px;
color : #000000;
text-decoration : none;
}

A:Visited {
color : #000000;
text-decoration : none;
}

A:Active {
font-weight : bold;
color : #;
text-decoration : none;
}

A:Hover {
font-weight : bold;
color:#666666;
text-decoration: underline;
}

h3.menu {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:900;
}

.menu h2 {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
font-weight:bold;
font-style:normal;
font-size:12px;
text-decoration:underline;

} /* selected link */
.menu a:link, .menu a:visited, .menu a:hover, .menu a:active {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#6633FF;
font-size:14px;
font-style:normal;
line-height: 2;
}


/*
.menu a:link {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000066;
font-size:12px;
font-style:normal;
line-height: 2;


} /* unvisited link */

.menu a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000099;
font-size:12px;
font-style:normal;
line-height: 2;
} /* visited link */

.menu a:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000099;
font-size:12px;
font-style:normal;
line-height: 2;

} /* mouse over link

.menu a:active {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000099;
font-size:12px;
line-height: 2;

} /* selected link */

*/

.content a:link {
font-family:Verdana, Arial, Helvetica, sans-serif;
color: #9900FF;
font-size:11px;
font-style:normal;


} /* unvisited link */

.content a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#993366;
font-size:11px;
font-style:normal;
} /* visited link */

.content a:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#0000CC;
color:#000099;
font-size:11px;
text-decoration:none;
font-style:normal;



} /* mouse over link */

.content a:active {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#CC33CC;


I suggest you clean up abit, leaving you with:



a:link {
font-size: 11px;
color : #000;
text-decoration : none;
}

a:visited {
color : #000;
text-decoration : none;
}

a:hover {
color:#666;
text-decoration: underline;
}

.menu a:link {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#006;
font-size:12px;
font-style:normal;
line-height: 2;
}

.menu a:visited {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000099;
font-size:12px;
font-style:normal;
line-height: 2;
}

.menu a:hover {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000099;
font-size:12px;
font-style:normal;
line-height: 2;
}


Hope it helps you abit.