Welcome to WebmasterWorld Guest from 54.234.38.8

Forum Moderators: not2easy

Message Too Old, No Replies

Need a hyperlink to stay one colour - how?

Before and after visit

     
2:14 am on Nov 5, 2011 (gmt 0)

Full Member

10+ Year Member

joined:Oct 15, 2005
posts: 326
votes: 0


Can I get somehelp with this css please - it's driving me nuts!


<div id="menu2">
<div id="m2spacer">

<h1></h1>

<p>THIS HYPERLINK needs to be #00AEFF with no underlning</p>



#menu2 {
float: left;
width: 370px;}

#menu2 h1 {
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
padding: 0px;
margin: 0px;}

#menu1 h2 {
color: #FFFFFF;
font-size: 12px;
font-weight: normal;
padding: 0px;
margin: 0px;
padding: 0px;}

#menu2 p {
font-size: 11px;
margin-top: 0px;
padding-top: 2px;
color:#FFFFFF;
padding-bottom: 2px;
line-height: 150%;}

#menu2 p a:link {
font-weight: normal;
color: #00AEFF;
text-decoration: none;}

#menu2 a {
font-weight: normal;
color: #FFFFFF;
text-decoration: none;}

#menu2 a:link {
font-weight: normal;
color: #00AEFF;
text-decoration: none;}

.hyper a:hover, #menu2 a:hover, #menu4 a:hover, .cen a:hover {
color: #00AEFF;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #FF0000;}
2:41 am on Nov 5, 2011 (gmt 0)

Full Member

10+ Year Member

joined:Oct 15, 2005
posts: 326
votes: 0


Fixed it. If this helps anyone:


#menu2 {
float: left;
width: 370px;
font-family: Verdana;
font-size: 11px;
color:#FFFFFF;
font-weight: normal;
text-decoration: none;
padding-top: 2px;
padding-bottom: 2px;
line-height: 150%;}

a:link {
color: #00AEFF;
text-decoration: none;}

a:visited {
color: #00AEFF;}

a:hover {
color: #00AEFF;}

a:active {
color: #00AEFF;}

#menu2 h1 {
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
padding: 0px;
margin: 0px;}

#menu1 h2 {
color: #FFFFFF;
font-size: 12px;
font-weight: normal;
padding: 0px;
margin: 0px;
padding: 0px;}

.hyper a:hover, #menu4 a:hover, .cen a:hover {
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #FF0000;}
11:31 pm on Nov 5, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


Hi JackR - welcome to css, and thanks for telling us you have a solution.
As a note for later readers, the reason adding an :visited rule worked is because :link is specific to links that have not been visited.

In the original code once a link had been visited neither #menu2 p a:link or #menu2 a:link applied to set color: #00AEFF;. That left #menu2 a which set color: #FFFFFF;, so it was necessary to override that by setting :visited to color: #00AEFF;
12:25 am on Nov 7, 2011 (gmt 0)

Junior Member

joined:Oct 19, 2011
posts: 52
votes: 0


Hi,
if you want to set the css for <p> elements you need to define the css for <p> like

#m2spacer p {text-decoration:none; color:#00AEFF}
#m2spacer a.p:link {text-decoration:none; color:#00AEFF}
#m2spacer a.p:hover {text-decoration:none; color:#00AEFF}
#m2spacer a.p:visited {text-decoration:none; color:#00AEFF}
#m2spacer a.p:active {text-decoration:none; color:#00AEFF}

since the p is nested within m2spacer div id so the parent must be called to indicate that the above style applies to the underlying p element.
12:22 pm on Nov 7, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


Hi zabalex, and welcome back - it's been a while!
Just a couple points in your post:
You don't have to qualify the <p> by "calling" the parent: It might be necessary if the HTML is heavily classed - but hopefully the code is "clean" enough that's not required ;)
a.p looks like a typo because it selects an <a>. with the class name "p". I think what you meant was
#m2spacer p a