Jump to content
musikndezine

footer links vs in paragraph links

Recommended Posts

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?

Share this post


Link to post
Share on other sites

Use a different class or id for each.

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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; }

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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; }

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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 by Don E

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...