22 Replies Latest reply: May 3, 2012 11:53 AM by owenpga RSS

    trying to center spry menu bar

    owenpga Community Member

      Hello,

      I just tried to use the info below to center my spry menu bar after widening the web page.

      It doesn't seem to make any changes when i enter change the code.

      www.owendawsonpga.com

      If anyone has suggestions on what i need to do differently please feel free to comment.

      Thank you.
      Owen

       

      Editing the style sheet

      The style rule that controls the position of a horizontal Spry Menu Bar is the first one in the style sheet. It looks like this:

      ul.MenuBarHorizontal { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: auto; }

      Notice that the margin property is set to 0. That zeroes the margin on all four sides. To centre the menu, change the margin property like this:

      margin: 0 auto;

      On its own, that won't centre the menu, because the width property is set to auto. You need to change auto to the actual width of your menu bar. By default, a Spry Menu Bar contains four top-level items, and sets their width (in the ul.MenuBarHorizontal li style rule) to 8em.

      So, to centre a default Spry Menu Bar, you need to change the width property in the ul.MenuBarHorizontal style rule to 32em. With both changes, the style rule looks like this:

      ul.MenuBarHorizontal { margin: 0 auto; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 32em; /* Change to the width of your own menu bar */ }

        • 1. Re: trying to center spry menu bar
          hans-g. MVP

          Hi Owen,

           

          sorry, had been too fast, 'cause David's hints are working like a charm, have to look further and deeper.

           

          Hans-Günter

          • 2. Re: trying to center spry menu bar
            Ken Binney MVP

            owenpga wrote:

             

            With both changes, the style rule looks like this:

            ul.MenuBarHorizontal { margin: 0 auto; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 32em; /* Change to the width of your own menu bar */ }

             

            The rule on your posted link does not appear to contain the revised rule...

            have you not uploaded it?

             

            FROM YOUR SERVER CSS

             

            ul.MenuBarHorizontal

            {

            padding: 0;

            list-style-type: none;

            font-size: 100%;

            cursor: default;

            width: auto;

            text-align: left;

            background-position: center;

            margin-top: 0;

            margin-right: auto;

            margin-bottom: 0;

            margin-left: auto;

            }

             

             

            Replace with this rule

            /* The outermost container of the Menu Bar, an auto width box with no margin or padding */

            ul.MenuBarHorizontal

            {

                padding: 0;

                list-style-type: none;

                font-size: 100%;

                cursor: default;

                width: 49em;

                text-align: left;

                background-position: center;

                margin: 0 auto;}

             

             

            owen.jpg

             

             

            HTH

            • 3. Re: trying to center spry menu bar
              hans-g. MVP

              Hi Owen,

               

              as a first step I used David's hint about the width and put it into your source code like this:

               

              ul.MenuBarHorizontal

              {

              margin: 0 auto;

              padding: 0;

              list-style-type: none;

              font-size: 100%;

              cursor: default;

              /* width: auto;*/

              width: 32em;

              text-align: left;

              background-position: center;

              }

               

              and I got this:

               

              drSpryZ1.jpg

               

              what means you/I haveonly to "Adjusting the menu item widths", what is described here: http://foundationphp.com/tutorials/sprymenu/customize3.php#widths.

               

              Good luck!

              Hans-Günter.

               

              P.S.

              The first time I used your source code in my DW I got this message:

               

              drSpry116.jpg

               

              Please have a look to it there.

              • 4. Re: trying to center spry menu bar
                hans-g. MVP

                Hi Owen,

                 

                at the end I got this:

                 

                drSpryZ2.jpg

                 

                and therefore I wrote in your SpryMenuBarHorizontal.css:

                 

                ul.MenuBarHorizontal
                {
                margin: 0 auto;
                padding: 0;
                list-style-type: none;
                font-size: 100%;
                cursor: default;
                width: 860px;
                text-align: left;
                background-position: center;
                }

                and

                 

                ul.MenuBarHorizontal ul
                {
                margin: 0;
                padding: 0;
                list-style-type: none;
                font-size: 100%;
                z-index: 1020;
                cursor: default;
                width: 10.7em;
                position: absolute;
                left: -1000em;
                background-position: center;
                }

                 

                Hans-Günter

                • 5. Re: trying to center spry menu bar
                  owenpga Community Member

                  Sorry for being so late getting back to you.

                   

                  I’ve been busy with other teaching stuff.

                   

                  I think im getting closer.

                  the menue is just a bit off of center but certainly much better than before.

                  how can i fine tune it so its perfect?

                  thank you all for helping with this issue.

                   

                   

                   

                  Thanks for your time,

                   

                  Owen

                   

                  www.owendawsonpga.com

                  • 6. Re: trying to center spry menu bar
                    Ken Binney MVP

                    Hi Owen -

                     

                    We can improve your centering even further.than with just the CSS code I provided

                    You have used the HTML code in your page to alter the display size of the images on your page.

                     

                    No need to change the image, but In the HTML code, on your pages, change the size of your banner to match the actual size of your image.

                     

                    Change this -

                    <h1 align="center">

                    <img src="photos/pgabanner_w_phonenumber.png" alt="Owen Dawson PGA Instruction" width="773" height="220" /></h1>

                     

                    To this -

                     

                    <h1 align="center">

                    <img src="photos/pgabanner_w_phonenumber.png" alt="Owen Dawson PGA Instruction" width="812" height="232" /></h1>

                     

                    Unrelated to your centering problem, you again disregarded the actual image size on your "Book a Lesson" JPG image. I am posting a drastically reduced sized image which I converted to a GIF  image with a transparent background (to hide the white canvas) and a slightly different shadow. See if you like it better when you insert it at its actual size of 138x117 rather than using HTML code to constrain the original 500x427 image. This will also speed up the download time of your page.

                    certifiedinstructorslogo138x118.gif

                     

                    If you can't save the image from this Forum, please let me know, and I'll email it to you.

                    Welcom home pal.

                    • 7. Re: trying to center spry menu bar
                      hans-g. MVP

                      Hi Owen,

                       

                      in addition to Ken's idea about the image size now (see my message below), seriously, you could feel satisfied for the moment (I can imagine that you prefer "hio" for that matter) as well with your solution as our proposals to your ul.MenuBarHorizontal ...

                       

                      Now you could take your time experimenting with the different dimensions and sizes (px, em, % aso.) AFTER you have performed your most important technical tasks at your web presence.

                       

                      Naturally, no offence and good luck!

                      Hans-Günter

                       

                      Message modified by hans-g.

                      • 8. Re: trying to center spry menu bar
                        hans-g. MVP

                        Hhm,

                         

                        the note before mine dissapeared, or?

                         

                        Hans-Günter

                        • 9. Re: trying to center spry menu bar
                          Ken Binney MVP

                          Yes Hans... it sure did disappear -

                           

                          I'll add it again here.

                           

                          Hi Owen -

                           

                          We can improve your centering even further.than with just the CSS code I provided

                          You have used the HTML code in your page to alter the display size of the images on your page.

                           

                          No need to change the image, but In the HTML code, on your pages, change the size of your banner to match the actual size of your image.

                           

                          Change this -

                          <h1 align="center">

                          <img src="photos/pgabanner_w_phonenumber.png" alt="Owen Dawson PGA Instruction" width="773" height="220" /></h1>

                           

                          To this -

                           

                          <h1 align="center">

                          <img src="photos/pgabanner_w_phonenumber.png" alt="Owen Dawson PGA Instruction" width="812" height="232" /></h1>

                           

                          Unrelated to your centering problem, you again disregarded the actual image size on your "Book a Lesson" JPG image. I am posting a drastically reduced sized image which I converted to a GIF  image with a transparent background (to hide the white canvas) and a slightly different shadow. See if you like it better when you insert it at its actual size of 138x117 rather than using HTML code to constrain the original 500x427 image. This will also speed up the download time of your page.

                           

                          certifiedinstructorslogo138x118.gif

                           

                          Let;s see if this one stays

                          • 10. Re: trying to center spry menu bar
                            hans-g. MVP

                            OT:

                            Hi Ken, only to satisfy my curiosity: Chris Cox = Ken Binney?

                             

                            Hans-Günter

                            • 11. Re: trying to center spry menu bar
                              ALsp Community Member

                              Actually, centering a Spry menu is easy, once you fix the flaws in the default CSS:

                               

                              http://www.projectseven.com/testing/spry/center-menu/

                               

                               

                              --
                              Al Sparber - PVII
                              http://www.projectseven.com
                              The Finest Dreamweaver Menus | Galleries | Widgets
                              Since 1998

                              • 12. Re: trying to center spry menu bar
                                Ken Binney MVP

                                Nein, neither one of us wants to be mistaken for the other *grin*

                                • 13. Re: trying to center spry menu bar
                                  hans-g. MVP

                                  OT: I know there is therefore nothing more important than this!

                                   

                                  Hi Ken,

                                   

                                  only to show you that your sentences came to me from a Mr. Chris Cox:

                                   

                                  Header 1Header 2
                                  drCox01.jpgdrCox02.jpg

                                   

                                  BUT, maybe there is a mistake at Adobe's Forum Software, and it could be important to look after it, perhaps.

                                   

                                  Hans-Günter

                                  • 14. Re: trying to center spry menu bar
                                    owenpga Community Member

                                    Ken,

                                    Any thoughts on how to get my Book a lesson button on home page to match my content color.  www.owendawsonpga.com

                                    i created the button in dreamweaver and used the same color code from DW.

                                    It's pretty close but just off.

                                    I'm running the button through save for web to export.

                                    i'm guessing my profile settings are wrong on the export.

                                    any thoughts.

                                    thanks,

                                    owen

                                    • 15. Re: trying to center spry menu bar
                                      Ken Binney MVP

                                      Try this transparent background GIF with shadow

                                      BAL_BUTTON.gif

                                      • 16. Re: trying to center spry menu bar
                                        owenpga Community Member

                                        Ken,

                                        Thanks for taking the time to do this.

                                        Looks great.

                                         

                                        So I have another question....

                                        I'll post a screen shot when it happens again, but right now i have it working so i'm not going to mess with things.

                                        When i'm doing an edit on the template page IE Adding a new link to the right column "swing drills" or editing the spry menu at top. Sometimes the entire sprymenu will disapear and all the links will left justify and be stacked I believe the links are still there but the structure of the menu is gone. It happends after i save it to preview, so i cant hit the back button to get it to original look. For now i just take my back up files and swap them out and everything is back to normal. Its just a pain when it happens as i have no idea what is causing it.

                                        Have a  great day.

                                        Owen

                                        • 17. Re: trying to center spry menu bar
                                          Ken Binney MVP

                                          owenpga wrote:

                                          but right now i have it working so i'm not going to mess with things.

                                          I feel your frustration... I ran into exactly the same phenomenon on www.peattiecapital.com/

                                          and I'm still afraid to touch it *LOL*  Sometimes it would happen, sometimes not, It seemed to

                                          depend on which sequence of links I tested.

                                          • 18. Re: trying to center spry menu bar
                                            Nancy O. MVP

                                            PROBLEM:  Spry widget code contains various browser hacks which DW's Design View doesn't know how to translate -- it gets confused.

                                             

                                            WORK AROUND:  When editing Spry Menus (or any widget for that matter), turn off CSS rendering in DW. 

                                            View > Style Rendering > un-tick Display Styles.

                                             

                                            You'll see an unstyled HTML page which is usually easier to edit.  Also, this won't effect Styles in Live View or Preview.

                                             

                                            Hope this helps,

                                            Nancy O.

                                            • 19. Re: trying to center spry menu bar
                                              owenpga Community Member

                                              Ken,

                                              Hope all is well.

                                              I'm trying to copy the code for spry 2.0 upgrade into my template page, but not having much success.

                                              I can get the code under the banner but it shifts left with bullets.

                                              Apparently the new 2.0 version fixes my issue with touch screens working  properly IE iphone, ipads etc.

                                              i've downloaded the widget with all the folders and files and they are in my website folder.

                                              I'd be more than willing to pay you for your services if you know how to get this thing working.

                                              I'm not sure how to send you the template page so you can look at it.

                                              When you have some time, let me  know what you think. Owen

                                               

                                               

                                              i've used the steps below to the best of my ability to copy the code. im using dwcs3.

                                               

                                               

                                              Picture 1.png

                                              • 20. Re: trying to center spry menu bar
                                                owenpga Community Member

                                                thank you.

                                                • 21. Re: trying to center spry menu bar
                                                  Ken Binney MVP

                                                  Not my strong suit Owen.

                                                  Please make a new post, with an appropriate Subject line, and include a link to a problem page online.

                                                  • 22. Re: trying to center spry menu bar
                                                    owenpga Community Member

                                                    thanks Ken