3 Replies Latest reply on Mar 1, 2010 2:44 PM by RBH_EON

    Navigation bars

    RBH_EON

      Below is the code I used for my main navigation bar in the header section of my page which works just fine, I want to apply the same basic rules to a navigation bar in the footer of the same page but it's not working, any ideas?

      #header li a{
          background:#B8B89A;
          font-family:Arial, Helvetica, sans-serif;
          font-size:0.85em;
          font-weight:bold;
          color:#404235;
          text-decoration:none;
          margin-left:20px;
          margin-right:-20px;
          padding: .2em .5em;
          border-bottom-style: solid;
          border-bottom-color: 404235;
          border-bottom-width: 1px;
          margin-bottom: 20px;

        • 1. Re: Navigation bars
          zeeroe Level 1

          The problem may be that you're footer already has other styles that are overriding these styles.

           

          ( Firebug or a similar developer tool should be able to let you know what styles are being applied and where those styles are coming from )

           

          Try adding a more specific selector...for example, assuming you have some general wrapper id called "wrapper" ( as a last resort you could use !important ):

           

          instead of:

           

          #footer li a{

              background:#B8B89A;
              font-family:Arial, Helvetica, sans-serif;
               font-size:0.85em;
              font-weight:bold;
              color:#404235;
               text-decoration:none;
              margin-left:20px;
               margin-right:-20px;
              padding: .2em .5em;
               border-bottom-style: solid;
              border-bottom-color: 404235;
               border-bottom-width: 1px;
              margin-bottom: 20px;

          }

           

          you may need to do something like:

           

          #wrapper #footer li a{

              background:#B8B89A;
              font-family:Arial, Helvetica, sans-serif;
               font-size:0.85em;
              font-weight:bold;
              color:#404235;
               text-decoration:none;
              margin-left:20px;
               margin-right:-20px;
              padding: .2em .5em;
               border-bottom-style: solid;
              border-bottom-color: 404235;
               border-bottom-width: 1px;
              margin-bottom: 20px;

          }

          1 person found this helpful
          • 2. Re: Navigation bars
            Nancy OShea Adobe Community Professional & MVP

            What isn't working?   A URL to your test page would be better.  

            Without seeing your complete code, I'm guessing you don't have your various link states defined in the following sequence. aLiVHA  = a, link, visited, hover, active, focus (optional for keyboard users).

             

            CSS:

             

            #header li a, #footer li a {...all the rules you have now except color...}

            #header li a:link, #footer li a:link {color:#404235}

            #header li a:visited, #footer li a:visited {color:gray}

            #header li a:hover, #footer li a:hover {color:yellow}

            #header li a:active, #footer li a:active,

            #header li a:focus, #footer li a:focus {color:green}

             

             

            HTML:

            <div id="header">

            <ul>

            <li><a href="#">some link</a></li>

            <li><a href="#">some link</a></li>

            <li><a href="#">some link</a></li>

            </ul>

            </div>

             

            <div id="footer">

            <ul>

            <li><a href="#">some link</a></li>

            <li><a href="#">some link</a></li>

            <li><a href="#">some link</a></li>

            </ul>

            </div>

             

            Nancy O.
            Alt-Web Design & Publishing
            Web | Graphics | Print | Media  Specialists
            http://alt-web.com/
            http://twitter.com/altweb
            http://alt-web.blogspot.com

            1 person found this helpful
            • 3. Re: Navigation bars
              RBH_EON Level 1

              Thank you both for your ideas, I think I have this figured out now. Maybe not ideal, but it works in browser preview.  I'm just learning as I go, this forum  has been a great resource so far and I would expect to be posting often as I work through designing my site.

               

              Rob