Skip navigation
Currently Being Moderated

trying to center spry menu bar

Apr 5, 2012 4:58 AM

Tags: #spry_menubar

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 */ }

 
Replies
  • Currently Being Moderated
    Apr 5, 2012 5:13 AM   in reply to owenpga

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2012 8:13 AM   in reply to owenpga

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2012 8:02 AM   in reply to owenpga

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 5, 2012 9:14 AM   in reply to owenpga

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 11:19 AM   in reply to owenpga

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 11:50 AM   in reply to owenpga

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 11:47 AM   in reply to owenpga

    Hhm,

     

    the note before mine dissapeared, or?

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 11:55 AM   in reply to hans-g.

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 1:39 PM   in reply to Ken Binney

    OT:

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

     

    Hans-Günter

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 2:03 PM   in reply to owenpga

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 2:03 PM   in reply to hans-g.

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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 9, 2012 2:39 PM   in reply to Ken Binney

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 18, 2012 10:45 AM   in reply to owenpga

    Try this transparent background GIF with shadow

    BAL_BUTTON.gif

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 6:19 AM   in reply to owenpga

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 20, 2012 2:53 PM   in reply to owenpga

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    May 3, 2012 11:17 AM   in reply to owenpga

    Not my strong suit Owen.

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

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points