Skip navigation
mayramoca
mayramoca Calculating status...
Currently Being Moderated

Spry Horizontal Menu Bar

May 1, 2012 4:59 PM

I understand the CSS and how to use this horizontal Menu.  I cant get it to automatically expand to a specifi width or just the space dedicated to it.  I have to se the li to width:auto as I have some name that are long and others that are short.  Is there a way to do this I have tried for hours.

1099 Views   9 Replies   Latest reply: Ben Pleysier, May 9, 2012 10:08 AM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    May 1, 2012 6:34 PM   in reply to mayramoca
    Report

    See here http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHoriz ontalMenuBarSample.html

     

    Special Note:

    The article should have added !important to the following

    ul.MenuBarHorizontal ul li {

    display: block;

    float: none !important;

    width: auto;

    white-space: nowrap;

    border-bottom: solid 1px #EEE;

    }

    This is to ensure that the JS does not overwrite the value.

     

    Gramps

     
    |
    Mark as:
  • mayramoca
    Currently Being Moderated
    2. mayramoca,
    May 4, 2012 7:01 AM   in reply to Ben Pleysier
    Report

    Thank You for your response.  Yes those fixes adjust the size of each menu tab proportionally to the information in them.  But How do I adjust the whole of the nav to a specific width so that it streches and there is no space hanging .  That space looks differenet in every browser and it does not look good visually.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    3. Ben Pleysier,
    May 4, 2012 7:13 AM   in reply to mayramoca
    Report

    Please supply a link to your site

     

    Gramps

     
    |
    Mark as:
  • mayramoca
    Currently Being Moderated
    4. mayramoca,
    May 4, 2012 5:08 PM   in reply to Ben Pleysier
    Report

    www.wesleytree.com

     

    can I strecth the nav to it max width automatically,  it is either almost right on some browser and falls short in others. 

     

    Right now it would be a strech of a total of 1000 px

     

    thanks

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    5. Ben Pleysier,
    May 4, 2012 5:41 PM   in reply to mayramoca
    Report

    The best way to increase/decrease the widths of the menu items is to play with the left and right padding in ul.MenuBarHorizontal a

     

    The differences in browsers is very hard to work with. You could try to use a CSS-reset as in http://meyerweb.com/eric/tools/css/reset/ but even that is not browser-proof.

     

    The biggest difference will be in IE in which case you could use conditional values (<!--[if lt IE 10]>) or use the HTML5 boilerplate http://html5boilerplate.com/

     

    Gramps

     
    |
    Mark as:
  • Al Sparber
    Currently Being Moderated
    6. Al Sparber,
    May 4, 2012 6:21 PM   in reply to mayramoca
    Report

    When it is necessary to fit a horizontal CSS menu into a tight container and the number and length of menu items is such that you cannot provide a generous buffer, your options are confined to:

     

    1. Set the width explicitly for each menu item, factoring in box-model properties so that the aggregate is precisely the width of your container

    2. Use images for the root items

     

    The problem with #1 is that there is no way to guarantee that all browsers (or users) are going to be rendering the font the same size your device is. The chances of the menu breaking to 2 lines are very strong. Working with the pre-release version of Spry does not make things any easier, either.

     

    --

    Al Sparber - PVII

    http://www.projectseven.com

    The Finest Dreamweaver Menus | Galleries | Widgets

    Since 1998

     
    |
    Mark as:
  • mayramoca
    Currently Being Moderated
    7. mayramoca,
    May 9, 2012 6:59 AM   in reply to mayramoca
    Report

    Hi Altruistic Gramps,

     

    in www.wesleytree.com do you know if I could at least center the whole nav in a space I have tried this link below but it does not center???

     

    http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHoriz ontalMenuBarSample.html

     

    Thanks

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    8. Ben Pleysier,
    May 9, 2012 8:34 AM   in reply to mayramoca
    Report

    Because the width of the menubar is fixed to the width of the container, it is already centered.

     

    The solution is

    1. change the width of the menubar to be equal to the width required by all of the menu items, or

    2. change the width of the menubar to auto and apply  left and or right padding (e.g. ul.MenuBarHorizontal {padding: 0 35px; width:auto;})

     

    Gramps

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    9. Ben Pleysier,
    May 9, 2012 10:08 AM   in reply to Ben Pleysier
    Report

    You might like to have a look here http://pleysier.com.au/sprymenubar_images/

     

    The stylesheet is here http://pleysier.com.au/sprymenubar_images/styles.css

     

    Gramps

     
    |
    Mark as:
Actions

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