That doesn’t appear to work for me. I’ve tried with both a photoshop and png file,
It doesn’t really matter what INPUT format you use (as long as it supports the transparency you want of course). It is what Freeway OUTPUTS that counts. Select the graphic in your layout and use the Inspector palette to change the output from the JPEGH it will be now to either GIF (for cheap ‘n’ cheerful 1-bit transparency) or PNG at millions of colours (for gorgeous transparency including translucency, but bigger file sizes).
Draw an HTML item on the page, make it the width you want the bar to be and set its background image to be the gradient image. Cut your existing menu, double click inside the new HTML item and paste.
I’ve done that, but I grouped the individual CSS menus first before pasting - otherwise they pasted stacked on top of each other instead of side by side.
You want to remove the height from the container item so it shrinks to the size of the menus
I’ve just tried that, but the container then shrinks to 0px tall and the menus within disappear altogether. I know I can’t have the container at a fixed height, so what am I doing wrong?
but I grouped the individual CSS menus first before pasting
You should only be pasting 1 menu with several dropdowns.
Are you trying to paste in several individual menus. If you do that then there are various float and clear issues that have to addressed and they would still have to be pasted individually.
Any specific reason you are using several individual menus?
Yes, they are individual menus because the FW guide said that it recommended using the ‘CSS menus’ action instead of the ‘navigation bar’ action. Please tell me I’ve not done the wrong thing!
If your main menu items were Home | Products | Sales | Support, you
would just make a list with those four things in it.
For each submenu (pull-down) beneath the top level, just add a list
below the main, indented one more level. It should look like this (in
text) when you’re done:
* Home
* Products
o Widgets
o Salsa
o Oven Mitts
* Sales
o Stores
o Mail-order
o Trebuchet
* Support
o Phone
o Web
o Mailing List
You use the List indent controls in the Inspector to manage these
items. Now the moment you click away from that list (as long as the
CSS Menus Action is applied to the container box) it will snap up to
become the menu bar of your dreams.
Walter
On Feb 28, 2010, at 10:06 AM, neil.west1 wrote:
Yes, how would I create a multi-column css menu? - I gathered that
was how you were supposed to do it.
I’m sure it must say exactly that in the guide somewhere but, for whatever reason, I didn’t see it! I spent bloody ages getting those menus just how I wanted them!
You can still have ‘empty’ menu columns/boxes or use Joe’s suggestion from above
Draw an HTML item on the page, make it the width you want the bar to be and set its background image to be the gradient image. Cut your existing menu, double click inside the new HTML item and paste.
Yes, I can have empty columns but I presume they’ll need to the same width as all the others, which my design won’t allow. So, yes, I think it’s Joe’s suggestion above too.
No they don’t - there is a setting ‘Use content width’ so if you put option spaces instead of text in the right amount you can adjust the ‘width’ of those empty columns.
Okay, I’m trying Joe’s method and it’s 90% successful but I’m finding an insurmountable problem.
I’ve got the container filled with the grad background.
I’ve pasted the 6 column CSS menu into it including a 7th ‘empty’ column to the right.
I’ve added a 25px margin to the left to indent the menu within the container.
Now for the problem:
How do I get the white 1px divider lines? - I’ve tried using ‘dividers’ but they only add lines between menus - not at the ends.
I’ve added 1px white borders which do give me white lines at the ends, but also at the top and bottom too - which make the menu look as if it is indented top and bottom.
I’ve added a white border to the container to try and fit in with the border around the menu, but on a white background, that doesn’t appear to make any visible difference.
I can’t add empty columns at the beginning and end, and space all the columns ‘using content width’ because if I space them using non-breaking spaces, they look right, until the point size is increased in the browser and the whole menu enlarges horizontally and creates a 2nd line.
How do I get the white 1px divider lines? - I’ve tried using ‘dividers’ but they only add lines between menus - not at the ends
Under Borders there is an option for custom borders where you can define top, bottom, left and right - that in conjunction with your divider settings will give you what you want
on a white background, that doesn’t appear to make any visible difference.
Of course not - you wont see white on top of white!
I can’t add empty columns at the beginning and end, and space all the columns ‘using content width’ because if I space them using non-breaking spaces, they look right, until the point size is increased in the browser and the whole menu enlarges horizontally and creates a 2nd line.
Yes that is a problem but not required if you are using Joe’s method and centre align your menu and/or use an indent
