Skip navigation
NeoGen Hawk
NeoGen Hawk
Currently Being Moderated

How to set a spry menu to 100% of screen size

Aug 7, 2012 1:49 PM

Hi all,

 

How do I get a spry menu to fit to the container size? I have the container set up like this:

 

}

.container {

          width: 80%;

          max-width: 1260px;

          min-width: 780px;

          background: #FFE9F0;

          margin: 0 auto;

}

 

And I want the spry menu to act as a border between the header and container, ive tried setting various parts to 80% as in the container but none seem to change the menu?

 

Many thanks

 

 

 

Nick

763 Views   3 Replies   Latest reply: Zabeth69, Aug 7, 2012 2:52 PM
 
Replies
  • Zabeth69
    Currently Being Moderated
    1. Zabeth69,
    Aug 7, 2012 2:30 PM   in reply to NeoGen Hawk
    Report

    You will find several difficulties trying to set the menu up this way, none of them dreadful, luckily!

     

    First off, set up a div for the Spry menu. Make sure it wraps around the entire ul.MenuBar etc. unordered list. Do not assign the class to the MenuBar itself.

     

    Then set the class for the menu div to the .container class you have already set up, as <div class="container">. This will give the same outside dimensions as the principal container.

     

    If you have a border around the principal container, give the menubar container div the same border width.

     

    This should make the spry menu "as a border between the header and container" to be the same width as that container.

     

    What do you want the menubar to look like? That is, presently the menu items will be a set size (I think they come in at 8.2em), and if you want them to stretch the width of the menubar container, you will need to use percentages for the main menu items' widths.

     

    Ask if you want details on how to do that, or let me know what it is you are aiming for.

     

    Beth

     
    |
    Mark as:
  • NeoGen Hawk
    Currently Being Moderated
    2. NeoGen Hawk,
    Aug 7, 2012 2:38 PM   in reply to NeoGen Hawk
    Report

    Figured it out, I needed to set the width to 100% in the ul.MenuBarHorizontal and then depending on how many menu items I had set the width to a % in the ul.MenuBarHorizontal li eg if I have 4 menu items I set the width to 25%

     
    |
    Mark as:
  • Zabeth69
    Currently Being Moderated
    3. Zabeth69,
    Aug 7, 2012 2:52 PM   in reply to NeoGen Hawk
    Report

    Good work.

     

    If you ever find you need to fit menu items of wildly different lengths into a menu, you can also use a percentage system, you will just need to give each menu item an ID and give each one a different percentage width in the CSS. It actually works pretty well. Just be careful on the submenus, if you use them. They don't always work well with percentages, so I typically use an actual width for submenus.

     

    Beth

     
    |
    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