homepage Welcome to WebmasterWorld Guest from 54.196.206.80
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Need a hyperlink to stay one colour - how?
Before and after visit
JackR




msg:4383726
 2:14 am on Nov 5, 2011 (gmt 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;}

 

JackR




msg:4383733
 2:41 am on Nov 5, 2011 (gmt 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;}

alt131




msg:4383934
 11:31 pm on Nov 5, 2011 (gmt 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;

zabalex




msg:4384263
 12:25 am on Nov 7, 2011 (gmt 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.

alt131




msg:4384368
 12:22 pm on Nov 7, 2011 (gmt 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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved