musikndezine Posted September 17, 2012 Share Posted September 17, 2012 I have a basic page set up. I have <a href></a> links in the body and in the footer. My page is set up with divs and ids and all the styles are set in my CSS sheet. How to I set the links in the footer to a different color than the ones in the body? Link to comment Share on other sites More sharing options...
niche Posted September 17, 2012 Share Posted September 17, 2012 Use a different class or id for each. Link to comment Share on other sites More sharing options...
musikndezine Posted September 17, 2012 Author Share Posted September 17, 2012 I thought I had done that. Here is the link section of my style sheet: a:link { text-decoration:none; color:#F6F6F6; }a:visited { text-decoration:none; color:#F6F6F6; }a:hover { color:#F6F6F6; }a:bodylink:link { text-decoration:none; color: #DB0F0F; }a:bodylink:visted { text-decoration:none; color: #DB0F0F; }a:bodylink:hover { color: #DB0F0F; } Footer Div:<div id="footer" ><a href="index.html">Home</a> | <a href="about.html">About RRWS</a> | <a href="support.html">Support RRWS</a> | <a href="theband.html">Band Members</a> | <a href="rehearsals.html">Rehearsal Information</a> | <a href="contact.html">Contact RRWS</a></div> <!--closes footer--> link from body I want a different color:<p>Please visit our <a href="support.html" class="bodylink">Support RRWS </a>page for information about concerts and ticket purchases.</p> Link to comment Share on other sites More sharing options...
Ingolme Posted September 17, 2012 Share Posted September 17, 2012 That should be a.bodylink Link to comment Share on other sites More sharing options...
musikndezine Posted September 17, 2012 Author Share Posted September 17, 2012 in this set of code?<p>Please visit our <a href="support.html" class="bodylink">Support RRWS </a>page for information about concerts and ticket purchases.</p> if I do, then it takes the link away. Something must be negating that style. My whole style sheet: #box { font-family:sans-sarif; color:#333333; width:1024px; margin:auto; height:680px; padding:3px; } #header { width:auto; margin:auto; width:1020px; background-color:#FFFFFF; padding:3px; }#navbar { font-family:sans-sarif; font-size:18; color:#F6F6F6; background-color:#990100; }#main { font-family:sans-sarif; font-size:18px; color:#333333; margin:auto; width:1020px; height:auto; background-color:#FFFFFF; padding:3px; }#performances { font-family:sans-sarif; font-size:18px; margin-left:550px; margin-bottom:25px; padding:3px; }#date { font-family:sans-sarif; color:#990100; }#location { font-family:sans-sarif; color:#990100; font-style:italic; }.important { font-style:italic; }#footer { font-family:sans-sarif; color:#F6F6F6; background-color:#990100; width:1020px; padding:3px; }p { margin-left:10px; }ul { list-style-type:none; margin:0; padding:0; padding-top:6px; padding-bottom:6px; }li { display:inline; }body { background-color:#F6F6F6; }a:link, a:visited { text-decoration:none; color:#B90504; font-weight:bold; }a:hover { color:#B90504;}a:navbar:link, a:navbar:visted, { text-decoration:none; color:#F6F6F6; font-weight:bold; }a:navbar:hover { color:#B90504; background-color:#8A0100; } Link to comment Share on other sites More sharing options...
Don E Posted September 17, 2012 Share Posted September 17, 2012 Try specifically targeting, for example:p a.bodylink { } That says... target the a element with the class bodylink inside a paragraph element. Also, I dont think this are invalid: a:navbar:link, a:navbar:visted a:navbar:hover If youre looking to target anchors with class of 'navbar', you write it: a.navbar:link a.navbar:visited a.navbar:hover Link to comment Share on other sites More sharing options...
musikndezine Posted September 18, 2012 Author Share Posted September 18, 2012 Thanks I will try that. I took that a:navbar:link from another site. Maybe I copied the code wrong? I will change those first and see if that helps. Link to comment Share on other sites More sharing options...
musikndezine Posted September 18, 2012 Author Share Posted September 18, 2012 Okay, still does not seem to work. Maybe the error is in the page code???<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/transitional.dtd"><html xmlns=http://www.w3.org/1999.xhtml><head><link rel="icon" href="/favicon.ico" type="image/icon" />.<title>Red River Wind Symphony</title><link href="styles2.css" rel="stylesheet" type="text/css"></head><body><div id="box"><div id="header"><a href="index.html"><img src="images/rrwsheader.gif" alt="Red River Wind Symphony Logo" /></a><ul id="navbar"><li><a href="index.html">Home</a></li><li><a href="about.html">About RRWS</a></li><li><a href="support.html">Support RRWS</a></li><li><a href="theband.html">RRWS Members</a></li><li><a href="contact.html">Contact RRWS</a></li></div> <!--closes header--><div id="main"><p>The <em>Red River Wind Symphony</em> is a local wind symphony in Pineville, Louisiana that is composed with members from thoughout the community who love to get together and share their passion for the arts by making music together. The <em>Red River Wind Symphony's</em> season is August through May. While we will play a time or two during the summer for holidays and/or special occasions, we like to give our band members a chance to relax and enjoy their families.</p><p>Please visit our <a href="support.html" class="bodylink">Support RRWS </a>page for information about concerts and ticket purchases.</p><div id="performances"><table><tr><td><h3>Upcoming Performances</h3></td></tr><tr><td><strong>Fall Concert</strong></td></tr><tr><td id="date">October 30, 2012 at 7pm</td></tr><tr><td id="location">Location:Pineville High School</td></tr></table></div><!--closes performances--></div> <!--closes main--><div id="footer" ><a href="index.html">Home</a> | <a href="about.html">About RRWS</a> | <a href="support.html">Support RRWS</a> | <a href="theband.html">Band Members</a> | <a href="rehearsals.html">Rehearsal Information</a> | <a href="contact.html">Contact RRWS</a></div> <!--closes footer--></div> <!--closes box--></body> Link to comment Share on other sites More sharing options...
Ingolme Posted September 18, 2012 Share Posted September 18, 2012 The problem is that you're using a colon ( : ) instead of a dot ( . ) to select classes. This is how you should have the selector: a.navbar:link Link to comment Share on other sites More sharing options...
Don E Posted September 18, 2012 Share Posted September 18, 2012 Post your updated CSS. Link to comment Share on other sites More sharing options...
musikndezine Posted September 18, 2012 Author Share Posted September 18, 2012 Updated CSS: #box{font-family:sans-sarif;color:#333333;width:1024px;margin:auto;height:680px;padding:3px;} #header{width:auto;margin:auto;width:1020px;background-color:#FFFFFF;padding:3px;}#wrap{postition:relative;}#headerlines{float:right;width:auto;margin:5px;}#headline{height:30px;background-color:#990100;}#navbar{font-family:sans-sarif;font-size:20; color:#F6F6F6;background-color:#990100;}#main{font-family:sans-sarif;font-size:18px;color:#333333;margin:auto;width:1020px;height:auto;background-color:#FFFFFF;padding:3px;}#performances{font-family:sans-sarif;font-size:18px;margin-left:550px;margin-bottom:25px;padding:3px;}#date{font-family:sans-sarif;color:#990100;}#location{font-family:sans-sarif;color:#990100;font-style:italic;}.important{font-style:italic;}#footer{font-family:sans-sarif;color:#F6F6F6;background-color:#990100;width:1020px;height:25px;padding:3px;}p{margin-left:10px;}ul{list-style-type:none;margin:0;padding:0;padding-top:6px;padding-bottom:6px;}li{display:inline;}body{background-color:#F6F6F6;}a:link, a:visited{text-decoration:none;color:#B90504;font-weight:bold;}a:hover{color:#B90504;}a.navbar:link{text-decoration:none;color:#F6F6F6;font-weight:bold;}a.navbar:visted{text-decoration:none;color:#F6F6F6;font-weight:bold;}a.navbar:hover{ color:#B90504;background-color:#8A0100; } Link to comment Share on other sites More sharing options...
musikndezine Posted September 18, 2012 Author Share Posted September 18, 2012 I know I have a few things on here that I have not updated on CSS. Updated Page Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/transitional.dtd"><html xmlns=http://www.w3.org/1999.xhtml><head><link rel="icon" href="/favicon.ico" type="image/icon" />.<title>Red River Wind Symphony</title><link href="styles2.css" rel="stylesheet" type="text/css"></head><body><div id="box"><div id="header"><div id="wrap"><a href="index.html"><img src="images/rrwstitlelogo.png" alt="Red River Wind Symphony Logo" /></a><div id="headerline"></div> <!--closes headerline01--><div id="headerline"></div> <!--closes headerline02--><div id="headerline"></div> <!--closes headerline03--><div id="headerline"></div> <!--closes headerline04--></div> <!--closes wrap--></div> <!--closes header--><div id="navbar"><a href="index.html">Home</a> | <a href="about.html">About RRWS</a> | <a href="support.html">Support RRWS</a> | <a href="theband.html">RRWS Members</a> | <a href="rehearsals.html">Rehearsal Information</a> | <a href="contact.html">Contact RRWS</a></div> <!--closes navbar--><div id="main"><p>The <em>Red River Wind Symphony</em> is a local wind symphony in Pineville, Louisiana that is composed with members from thoughout the community who love to get together and share their passion for the arts by making music together. The <em>Red River Wind Symphony's</em> season is August through May. While we will play a time or two during the summer for holidays and/or special occasions, we like to give our band members a chance to relax and enjoy their families.</p><p>Please visit our <a href="support.html">Support RRWS </a>page for information about concerts and ticket purchases.</p><div id="performances"><table><tr><td><h3>Upcoming Performances</h3></td></tr><tr><td><strong>Fall Concert</strong></td></tr><tr><td id="date">October 30, 2012 at 7pm</td></tr><tr><td id="location">Location:Pineville High School</td></tr></table></div><!--closes performances--></div> <!--closes main--><div id="footer" ></div> <!--closes footer--></div> <!--closes box--></body> Link to comment Share on other sites More sharing options...
Don E Posted September 18, 2012 Share Posted September 18, 2012 (edited) It may be because you don't... according to the updated code, you dont have any elements with the class called .navbar but instead have a #navbar selector that selects an element with an id of navbar. Edited September 18, 2012 by Don E Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now