9 Replies Latest reply on Apr 8, 2010 4:08 PM by nancyp53

    CSS Horizontal Menu Functionality

    nancyp53

      I've been studying tutorials and forum posts, and can't find an answer, so I'm posting my question here.

      I have a simple horizontal menu. It's great to look at. But it's not functional -- mainly because there are no hyperlinks in the <li> code. But if I put the hyperlinks in the <a href=""> tags where I'd expect them to go, the functionality doesn't improve.

       

      (BTW, my CSS page uses display:block and display:inline and float:left).

       

      Here's the HTML, coded according to the instructions in the  tutorials:

      <div id="navbar"><ul>
      <li><a href="#"><span  id="nav">Home</span></a></li>
      <li><a href="#"><span  id="nav">Playground Products</span></a></li>
      <li><a href="#"><span  id="nav">Gallery</span></a></li>
      <li><a href="#"><span id="nav">About  Us/Contact Us</span></a></li></ul>
      </div>

       

      I want each List Item to be clickable text -- to link to another page on the web site. I don't see any place in the previous example to put the hyperlink information. When I put it in a logical (to me) place as in the code below, there's still no functionality in Firefox, Opera, or Chrome; clicking on these pieces of text does nothing at all -- the cursor doesn't even change. However, in IE7, I get a "flickering" version of menu functionality. (That is, the clickable text words shift to the right and left as the mouse passes over them.) What's wrong? And where should the hyperlink go, if not bracketing the clickable text that launches the hyperlink?

      <div id="navbar"><ul>
      <li><a href="index.html"><span id="nav">Home</span></a></li>
      <li><a href="products.htm"><span id="nav">Playground Products</span></a></li>
      <li><a href="gallery.htm"><span id="nav">Gallery</span></a></li>
      <li><a href="about.htm"><span id="nav">About Us/Contact Us</span></a></li></ul>
      </div>

       

      Thanks very much.

        • 1. Re: CSS Horizontal Menu Functionality
          John Waller Adobe Community Professional & MVP

          <li><a href="index.html"><span id="nav">Home</span></a></li>

           

          There's nothing wrong with the code above. There's obviously something else going on.

           

          Can you please provide a link so we can take a look at the live page?

          • 2. Re: CSS Horizontal Menu Functionality
            nancyp53 Level 1

            Thanks for answering so fast!

             

            The development on this site is just starting, so not that much is "live" yet. I did upload the Home page, and I made a copy of it renamed as "products.htm" for the purposes of preliminary testing. They're just alike at this point except for the title of the page in the title bar.

             

            http://www.clearwaterrecreation.com/test2/index.html

             

            Thanks very much!

            • 3. Re: CSS Horizontal Menu Functionality
              martcol Level 4
              .stdstyle #navbar {
              background-image:url("_images/navbarbg.gif");
              border:0 none;
              height:30px;
              left:20px;
              line-height:26px;
              position:absolute;
              top:180px;
              width:800px;
              z-index:999;
              }

              I think that will solve your immediate problem.

              Your site is a very straight-forward structure that could be quite easily achieved without the use of all that position: absolute.

              Martin
              • 4. Re: CSS Horizontal Menu Functionality
                nancyp53 Level 1

                Thanks for the feedback. The addition of the z-index, unfortunately, did not fully solve my problem, but I did think it was a good idea. I can now link to another page in Firefox, IE7, Opera, or Chrome. However, the text of the links now shifts around in ALL the browsers when the mouse passes over them (and no, I didn't design the hover to do that intentionally). Could it be solved if there was more explicit code regarding the padding or width around each hyperlink? I tried a couple of solutions, but to no avail. Still stumped.

                 

                I do know that I've got lots of absolute positioning, and that's deliberate. Nothing annoys me more than content that shifts around when a window is re-sized, and I prefer to control that behavior myself, even though I realize that that may create some accessibility issues for some users. It's the same reason I use pixels not ems for sizes. Not a retort, just my opinion. I'm both a graphic designer and programmer, and that's my graphic design side talking.

                 

                Your willingness to help is very much appreciated. I'll keep trying alternatives.

                • 5. Re: CSS Horizontal Menu Functionality
                  martcol Level 4
                  #navbar  a:hover {
                  color:#B6B8D5;
                  font-family:"comic  sans MS","comic sans",trebuchet,arial,sans-serif;
                  padding:0;
                  text-align:center;
                  text-decoration:none;
                  }


                  I think that might be causing your text to move.


                  With regards using AP divs, if you went for a fix-width centered layout, there's no reason why the content should move around.  But hey, ho, it's your choice.

                  Martin
                  • 6. Re: CSS Horizontal Menu Functionality
                    Nancy OShea Adobe Community Professional & MVP

                    Why are you using all those span tags?  You don't need them.  And you cannot use an ID name more than one time per page.

                     

                    So where you have this:

                     

                    <div id="navbar"><ul>
                    <li><a  href="index.html"><span  id="nav">Home</span></a></li>
                    <li><a  href="products.htm"><span id="nav">Playground  Products</span></a></li>
                    <li><a  href="gallery.htm"><span  id="nav">Gallery</span></a></li>
                    <li><a  href="about.htm"><span id="nav">About Us/Contact  Us</span></a></li></ul>
                    </div>

                     

                    This is better:

                     

                    <div id="navbar">

                    <ul id="nav">
                    <li><a  href="index.html">Home</a></li>
                    <li><a  href="products.htm">Playground  Products</a></li>
                    <li><a  href="gallery.htm">Gallery</a></li>
                    <li><a  href="about.htm">About Us/Contact  Us</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

                    • 7. Re: CSS Horizontal Menu Functionality
                      nancyp53 Level 1

                      Martcol, I did not realize there was a difference from setting padding at "0" and setting it at "0px", so I gave your suggestion a try. But there was no change in functionality.

                       

                      Nancy, I was not complete in showing the code above. The span tags are because the links are not all the same color text. Two are red, two are blue, and one is green. I should not have taken a shortcut in displaying that code in my post. It really reads,

                       

                      <div id="navbar"><ul>
                      <li><a href="index.html"><span id="navred"><center>Home</center></span></a></li>
                      <li><a href="products.htm"><span id="navnavy"><center>Playground Products</center></span></a></li>
                      <li><a href="seating.htm"><span id="navgreen"><center>Seating Products</center></span></a></li>
                      <li><a href="gallery.htm"><span id="navred"><center>Gallery</center></span></a></li>
                      <li><a href="about.htm"><span id="navnavy"><center>About Us/Contact Us</center></span></a></li></ul>
                      </div>

                       

                      So, the id="nav" is really either "navred", "navnavy", or "navgreen".

                       

                      I understand your example, and it is undoubtedly neater and cleaner, but can I still use it for my different colors? I'm not so sure. Maybe I should go back to using classes instead?

                       

                      I should perhaps mention that most of my experience with CSS has been using "classes" rather than "id", and you're right to remind me that I cannot use an ID name more than one time per page; I did read that in a tutorial but failed to catch it as incorrect in my code. And if I want to use the red text twice and the navy text twice, I guess I really do need to go back to classes, right?

                       

                      Back to the drawing board. Thanks for the hints -- it keeps me on my toes!

                      • 8. Re: CSS Horizontal Menu Functionality
                        Nancy OShea Adobe Community Professional & MVP
                        And if I want to use the red text twice and the navy text twice, I guess I really do need to go back to classes, right?

                         

                        Yup.

                         

                         

                        padding:0

                         

                        is exactly the same as

                         

                        padding:0px;

                        padding:0pt;

                        padding:0em;

                        padding:0%;

                        padding:none;

                         

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

                        • 9. Re: CSS Horizontal Menu Functionality
                          nancyp53 Level 1

                          Thanks to all who contributed. I did indeed get the menu to "calm down" and stop with the text of the menu bar from constantly twitching, and to do so with the color choices I wanted for the text. Changing from using the id to using the class seemed to make all the difference.

                           

                          On to other challenges, but again, thank you.