5 Replies Latest reply on Feb 1, 2010 11:03 PM by martcol

    Need help with different link styles on same page

    tenskir

      Hello,

       

      I'm using Dreamweaver CS4 on a PC.

       

      I have searched through a lot of posts over the last couple of days, I've tried the projectseven.com tutorial, google'd, etc. but still can't figure it out.....

      All I want to do is apply a different link colour to some links in the footer of my page. Elsewhere through the site I have set the colour to blue (for the link) and orange (for the hover) - for the footer links I want the link to be white and the hover colour to stay orange.

       

      The problem with the projectseven tutorial is that it doesn't seem to apply to CS4 and I kept getting error messages when trying to apply a new CSS rule - there's no Class|Tag|Advanced options as per the instructions ....

       

      I've copied the code of my page to this. The links which I want to apply a different style to are contained in the Div Tag called "Footer-Navigation-Bar" .

      Could someone please give me some instructions or point me in the right direction please??

       

      Many thanks,

      Vickie

       

       

       

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <!-- saved from url=(0014)about:internet -->
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <!-- TemplateBeginEditable name="doctitle" -->
      <title>Subscribe to Family Australia - it's free!</title>
      <!-- TemplateEndEditable -->
      <link href="../family-subscribe.css" rel="stylesheet" type="text/css" />
      <script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
      <link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
      <!-- TemplateBeginEditable name="head" -->
      <!-- TemplateEndEditable -->
      <style type="text/css">
      <!--
      a:link {
      color: #30C;
      text-decoration: none;
      }
      a:hover {
      color: #F30;
      text-decoration: none;
      }
      a:visited {
      text-decoration: none;
      }
      a:active {
      text-decoration: none;
      }
      -->
      </style></head>

      <body>
      <div id="container">
        <div id="banner">
          <ul id="family-subscribe-menu" class="MenuBarHorizontal">
            <li><a href="../index.html">Home</a>      </li>
            <li><a href="../subscribe.html">Subscribe</a></li>
            <li><a href="../family-advertise.html">Advertise</a>      </li>
            <li><a href="../family-articles.html">Articles</a></li>
      <li><a href="../family-sign-in.html">Issues</a></li>
            <li><a href="../family-contribute.html">Contribute</a></li>
      <li><a href="../family-contact.html">Contact</a></li>
          </ul>
      </div>
          <div id="sidebar"><a href="../family-sign-in.html"><img src="../images/launch-issue.jpg" alt="launch-issue" width="220" height="380" hspace="4" /></a>
            <div id="sidebar-image2">
              <p><img src="../images/Sleeping bag for web.jpg" width="220" height="151" alt="sleeping-bag" /></p>
              <p>Kozy Koala™ Pillow Sleeper is ideal for those  summer nights when the kids want to sleep out or when you go camping. The  all-in-one pillow camper consists of …. [MORE]</p>
            </div>
            <div id="sidebar-image3">
              <p><img src="../images/solrx for web.jpg" width="220" height="164" alt="sunscreen" /></p>
            SolRX® Sunscreens are very sweat and water  resistant – ideal for anyone who leads an active outdoor lifestyle … whether  you’re in the water or not! [MORE]</div>
        </div>
          <!-- TemplateBeginEditable name="main-content-region" -->
          <div id="main-content">main content</div>
          <!-- TemplateEndEditable -->
        <div id="footer">
      <div id="footer-navigation-bar"><a href="../family-about.html">about</a> | <a href="../family-advertise.html">advertise</a> | <a href="../family-contribute.html">contribute</a> | <a href="../family-contact.html">contact</a> | <a href="../family-unsubscribe.html">unsubscribe</a></div>
            <div id="footer-text">Family Australia | ABN 33150685385 | For all advertising enquiries please contact <a href="mailto:advertise@familyaustraliamagazine.com">advertise@familyaustraliamagazine.com</a><br />

      Copyright © 2010 Family Australia. All rights reserved.
      </div>
        </div>
        </div>
      </div>
      <script type="text/javascript">
      <!--
      var MenuBar1 = new Spry.Widget.MenuBar("family-subscribe-menu", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
      //-->
      </script>
      </body>
      </html>

        • 1. Re: Need help with different link styles on same page
          martcol Level 4
          The links which I want to apply a different style to are contained in the Div Tag called "Footer-Navigation-Bar" .
          ......
          ......
          a:link {

          color: #30C;
          text-decoration: none;
          }
          a:hover {
          color: #F30;
          text-decoration: none;
          }
          a:visited {
          text-decoration: none;
          }
          a:active {
          text-decoration: none;
          }


          Hello

           

          You can see above the CSS that applies to your links.  If you have links that you want to style in a diferent way, just write the rule Like this:

          #Footer-Navigation-Bar a:link {

          color: red;

          text-decoration: none;

          }

           

          Or whatever.  There are other ways but this will do you as you already have those links you want styled differently in a div with its own ID.  The new rule should come after the other rules in your CSS I think to make sure of the cascade although thinking about it,  there's something called specificity in CSS which means that the rule that I suggest will win out anyway.  All that you are doing in my suggestion is selecting the a:link that is a descendant of an element with that particular ID.

           

          I hope that helps.  I'm a bit of a novice and might have got a bit jumbled with the cascade/specficity thing but hey, I reckon that will get you where you want to go....

           

          Martin.

          • 2. Re: Need help with different link styles on same page
            tenskir Level 1

            Thanks Martin, you're brilliant! It worked! I've tested it in all the browsers and it looks great, although for some reason in Internet Explorer it doesn't change the link colour to what I specified, it stays the same colour it was before....  I'm hoping most people are using Firefox these days.

             

            Vickie

            • 3. Re: Need help with different link styles on same page
              John Waller Adobe Community Professional & MVP

              I'm afraid that the majority browser in most server logs is still Internet Explorer.

               

              Got a link so we can see the issue with the misbehaving link?

               

              Suggest you change your link order: anytime you define a group of link rules, the order should be a:link followed by a:visited followed by a:hover followed by a:active.

              1 person found this helpful
              • 4. Re: Need help with different link styles on same page
                tenskir Level 1

                Thanks John, I'll change the link order, perhaps that's why Internet Explorer isn't co-operating.

                I don't have a link to my site as I haven't got it up and running yet .... would code help?

                 

                Vickie

                • 5. Re: Need help with different link styles on same page
                  martcol Level 4

                  I think John's spot on there.  As a rule of thumb those pseudo-classes should appear as LoVe HAte

                   

                  a:link

                  a:visted

                  a:hover

                  a:active

                   

                  Don't you just love it when it works!

                   

                  Martin