Moving to CSS Menus

stewart · June 15, 2008, 6:03pm

I have been looking at moving a site that uses the old Freeway 3/4 Menu Bar action to the new Freeway 5 CSS Menus, but there are three things I need to do to replicate the appearance of the old version:

specify the height of the menu items (i.e. the height of the coloured block surrounding the links)
centre the menu text, rather than flush-left
have variable widths for the menu items (i.e. the longer the link text, the wider the box it sits in)

Are any of these possible?

Stewart.

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

Paul_Bradforth · June 15, 2008, 6:08pm

On 15 Jun 2008, at 19:03, stewart wrote:

I have been looking at moving a site that uses the old Freeway 3/4
Menu Bar action to the new Freeway 5 CSS Menus, but there are three
things I need to do to replicate the appearance of the old version:

specify the height of the menu items (i.e. the height of the
coloured block surrounding the links)

centre the menu text, rather than flush-left

have variable widths for the menu items (i.e. the longer the link
text, the wider the box it sits in)

Are any of these possible?

I think you can specify the height of the items simply by dragging
them taller. You can centre the menu text by selecting the actual text
and choosing centred alignment in the Inspector. I wish you could have
variable widths for the items, but I don’t think you can.

best wishes,

Paul Bradforth

http://www.paulbradforth.com

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

stewart · June 16, 2008, 8:27am

Thanks Paul.

:: Centre Text :: Yes, that worked a treat. (I’d been seeing the CSS Menu action as a bit of a ‘closed book’, if you know what I mean - you just set up your lists then it takes over everything. But your suggestion worked fine, with no side-effects, as far as I can see.)

:: Height :; No joy with this. The height of the background seems to be governed by the size of the link text. Not sure how to change that (if possible).

:: Variable Width :: I did think about trying to set this up using additional CSS content (e.g. overriding with “width: auto”) but didn’t get very far. (Perhaps because I don’t know what I’m doing, but perhaps because even if I did it wouldn’t be possible anyway!)

Thanks again,

Stewart.

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

Richard · June 16, 2008, 9:24am

Add some padding to top and bottom perhaps? You can do this in the CSS style.

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

davedesigner · June 16, 2008, 9:34am

The only width option I can see is setting the width in ems for the main menu, and/or a different em width for the sub menu. This can stop two lines appearing with long sub menus.

Otherwise for this and height, you would need to edit the published styles the action creates - perhaps trying source code snooper?

On 16 Jun 2008, at 09:27, stewart wrote:

:: Variable Width :: I did think about trying to set this up using additional CSS content (e.g. overriding with “width: auto”) but didn’t get very far. (Perhaps because I don’t know what I’m doing, but perhaps because even if I did it wouldn’t be possible anyway!)

David Owen
Freeway Friendly Web hosting and Domains ::
(Test Drive a web hosting account for Free)

http://www.ineedwebhosting.co.uk

http://www.printlineadvertising.co.uk/freeway

Paul_Bradforth · June 16, 2008, 9:35am

On 16 Jun 2008, at 09:27, stewart wrote:

Thanks Paul.

:: Centre Text :: Yes, that worked a treat. (I’d been seeing the CSS
Menu action as a bit of a ‘closed book’, if you know what I mean -
you just set up your lists then it takes over everything. But your
suggestion worked fine, with no side-effects, as far as I can see.)

:: Height :; No joy with this. The height of the background seems to
be governed by the size of the link text. Not sure how to change
that (if possible).

Sorry about that; I thought I remembered being able to do this but
I’ve just tried it and you’re right, it doesn’t work

best wishes,

Paul Bradforth

http://www.paulbradforth.com

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

stewart · June 16, 2008, 12:49pm

Thanks for the replies, guys.

I might just go with Plan B (or perhaps that should be Plan A) and stick with the old menu action for now. (Well, it works…)

I’ll keep watching to see if the new CSS menu action evolves more options.

Thanks again,

Stewart.

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

Paul_Bradforth · June 16, 2008, 12:52pm

On 16 Jun 2008, at 13:49, stewart wrote:

Thanks for the replies, guys.

I might just go with Plan B (or perhaps that should be Plan A) and
stick with the old menu action for now. (Well, it works…)

I’ll keep watching to see if the new CSS menu action evolves more
options.

I haven’t tried it, but I’m sure a lot of things can be edited with
CSS here, inside Freeway, in the various 'Extended" dialogs. Might be
easier than you think …

best wishes,

Paul Bradforth

http://www.paulbradforth.com

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

Ernie_Simpson · June 16, 2008, 12:53pm

Padding to tops and sides, correct. Coloring the background colors the
padding (done in the link style) so no matter how long the link, it
“appears” in a box.

