I’m trying to set up a CSS menu, but I can’t get it to be the exact length of the page. I need the menu to be an exact measurement across the page.
If I keep adding to the em measurement (which I don;t understand) the menu eventually goes to two lines but still doesn’t go across the page. Obviously, I don;t want it two lines, but you see my point.
What’s preventing it from going all the way across the page?
'm trying to set up a CSS menu, but I can’t get it to be the exact length of the page. I need the menu to be an exact measurement across the page.
Basically, you cannot do it from the CSS Menu action. You have to setup a style manually that targets the menu, then using the extended option you can add (as an example, don’t use quotes) “width” in the name field, then either enter a specific pixel size in the value field or “100%” if you want the menu area to cover the full width of the page.
True, there isn’t an easy solution. What chuckamuck was pointing out (through the link-to-a-link-to-a-link ) is that you can style a CSS menu without the action. Meaning in your styles palette you create these “li” and “ul” styles to build on your own what the action does automatically. This would then allow you to set your own width’s and height’s to fit the menu across the board.
Now, “em’s” real quick are a measurement much like pixels. Depending on your browsers “base” font size (found in your preferences), which for the default settings for Firefox 3 is 16px, there’s an “em” equivalent. Much like you can tell someone what a measurement is in inches or you could tell them in feet or centimeters.
So, in the instance of 16px the “em” equivalent for displaying text at 12px would be - “0.75em.” Hopefully that makes sense. A cool dashboard widget I use to convert between the two is found here:
It’s under the last little button tab on the right. Set your browser’s base font and then input sizes and it converts them. Both from an em to px and px to em.
There is an easy solution. Draw an HTML item the length of the page
and make it the color you want the menus to be (or use the same
graphic in the background as you are in the menus) and then place your
menu inside of it either normally or in-flow. That’s it!
On 19 Aug 2008, at 05:22, Dan J wrote:
True, there isn’t an easy solution. What chuckamuck was pointing
out (through the link-to-a-link-to-a-link ) is that you can style
a CSS menu without the action. Meaning in your styles palette you
create these “li” and “ul” styles to build on your own what the
action does automatically. This would then allow you to set your
own width’s and height’s to fit the menu across the board.
Now, “em’s” real quick are a measurement much like pixels.
Depending on your browsers “base” font size (found in your
preferences), which for the default settings for Firefox 3 is 16px,
there’s an “em” equivalent. Much like you can tell someone what a
measurement is in inches or you could tell them in feet or
centimeters.
So, in the instance of 16px the “em” equivalent for displaying text
at 12px would be - “0.75em.” Hopefully that makes sense. A cool
dashboard widget I use to convert between the two is found here:
It’s under the last little button tab on the right. Set your
browser’s base font and then input sizes and it converts them. Both
from an em to px and px to em.
Joe, that may be the solution I use depending on design requirements.
There are still a few things like where the dividers land that are a slight problem. The last divider won’t be at the end, it’s just at the end of the “imaginary” box that’s made by the action.
Dan, thanks for the EM explanation. We use ems in print design for certain things, but I thought it an odd measurement to use for something that needs precision.
Still can’t figure out why it just doesn’t stretch across the page but “folds over” on to two lines at a certain point.
Well, it’s the entire menu bar that breaks. No matter how far off the page I extend the original box the list is in, then menu bar goes to two lines after 15 ems.
The whole action seems like it’s not finished yet. It’s great and you can get it up very fast, but doesn’t give a non-coder a lot of options for being specific.
I put together a simple menu sample file for you. The important part is the #MENUBOX style I setup to target the menu item which forces full width across browser, but it is very important that the menubox item does not have a fixed width set in the inspector pallet. The #fwNav1 style targets the text within the menu to get it to center align. FYI fwNav1 is the name generated by the CSS Menu action.
) is that you can style a CSS menu without the action. Meaning in your styles palette you create these “li” and “ul” styles to build on your own what the action does automatically. This would then allow you to set your own width’s and height’s to fit the menu across the board.
