FreewayTalk
23 replies to this thread. Most Recent
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?
‘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
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
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.
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.
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.
My Blog: http://danjasker.blogspot.com • Freeway 5 Pro • Freeway 5 Express
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.
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.
For free and responsive Freeway support visit http://www.softpress.com/support/help_desk.php
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.
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
G5 PPC 2GB; MacOS 10.4, FRW 5, Intaglio 3
Stockholm, Sweden
……………………………………………………
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.
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!
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
G5 PPC 2GB; MacOS 10.4, FRW 5, Intaglio 3
Stockholm, Sweden
……………………………………………………
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.
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.
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
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.
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
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
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
On 19 Aug 2008, 6:11 pm, Robert Bovasso wrote:
That one takes me to the main Freeway Talk page…
Wow, Cassie strikes out…. :-(
Man, typos can kill!
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
One more swing: 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
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
;-P
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
That’s a pretty nifty solution. I would have NEVER thought of doing that. I’ll have to experiment with that later.
I have a web site to get up by Friday that I just started today! So, I can’t experiment too much right now.
I’ve managed to redesign the nav bar and cheat the background to make it work for now.
I’m glad Robert you got it figured out.
(Perhaps chuckamuck is working on his site, none of his pages load besides the chuckdesigns.com. Strange.)
My Blog: http://danjasker.blogspot.com • Freeway 5 Pro • Freeway 5 Express
Perhaps chuckamuck doesn’t give a flying fig about his site…..or perhaps he’s too damn busy to do anything about it. ;-)
Freeway Pro 5, G4 Powerbook 1.33 ghz 1.25gb ram, 2.3 ghz Dual Core MacPro 2gb ram
That happens chuckamuck…it’s cool…we cool. Just something I noticed.
My Blog: http://danjasker.blogspot.com • Freeway 5 Pro • Freeway 5 Express