I am working on the long answer to this, but I have so little time, sorry.

On Mon, Jun 16, 2008 at 2:24 AM, Richard van Heukelum wrote:

Add some padding to top and bottom perhaps? You can do this in the CSS style.

–
Ernie Simpson – Freeway 5 Pro User – thebigerns.com

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

Aaron1 · June 16, 2008, 5:39pm

I haven’t tried it, but I’m sure a lot of things can be edited with
CSS here, inside Freeway, in the various 'Extended" dialogs.

Yes, under the “extended” dialogue you can use the “line-height” property to specify the height of each box.

I use “line-height”, value: 150%, and it works great for me.

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

WebWorker · June 17, 2008, 10:21am

Arron,

Are you talking styles the new FW5 CSS menus? using the extended dialogue box does not make any difference applying it to the new FW5 action box.

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

Ernie_Simpson · June 17, 2008, 11:40am

Sorry, but the line-height attribute refers to the leading space
between lines of type. Box (div) height is the function of the
“height” attribute.

Normally box height is set in the Inspector palette. Choosing the
“Extended” option, and the “DIV style” for box allows you to over-ride
the Inspector height.

On Mon, Jun 16, 2008 at 10:39 AM, Aaron email@hidden wrote:

Yes, under the “extended” dialogue you can use the “line-height” property to specify the height of each box.

I use “line-height”, value: 150%, and it works great for me.

–
Ernie Simpson – Freeway 5 Pro User – thebigerns.com

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

Joe2 · June 17, 2008, 12:10pm

Webworker,

Select your CSS Menus item, make it a layer, go to Item>Extended and
in the

tab click New.

In here add line-height to the Name field and 150% (or whatever value
you want) to the Value field. I just tried this out and it works fine.

Regards,

Joe

On 17 Jun 2008, at 11:21, WebWorker wrote:

Arron,

Are you talking styles the new FW5 CSS menus? using the extended
dialogue box does not make any difference applying it to the new FW5
action box.

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

WebWorker · June 18, 2008, 5:14pm

Sorry Joe, but that does not work for me.

Are you sure we’re talking about that same thing? the New FW5 CSS menu action. If I add line-height in the Extended > div style nothing happens.

But If I create a style from the style palette, and apply it to the CSS box then yes it works.

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

JDW · January 13, 2009, 8:58am

On 17 Jun 2008, 12:10 pm, Joe Billings wrote:

Select your CSS Menus item, make it a layer, go to Item>Extended and in the
tab click New.

In here add line-height to the Name field and 150% (or whatever value you want) to the Value field. I just tried this out and it works fine.

Joe, I just tried your advice today, and while not nearly as nice as being in the Actions palette, it is very usable. However, your suggestion changes the row height for all the menu item rows. But I wish to have a tall button but then have submenus be a shorter height. How does one go about doing that?

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

Joe2 · January 13, 2009, 10:50am

Hi JDW,

This all depends on the type of menu you want. The parameters will be
different on a horizontal menu from a vertical menu, and then
different again if you want the sub menus to act the same way, and
different again if you want the subsubmenus to act a different way.
One of the beauties of CSS is the inheritance, something that these
menus take full advantage of but when you want to do something that
makes specific areas of something different to the rest the parameters
can increase dramatically.

Let me know what you are trying to do and I can try and help further.

Joe

On 13 Jan 2009, at 08:58, JDW wrote:

On 17 Jun 2008, 12:10 pm, Joe Billings wrote:

Select your CSS Menus item, make it a layer, go to Item>Extended
and in the
tab click New.

In here add line-height to the Name field and 150% (or whatever
value you want) to the Value field. I just tried this out and it
works fine.

Joe, I just tried your advice today, and while not nearly as nice as
being in the Actions palette, it is very usable. However, your
suggestion changes the row height for all the menu item rows. But I
wish to have a tall button but then have submenus be a shorter
height. How does one go about doing that?

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

JDW · January 13, 2009, 1:26pm

Thanks for the speedy reply, Joe!

I am interested in a pull-down type menu that pulls straight (vertically) down. I created a button gradient in Photoshop to use as the background, which is 35px in height. Setting the line-height to ‘175%’ accommodates this graphic fairly well. (I tried ‘35px’ but it resulted in a gap under the button and just above the first submenu.) My aim is to make the sub-menus (and of course, sub-sub menus) to be about half the height of the main menu button.

So in other words, the “button” you click on to pull down the window is big, but the menu itself (the rows, I mean) are normal sized (i.e., smaller in height than the button).

Thanks,

James

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

JDW · January 14, 2009, 8:11am

Joe, I await your reply to my previous post above. In the meantime, I have another question. But before I start on that, I’ve got a rant…


