CSS Menu: What's the trick to getting it right?

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?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

'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.

Maybe this thread will help: http://www.freewaytalk.net/thread/view/37400#m_37429


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow! Don’t see an easy solution in there.

All I want to do is make the menu bar the length I want. That em measurement is a little odd.

It seems the process needs some exact refinements, yet doesn’t seem to offer any.

Well, I hope there will be an easy solution in the future, because I’m going to need that type of menu.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

True, there isn’t an easy solution. What chuckamuck was pointing out (through the link-to-a-link-to-a-link :slight_smile: ) 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.

Here’s 2 examples from Big Erns:

http://www.thebigerns.com/freeway/rollnavbar/index.html

http://www.thebigerns.com/freeway/vertical_listnav/

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:

http://www.apple.com/downloads/dashboard/calculate_convert/designerstoolbox.html

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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 :slight_smile: ) 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.

Here’s 2 examples from Big Erns:

http://www.thebigerns.com/freeway/rollnavbar/index.html

http://www.thebigerns.com/freeway/vertical_listnav/

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:

http://www.apple.com/downloads/dashboard/calculate_convert/designerstoolbox.html

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 19 Aug 2008, at 13:44, Robert Bovasso wrote:

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.

Isn’t that depending on the font-size you’re using?!

Too big font-size and your works won’t make it in one line.

Omar KN


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I noticed my menus look different in Safari than they do in Firefox (haven’t even gotten to Explorer yet!).

I’m assuming this is the em measurement that’s doing that.

Is there anyway to fix that in the Action? I don;t know how complicated it would be to fix that the coding…which would most likely be over my head!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 19 Aug 2008, at 15:28, Robert Bovasso wrote:

this is the em measurement that’s doing that

Can you try with px ?

OKN


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The Action doesn’t give that option.

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Robert,

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.

CSS MENU SAMPLE


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for taking the time to do this.

But…the link doesn;t work. I get Page Not Found.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 19 Aug 2008, 5:52 pm, Robert Bovasso wrote:

Thanks for taking the time to do this.

But…the link doesn;t work. I get Page Not Found.

Hmm…odd that. Let’s try that again.

CSS MENU SAMPLE


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 19 Aug 2008, 6:05 pm, chuckamuck wrote:

On 19 Aug 2008, 5:52 pm, Robert Bovasso wrote:

Thanks for taking the time to do this.

But…the link doesn;t work. I get Page Not Found.

Hmm…odd that. Let’s try that again.

Ok, strike two…

One more swing: <A Href="http://chucksdesigns.com/downloads/CSS_MENU_Site.zip>CSS MENU SAMPLE


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That one takes me to the main Freeway Talk page…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 19 Aug 2008, 6:11 pm, Robert Bovasso wrote:

That one takes me to the main Freeway Talk page…

Wow, Cassie strikes out… :frowning:

CSS MENU SAMPLE

Man, typos can kill!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

One more swing: <A
Href="http://chucksdesigns.com/downloads/CSS_MENU_Site.zip>CSS MENU
SAMPLE

Please, just put bare URLs into messages here, don’t try to wrap them
around link text. For example,
http://chucksdesigns.com/downloads/CSS_MENU_Site.zip

'kay?

k


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 19 Aug 2008, 6:17 pm, thatkeith wrote:

One more swing:

Please, just put bare URLs into messages here, don’t try to wrap them
around link text. For example,
http://chucksdesigns.com/downloads/CSS_MENU_Site.zip

'kay?

k

:stuck_out_tongue_winking_eye:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

By George, I think we have it!

Thanks.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options