2 Replies - 598 Views - Last Post: 15 February 2014 - 07:19 AM

#1 NecroWinter  Icon User is offline

  • D.I.C Regular

Reputation: 37
  • View blog
  • Posts: 320
  • Joined: 21-October 11

Why my links arent changing colors

Posted 12 February 2014 - 12:13 AM

css:
.banner{
color:purple;
font-family:Arial,Helvetica,sans-serif;
font-size:110%;
position:relative;
top:-70px;
right:-100px;
text-transform:uppercase;
font-weight:bold;
a:link    {color:green;}
a:visited {color:green;}
a:hover   {color:red;}
a:active  {color:yellow;}
}




html:
<div class ="banner">
<a href="#">home</a>
<a href="#">about</a>
<a href="#">resume</a>
<a href="#">projects</a>
<a href="#">web apps</a>
<a href="#">code snippets</a>
<a href="#">contact</a>
</div>




the div is placed correctly, but i cant get the links to change color. the colors are blue/purple (web default)

i was thinking that since its inside banner, anything in the div would use banner, i also tried making another class but even that didnt work.

Is This A Good Question/Topic? 0
  • +

Replies To: Why my links arent changing colors

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3541
  • View blog
  • Posts: 10,251
  • Joined: 08-June 10

Re: Why my links arent changing colors

Posted 12 February 2014 - 01:03 AM

your <div> may be placed correctly, but the problem is with CSS. it doesn’t allow nesting.
Was This Post Helpful? 0
  • +
  • -

#3 rahulsahu013  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 20-November 13

Re: Why my links arent changing colors

Posted 15 February 2014 - 07:19 AM

Your code is right. But your css would be like this:
.banner{
color:purple;
font-family:Arial,Helvetica,sans-serif;
font-size:110%;
position:relative;
top:-70px;
right:-100px;
text-transform:uppercase;
font-weight:bold;
}

.banner a:link {color:green;}
.banner a:visited {color:green;}
.banner a:hover   {color:red;}
.banner a:active  {color:yellow;}

This anchor css work on only banner anchor. If you want to give same color effect to all anchor in you code so just remove .banner from a in css like this:


a:link    {color:green;}
a:visited {color:green;}
a:hover   {color:red;}
a:active  {color:yellow;}




This post has been edited by andrewsw: 15 February 2014 - 07:21 AM
Reason for edit:: Removed large quote

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1