I absolutely, positively, 100% hate the lack of WYSIWYG layout functionality with respect the CSS Menus.  It annoys the heck out of me, and it is a slap in the face to the easy of use that the Mac OS and legacy versions of Freeway are famous for.  
No, I do not mind sketching out an HTML item, composing a text list and then applying the CSS Menus action to that same HTML item.  That’s quick, easy and makes logical sense (i.e., an indented list directly corresponds to a menu with submenus – in my mind at least).  So no problems there.  But the part I “hate” is what comes immediately AFTER you apply that CSS Menus action.  I want my list and HTML box to immediate transform into the very menu I get presented with when I Preview.  I want to see that in the design mode, not be forced to use Preview to see it.  Why tie my hands and force me back to the 1980’s?  In 1982 we had CPM and DOS text editors that forced you to use special coded tags in order to format text as Bold, Italic, etc. You couldn’t see how the text really looks until you printed.  In like manner, Freeway is sticking this same, out-of-date, brain-dead, 1980’s style lack of WYSIWYG down my throat with respect to CSS Menus (and some other actions too, in fact).  I chose Freeway 2.0 back in the 1990’s because it was different from other web design tools of the day in regard to WYSIWYG design.  I still love Freeway, and indeed that is why I write this impassioned rant!  I want to see it get back to its roots.
Here’s the deal.  Right now, there’s no WYSIWYG CSS Menus “design.”  The big problem with that is that you end up with several HTML boxes which are by no means as compact as the menu bar you are making.  So to clean up that big mess, SoftPress needs to make CSS Menus WYSIWYG in design mode.  What I mean is, when I apply the CSS Menus action to an HTML item with a list inside, I immediately want to see that HTML item transformed into the very menu I am creating (i.e., what it looks like in Preview).  Then, if I double click that menu in design mode, it will revert back to the HTML item and allow me to edit the list contents.  THAT is WYSIWYG, and I certainly want that right now!

Rant over. (Hope SP engineers are listening.)

Joe, my second question to you is about the “width” of individual CSS Menus. As you know, there is a slider in the Actions palette that allows us to change this width in “em” sizes. I somewhat understand this as ‘em’ is a relative sizing scheme. But I have a problem. My page is 800px wide. I have 6 buttons in the menu bar I am creating with CSS Menus. Five of those buttons are the same width. The 6th button is wider than the others, and sits to the far right side of the menu bar.

I want my entire Menu bar to span the exact 800px width of the page I am creating. No more, no less. That is what I want. But I simply cannot do this with the slider in the Actions palette. It’s not exact. The overall length is just a tad too long or a tad too short.

How do I use CSS Menus to span the entire width of my menu bar to exactly 800px?

Thank you,

James Wages

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

JDW · January 14, 2009, 9:24am

Okay, Joe. Sorry to overload you with 3 posts now, but CSS Menus is not being friendly to me.

Question#3: When I use anything higher than 100% in the line-height attribute, sub-submenu arrows get shifted up. Of course, that makes no sense at all. The arrows need to be the same vertical height as the text in each menu row. The text in each row automatically centers itself vertically, so why not the arrows? How do I force the arrows to be vertically centered when using custom line-heights?

Question#4: Is it possible to make a different color scheme for sub-sub menus? I ask because I have a sub-sub menu with the same number of rows as its parent submenu. It’s a Product menu on my website. And I want our most popular product placed at the top of that menu. But when I mouse-over that first row in the parent sub-menu, the sub-sub appears to the right and looks odd (looks like a single fat submenu with two columns of text). The sub-submenus on softpress.com don’t look bad because you don’t invoke any sub-subs until part way down the parent submenu. But again, I want to start at the topmost row. Hence, coloring the sub-subs differently would make it clear there is a sub-sub menu on screen, not just a submenu with two columns of text.

Thanks.

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

WebWorker · January 14, 2009, 10:47am

I undersand your frustration, but it does sound a little harsh

There are all kinds of stuff on the web that can’t be previewed unless published and viewed in a web browser. Lots of the work I do, looks a lot different in the Freeway basic view.

If you stand back to look at what code is generated when you create CSS menus you will realise the problems - and realise they have done a pretty good job. The options in the standard CSS menu action provide a massive array of possible variations.

Freeway does a very good job of protecting the user of not having to bother with code. But as you get deeper into web development you will realise WYSIWYG it not the holy grail. And many users don’t go by the preview Freeway gives, but by what a browser shows.

On 14 Jan 2009, 7:11 am, JDW wrote:

I absolutely, positively, 100% hate the lack of WYSIWYG layout functionality with respect the CSS Menus. It annoys the heck out of me, and it is a slap in the face to the easy of use that the Mac OS and legacy versions of Freeway are famous for.

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