need to make horizontal spry menu fill div width
by scott estes
on
Jul 1, 2009 at 6:43:29 pm
I am trying to make a horizontal spry menu (CS4) fill the entire width of a div centered on a page. Through various changes to the "ul.MenuBarHorizontal a" style (padding, text size ect...) I have been unable to make it fit the exact width of the div. I do not want fixed width links as the character count within the links varies too much for this. Any standard way to do this? An alternative would be to fill in the end of the menu bar with a "blank" which I have tried but because the graphic buttons I have placed in the menu links are, I guess, proportioned to fill the auto height of the "ul.MenuBarHorizontal a" and "ul.MenuBarHorizontal a:hover" styles, the "blank" I insert into the "ul.MenuBarHorizontal" style background is not proportioned the same and therefore looks different. Anyway to get it to proportion the same as the "a" and "a:hover" images. Sorry about the long-winded question, either making the menu fill the width, or making a "blank" would suffice. Thanks in advance.
What I am trying to do is fill in the entire width of the container with the menu bar. I have somewhat accomplished this by adding a spacer piece to the "ul.MenuBarHorizontal a" style and adding the background link graphic to the "ul.MenuBarHorizontal" style. A problem I am currently having is that the "spacer" piece is an active link because it is part of the "ul.MenuBarHorizontal a" style, it should not be seen as a hover link.
In summary I was hoping to find an simpler way to make the spry menu fill the width of the container div (much like the creative cow link bar) with variable width links, or at least eliminate the "spacer" being seen as an active link.
Thank you for your help, As you may have guessed I am fairly new to Dreamweaver CS4 and HTML in general so any advise or info links you may offer is greatly appreciated.
Re: need to make horizontal spry menu fill div width by Fernando Mol on Jul 7, 2009 at 6:13:16 am
Well, the COW bar is not a Dreamweaver spry menu, so the CSS follow different rules here (that's my guess by seen the code here).
For me what has always worked is: doing some math.
>Get your main container width.
>Add a div for your menu (or use the ul of your spry menu) and place a background image to be repeated or stretched to the full width of your container.
>Populate your menu.
>Choose the font for your menu.
>Add some padding and margin until it fits, this is kind of try and error. Add a background for the hover state and maybe a background vertical line for every <li> tag, no repeat and left or right aligned for separation.
>USE ALWAYS PIXELS in all of your measures.
I like centered menus, to do this I create a div for the menu bar and then I give a fixed width to the list, try and error to get it right, and center it.
As you can see, I don't use spry menu. I avoid them if I can for accessibility reasons. But sometimes you just have to use them. No problem, use the same principles.
