4 Replies Latest reply on Jan 24, 2009 8:42 AM by movingpictureTV

    Selected button not highlighting

    movingpictureTV
      Hi, I have a simple CSS menu. When you are on a selected page, say 'Home', I want that button to remain highlighted - usually I'd use selnavbar but it's not working.
      Can anybody help? HTML and CSS is below...Thanks.

      <div class="navbar">

      <ul>
      <li id="selnavbar"><a href=" http://homepage.mac.com">Home</a></li>
      <li><a href=" http://www.">Movies</a></li>
      <li><a href=" http://www./audio/">Audio</a></li>
      <li><a href=" http://www./blog/">Blog</a></li>
      <li><a href=" http://www./contact/">Contact</a></li>
      </ul>

      </div>

      .navbar{
      width: 800px;
      overflow: hidden;
      margin : 0 auto;
      padding : 0 10px 0 10px;
      }

      .navbar ul{
      margin: 0;
      padding: 0;
      padding-left: 0px;
      font: bold 12px Verdana;
      list-style-type: none;
      }

      .navbar li{
      display: inline;
      margin: 0;
      }

      .navbar li a{
      float: left;
      display: block;
      text-decoration: none;
      margin: 0;
      padding: 7px 8px;
      border-right: 1px solid white;
      color: white;
      background: #414141;

      .navbar li a:visited{
      color: white;
      }

      .navbar li a:hover, .navbar li.selected a{
      background: black;
      }

        • 1. Re: Selected button not highlighting
          Level 7
          > selnavbar

          What's that?

          > .navbar li a:hover, .navbar li.selected a{
          > background: black;

          You will have to have the 'selected' class applied to the list element
          containing the button that should be shown in the selected state for this to
          work. That would mean that you have to manually do this on each such page.

          > http://www.">Movies

          You realize that these are bad links, right? You just used them for
          example?

          Also, why have you used div.navbar and not div#navbar? An id selector makes
          more sense here unless you want to reuse the 'navbar' class somewhere else
          on the page (which I doubt).

          And why are you floating the anchor tags and not the list elements instead?

          --
          Murray --- ICQ 71997575
          Adobe Community Expert
          (If you *MUST* email me, don't LAUGH when you do so!)
          ==================
          http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
          http://www.dwfaq.com - DW FAQs, Tutorials & Resources
          ==================


          "mhkelly" <webforumsuser@macromedia.com> wrote in message
          news:gletns$802$1@forums.macromedia.com...
          > Hi, I have a simple CSS menu. When you are on a selected page, say 'Home',
          > I
          > want that button to remain highlighted - usually I'd use selnavbar but
          > it's not
          > working.
          > Can anybody help? HTML and CSS is below...Thanks.
          >
          > <div class="navbar">
          >
          >
          >
          > </div>
          >
          > .navbar{
          > width: 800px;
          > overflow: hidden;
          > margin : 0 auto;
          > padding : 0 10px 0 10px;
          > }
          >
          > .navbar ul{
          > margin: 0;
          > padding: 0;
          > padding-left: 0px;
          > font: bold 12px Verdana;
          > list-style-type: none;
          > }
          >
          > .navbar li{
          > display: inline;
          > margin: 0;
          > }
          >
          > .navbar li a{
          > float: left;
          > display: block;
          > text-decoration: none;
          > margin: 0;
          > padding: 7px 8px;
          > border-right: 1px solid white;
          > color: white;
          > background: #414141;
          >
          > .navbar li a:visited{
          > color: white;
          > }
          >
          > .navbar li a:hover, .navbar li.selected a{
          > background: black;
          > }
          >
          >
          >

          • 2. Re: Selected button not highlighting
            movingpictureTV Level 1
            Thanks for your help Murray - my friend who emailed me the HTML and CSS has frankly just confused me...

            I am now following instructions from you and Dreamweaver 8 Bible.

            I've now managed to get it so my Home button is highlighted - but now the rollovers on the other buttons don't work.

            I'm pretty sure it's a something simple I'm missing - and I've probably been looking at the screen too long to see it.

            Again, I attach my amended code...

            <div id="navbar">

            <ul>
            <li id="sel#navbar"><a href=" http://homepage.mac.com">Home</a></li>
            <li><a href=" http://www.">Movies</a></li>
            <li><a href=" http://www.">Audio</a></li>
            <li><a href=" http://www.">Blog</a></li>
            <li><a href=" http://www.">Contact</a></li>
            </ul>

            </div>


            #navbar{
            width: 800px;
            overflow: hidden;
            margin : 0 auto;
            padding : 0 10px 0 10px;
            }

            #navbar ul{
            margin: 0;
            padding: 0;
            padding-left: 0px;
            padding-top: 10px;
            font: bold 12px Verdana;
            list-style-type: none;
            }

            #navbar ul li{
            display: inline;
            margin: 0;
            }

            #navbar ul li a{
            float: left;
            display: block;
            text-decoration: none;
            margin: 0;
            padding: 7px 10px;
            color: #000000;
            }

            #navbar ul li a: hover{
            color: #7a0a17;
            }

            #navbar ul li#selnavbar a, #navbar ul li#selnavbar a:hover {
            color: #7a0a17;
            }

            • 3. Re: Selected button not highlighting
              Level 7
              <li id="sel#navbar">

              This is improperly formed. It should be (mostlikely) -

              <li id="selnavbar">

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "mhkelly" <webforumsuser@macromedia.com> wrote in message
              news:glf9cj$kl8$1@forums.macromedia.com...
              > Thanks for your help Murray - my friend who emailed me the HTML and CSS
              > has
              > frankly just confused me...
              >
              > I am now following instructions from you and Dreamweaver 8 Bible.
              >
              > I've now managed to get it so my Home button is highlighted - but now the
              > rollovers on the other buttons don't work.
              >
              > I'm pretty sure it's a something simple I'm missing - and I've probably
              > been
              > looking at the screen too long to see it.
              >
              > Again, I attach my amended code...
              >
              > <div id="navbar">
              >
              >
              >
              > </div>
              >
              >
              > #navbar{
              > width: 800px;
              > overflow: hidden;
              > margin : 0 auto;
              > padding : 0 10px 0 10px;
              > }
              >
              > #navbar ul{
              > margin: 0;
              > padding: 0;
              > padding-left: 0px;
              > padding-top: 10px;
              > font: bold 12px Verdana;
              > list-style-type: none;
              > }
              >
              > #navbar ul li{
              > display: inline;
              > margin: 0;
              > }
              >
              > #navbar ul li a{
              > float: left;
              > display: block;
              > text-decoration: none;
              > margin: 0;
              > padding: 7px 10px;
              > color: #000000;
              > }
              >
              > #navbar ul li a: hover{
              > color: #7a0a17;
              > }
              >
              > #navbar ul li#selnavbar a, #navbar ul li#selnavbar a:hover {
              > color: #7a0a17;
              > }
              >
              >
              >

              • 4. Re: Selected button not highlighting
                movingpictureTV Level 1
                Hi Murray. Thanks again. Now the 'home' button is the right colour but the rollovers all remain black?