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

Horizontal menubar fixed width.

Jun 6, 2012 8:54 PM

Hello I have a webpage with a width of 960 px.

 

I have a menu of 7 items with the contents set to auto so each element is a different width according to the text within.

 

It is in a <div> container of the same width.

 

Is there any way to make the menubar fill out to the full width pf the page.

 

I have tried altering the width tags in both the ul.MenBarHorizontal and ul.MenuBarHorizontal li tage to no avial.

 

Leaving it a bit off center is not too bad but causes rendering problems in Firefox and of course IE.

 

Any help is greatly appreciated.

 

Mac OSX 10.6.8, DW 6.

 

Thanks.

911 Views   9 Replies   Latest reply: Ben Pleysier, Jun 9, 2012 6:33 PM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Jun 6, 2012 11:49 PM   in reply to Glipt
    Report

    ul.MenuBarHorizontal a change the padding.

     

    Gramps

     
    |
    Mark as:
  • Glipt
    Currently Being Moderated
    2. Glipt,
    Jun 7, 2012 3:14 PM   in reply to Ben Pleysier
    Report

    Thanks for your reply.  I tried changing the padding and got quite close to filling uot the 960 pixels.  However, each browser rendered the space to the right differently.  In the end I just left it off center to the left, deleted the height value for my menubar div tag and floated it to the left.  That fixed the render bug in the other browsers.

     

    I have noticed some other sites with variable box widths do this as well.

     

    I'm guessing the only way to do this would be to manually set the width for each cell so that they would add up to 960 including all paddings and margins.  Would I have to difine a new rule for each box?  Is this possible?

     

    Thanks for any help.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    3. Ben Pleysier,
    Jun 7, 2012 3:44 PM   in reply to Glipt
    Report

    Inline styles are probably the way to go as in

    <li style="width: 250px;"><a class="MenuBarItemSubmenu" href="#">Item 1</a>

    Gramps

     
    |
    Mark as:
  • Glipt
    Currently Being Moderated
    4. Glipt,
    Jun 7, 2012 3:49 PM   in reply to Ben Pleysier
    Report

    Thanks!  I was just checking that out.

     
    |
    Mark as:
  • Glipt
    Currently Being Moderated
    5. Glipt,
    Jun 7, 2012 7:32 PM   in reply to Glipt
    Report

    Yup.  That worked!  Thanks for your direction.  Used the ul MenBarHorizontal a css to put a border for top left and bottom and included another inline right border on the last box to complete the look.

     

    I'm surprised there is not an easier way to do this.

     
    |
    Mark as:
  • Glipt
    Currently Being Moderated
    6. Glipt,
    Jun 8, 2012 12:36 PM   in reply to Glipt
    Report

    Is this a case where inline styles are nessesary?

     

    Is it possible to write these into the external style sheet somehow?

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    7. Ben Pleysier,
    Jun 8, 2012 5:22 PM   in reply to Glipt
    Report

    Yes, it is possible to place the info in an external style sheet. Simply give the menu item (<li>) a unique CLASS (or ID) and apply the rules to that class as in

    <li class="home"><a href="#">Home</a></li>

    The style sheet:

    ul.MenuBarHorizontal li.home {

        width: 7.36em;

    }

    Gramps

     
    |
    Mark as:
  • Glipt
    Currently Being Moderated
    8. Glipt,
    Jun 8, 2012 8:22 PM   in reply to Ben Pleysier
    Report

    Thanks.  Worked great.  I was also able to use the class to change each submenu as well.

     

    I was unable to define ul.MenuBarHorizontal li.home as a valid class in DW.  I created a class Just called .home and DW accepted it but made a complete mess of the code.  Learned my lesson and did everthing in code.  Just learning all this and I find a lot of stuff easier to do in code than with DW tools.

     

    Just a few questions:

     

    Is ul.MenuBarHorizontal li.home an invalid class name that might cause problems when the site goes up?

    Should it just be .home?

    Should I avoid capitals and spaces for class names?

     

    Thanks for all your help.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    9. Ben Pleysier,
    Jun 9, 2012 6:33 PM   in reply to Glipt
    Report

    Is ul.MenuBarHorizontal li.home an invalid class name that might cause problems when the site goes up?

    The class name is home (used in the markup as class="home"), the selector is ul.MenuBarHorizontal li.home (used in the style sheet). The selector can take different levels of specificity such as  li.home or just .home

     

    Should it just be .home?

    See above

     

     

    Should I avoid capitals and spaces for class names?

     

    Basically, a name must begin with an underscore (_), a dash (-), or a letter(a–Z), followed by any number of dashes, underscores, letters, or numbers and the name must be at least 2 characters long; no spaces.

     

    Gramps,

    lost the first match against DK

     
    |
    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