10 Replies Latest reply on May 13, 2010 12:12 PM by Karlhevera

    Width of a top horizontal menu

    Karlhevera Level 1

      How can I ensure that a horizontal menu displays properly in different width monitors?  The P7 Menu Magic has a width declaration in pxs.  Should this be a percentage of the width, to ensure proper display?

        • 1. Re: Width of a top horizontal menu
          Zabeth69 Level 5

          Don't know much about P7, but you are right on the money when you suspect a width in pixels of not expanding. Yes, a percentage width should slam the size out to the designated percentage of the width of the enclosing element.


          Keep in mind that monitors run from the minuscule to the truly majuscule when you do this. My preference would be for a central div that may rely on the width or a percentage of the width of the monitor, but a menu within that, just to rein it in a little bit.



          1 person found this helpful
          • 2. Re: Width of a top horizontal menu
            Karlhevera Level 1

            Many thanks.  If you have a look at the source at www.portobelloroad.org.uk, you will see that I have enclosed the P7 menu in a  div, class="main_menu", where the width=100%, height=10% and top=16.25%.   It all looks OK on a HP laptop, even Acer 10" notebook and the new Apple wide screen iMac.  But saw it the other day on another HP monitor, where the menu wrapped to a next line.  I just wonder whether there is another way to ensure a proper expansion to any width.

            • 3. Re: Width of a top horizontal menu
              Zabeth69 Level 5

              In order to keep the menubar all on one row, or at least the list items all on one row, you need to limit the width of each list item (top menus) so they don't add to more than 100% of the width.


              If your menu text items are all roughly the same length, or escapement, you can arbitrarily divide 100% by the number of items and, rounding down, make the list-item width a percentage of the total width. Remember not to add to more than 100%...adding to 98% usually works, unless you're using borders...you have to fiddle a little.


              If your menu text items are noticeably different lengths, do a quick calculation on each item's percentage of the total length of all items (run together), and assign individual widths to individual list items. That may be done in CSS.


              To effect that quick calculation, I turn on a small dimension overlay grid, and type in all the list items on one line. If all of them run together measure, say, 10 squares, then 10 squares = 100%. "Home" might measure 1.5 squares, or 15% width, etc.


              In my experience, the added left- and right-padding in list items sometimes artificially constrains, so you might turn the padding into percentages, too. They are there primarily to keep the menu text from jamming into the sides of the menu block, so it doesn't take much to cure it.


              If you still have menu-items that just beg to be put on two lines ("Production Specifications", for instance), you can work out a class with a line-height for the list item that can go for a single-row list item (for example, 30px) and another class to be applied to double-row list items (for example, 15px). Apply that to the "a" link in the menu item through CSS.


              This theory should help you decide how to move next.



              • 4. Re: Width of a top horizontal menu
                ALsp Adobe Community Professional

                Firstly, your page has multiple markup errors:



                Beyond the entity errors, the actual markup errors should be fixed.


                As for the menu, using percentage widths that are not even divisible by 100 is going to be problematic becuse of the way browsers round mathematically. It's a bad approach.


                Additionally, you are using a version of Pop Menu Magic that was upgraded 2 years ago. The upgraded version has CSS hooks enabling you to set widths independently for each root menu item, which would allow you to more easily ensure that your root menu widths, in the aggregate, add up to precisely 100%. You can do that with PMM 1 by adding IDs to each root <a> element and then creating a CSS rule for each. Assign widths on each rule so that the total is exactly 100%.


                We do not frequent this online forum so if you have further questions and would like relevant answers it might be best to use your free support options and email us or telephone us. Support is free.



                Al Sparber - PVII
                Dreamweaver Menus | Galleries | Widgets
                Making Dreamweaver Magic since 1998

                1 person found this helpful
                • 5. Re: Width of a top horizontal menu
                  Karlhevera Level 1

                  Many thanks.  I would have imagined that P7 would have alerted me of upgrades...  I have version 1.0.4, should I upgrade to PMM2?  If not, any suggesitons, please.

                  • 6. Re: Width of a top horizontal menu
                    Karlhevera Level 1

                    Many thanks.  As you will see from the next post, I have an old version.  Have asked P7 which version to upgrade.  This should solve the problem.

                    • 7. Re: Width of a top horizontal menu
                      Karlhevera Level 1



                      Had a look at all the errors. They are listed for code which was inserted automatically by CS4, when I added behaviours to hotspots on the index page.

                      Validation in DW CS4 shows OK for XHTML 1.0 strict.  Not quite sure what I should do to the auto inserted code.

                      • 8. Re: Width of a top horizontal menu
                        Zabeth69 Level 5

                        In my opinion, unless you absolutely NEED to validate to "Strict," for instance if you are working on government websites, I would use a Transitional doctype, which is much more forgiving of the kinds of "errors" that can crop up. And then you don't need to 'worry' about the auto-inserted javascript, because it will probably not bother the validator.



                        • 9. Re: Width of a top horizontal menu
                          Karlhevera Level 1

                          Al sp said that the PMM has been upgraded.  So I bought the upgrade.  Have made a new menu.


                          My Q:  the original menu code was in a Library folder as  a Library item.  Whenever I amended the menu code, all the pages with the meny were automatically updated, as one would expect.


                          Now that I have a new code, can I put it in the Library folder and give it the  original menu file name?  Or, do I have to import this code snippet from the Library file into each page?

                          • 10. Re: Width of a top horizontal menu
                            Zabeth69 Level 5

                            Sorry, I have not a clue. Al Sparber also said that if you had questions about P7, you should go on their Forum to ask them.


                            I speculate that it should act similarly to the original product. But I have not worked through the exercise of substituting Library items with new code with the same name. You'd like to think it were that easy!