CSS Menu question

first, thank you for 5! very nice indeed :slight_smile:
i’m doing a css menu using an image, which is 130px x 30px
and has the tab style (2 rounded top corners) the problem I have is that the menu only showing the left or the right side, so I get a round corner on one side and a straight cut on the other, how do i get it to display just like my image?
thanks in advance,
Eldad


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

On 28 Mar 2008, at 01:28, eldados wrote:

i’m doing a css menu using an image, which is 130px x 30px
and has the tab style (2 rounded top corners) the problem I have is
that the menu only showing the left or the right side, so I get a
round corner on one side and a straight cut on the other, how do i
get it to display just like my image?

Be aware that there is an adjustable width setting for the CSS menu
‘panels’ in the Action palette.

best wishes

Paul Bradforth

http://www.paulbradforth.com


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

On 28 Mar. 2008, 1:28 am, eldados wrote:

i’m doing a css menu using an image, which is 130px x 30px

and has the tab style (2 rounded top corners) the problem I have is that the menu only showing the left or the right side, so I get a round corner on one side and a straight cut on the other…

I have not tried adding graphics as buttons when using CSS Menu action yet, but it sounds like you will need to create a new style to addjust the padding to fit your graphic. What messes up the css menu created by the action is the “em” settings that you cannot turn off. If i’m not mistaken this setting is based on size percentage and intended to even out (perhaps not the right description) spacing for longer text.
Start by creating a style that targets the menu then with the Extended option add padding-left and padding-right in the amount that allows all of graphic to appear.


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

In looking at a similar post to this, it appears that the menu action is placing the button image as a background image to the text or its container. Because text size can fluctuate due to browser or user settings and background images cannot, I believe the image is being truncated by a slightly smaller text and container.

In this case I might suggest avoiding the rounded edge look in favor of something more forgiving of text size fluctuations.

chuckamuck wrote:

I have not tried adding graphics as buttons when using CSS Menu action yet, but it sounds like you will need to create a new style to addjust the padding to fit your graphic. What messes up the css menu created by the action is the “em” settings that you cannot turn off. If i’m not mistaken this setting is based on size percentage and intended to even out (perhaps not the right description) spacing for longer text.
Start by creating a style that targets the menu then with the Extended option add padding-left and padding-right in the amount that allows all of graphic to appear.


Ernie Simpson – Freeway 5 Pro User – http://www.thebigerns.com/freeway/

Welcome to the debate Ern.

The CSS Menu action is an improvement as you stated elsewhere, but it is handicapped by design. The only way to fully control the CSS nature of the menu is to go back to setting up custom styles. This would allow the long established technique of using three graphic elements to create a button that would grow as needed.

It is possible to affect some change to the menus created with CSS Menu action, but some things, such as the em spacing, throw a munkey wrench in the werks.


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

I haven’t been following this thread so I may be missing something but here’s what I do when manually creating these things, hopefully this will work for you.

In the ‘a’ link style, for example ul.menu a, use the Extended window and define a width of 130px:

Name: width
Value: 130px

Because you’ve now manually created a container around the ‘a’ style exactly the width of your image it will always appear in its entirety (width-wise). I then use padding to achieve the necessary space above and below the text to accommodate for a stretchy image but I suppose you could define the height in the same manner as above instead, depending on what you want to happen when the text is enlarged. If you want the image to expand vertically with the text then it’s a bit more work and a slightly different approach but easy enough once you get the hang of it.

If this isn’t what you want I apologize.

Todd

On 28 Mar. 2008, 1:28 am, eldados wrote:

i’m doing a css menu using an image, which is 130px x 30px

and has the tab style (2 rounded top corners) the problem I have is that the menu only showing the left or the right side, so I get a round corner on one side and a straight cut on the other…

thank you guys! very helpful indeed :slight_smile:
I will play with it a bit more and see what happens, I can always go back to the old fashion rollover if neded :slight_smile:
thanks again,
Eldad


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

To jump in here, I’m fiddling with the css menus too and I’ve created png images for the normal state and hover state and have set things to such in FW but the images are not being displayed and I’ve no clue as to why… any ideas?

http://www.mythicworldtours.com/test/index.html

Cheers!
JPW


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

First off, try setting your menu list to a plain (bulleted) list.
Right now the whole thing is broken, because you have used an
unbulleted list. The action will not show any bullets on the final page.

Walter

On Apr 9, 2008, at 1:00 PM, James Wilkinson wrote:

To jump in here, I’m fiddling with the css menus too and I’ve
created png images for the normal state and hover state and have
set things to such in FW but the images are not being displayed and
I’ve no clue as to why… any ideas?

http://www.mythicworldtours.com/test/index.html

Cheers!
JPW


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

That did not work…


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

Secondly, you need to work out a way to add this style to the A tag
rather than the text inside the A tag. Right now, your style is being
added as a span style. Edit the “style2” style, and change its name
as follows:

in the Tag field, enter:

ul#fwNav1 li a

In the Name field, delete what’s there (style2) and tab out of the
now-empty field before pressing Okay.

That should get the style to happen where you want it to.

Walter

On Apr 9, 2008, at 1:07 PM, Walter Lee Davis wrote:

First off, try setting your menu list to a plain (bulleted) list.
Right now the whole thing is broken, because you have used an
unbulleted list. The action will not show any bullets on the final
page.

Walter

On Apr 9, 2008, at 1:00 PM, James Wilkinson wrote:

To jump in here, I’m fiddling with the css menus too and I’ve
created png images for the normal state and hover state and have
set things to such in FW but the images are not being displayed and
I’ve no clue as to why… any ideas?

http://www.mythicworldtours.com/test/index.html

Cheers!
JPW


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


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

Walter:

This is troubling as this is SP’s own CSS Menus action and I am
simply doing what this action asks… and adding the images where it
has image selection drop downs, etc…

James


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

Forgot to add – make sure Permanent is checked in the Edit Style
dialog. Also, understand that you will NOT have to apply this style
to the text in order for the effect to work. You may need to select
the text in your menu options one at a time and click on Remove Style
in the Styles palette in order for things to start working correctly.

When you style A tags to make them structural like this, you need to
leave the A text plain, then these sorts of cascading styles can
apply cleanly and give you the look you want.

Walter

On Apr 9, 2008, at 1:18 PM, Walter Lee Davis wrote:

That should get the style to happen where you want it to.


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

So basically, the CSS Menus action that SP has bundled in doesn’t
work out of the box and I should look elsewhere for a better solution?

On Apr-9-08, at 1:21 PM, Walter Lee Davis wrote:

Forgot to add – make sure Permanent is checked in the Edit Style
dialog. Also, understand that you will NOT have to apply this style
to the text in order for the effect to work. You may need to select
the text in your menu options one at a time and click on Remove Style
in the Styles palette in order for things to start working correctly.

When you style A tags to make them structural like this, you need to
leave the A text plain, then these sorts of cascading styles can
apply cleanly and give you the look you want.

Walter

On Apr 9, 2008, at 1:18 PM, Walter Lee Davis wrote:

That should get the style to happen where you want it to.


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

You’re welcome to your conclusion, but I don’t share it.

The CSS Menus action works perfectly out of the box. The fact that
you are having a hard time making a gradient background for your
navigation links doesn’t make it less valid a solution. It just means
that, like any other aspect of Web design, when you want something
particular, you might have to do something extra to get it.

Walter

On Apr 9, 2008, at 1:34 PM, James Wilkinson wrote:

So basically, the CSS Menus action that SP has bundled in doesn’t
work out of the box and I should look elsewhere for a better solution?


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

I think it would be more appropriate to say that that CSS Menus do
work out of the box, but within limitations. I have used the Action in
simple menus quite successfully, but there seem to be some issues when
using graphics and I’ve had some problems with the display in IE6.

Colin

On 9 Apr 2008, at 18:34, James Wilkinson wrote:

So basically, the CSS Menus action that SP has bundled in doesn’t
work out of the box and I should look elsewhere for a better solution?


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

I disagree that it works. These are simple .png buttons I’ve created
in photoshop and I am using the Background Image replacement option
that comes with the action itself… If I have to go in and modify
styles etc., it doesn’t work as advertised.

On Apr-9-08, at 1:48 PM, Walter Lee Davis wrote:

You’re welcome to your conclusion, but I don’t share it.

The CSS Menus action works perfectly out of the box. The fact that
you are having a hard time making a gradient background for your
navigation links doesn’t make it less valid a solution. It just means
that, like any other aspect of Web design, when you want something
particular, you might have to do something extra to get it.

Walter

On Apr 9, 2008, at 1:34 PM, James Wilkinson wrote:

So basically, the CSS Menus action that SP has bundled in doesn’t
work out of the box and I should look elsewhere for a better solution?


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

You are correct. There appears to be a bug in the Action related to
non-tiling images. I’ll file a bug report on this, as it looks really
straightforward to fix.

Walter

On Apr 9, 2008, at 1:51 PM, James Wilkinson wrote:

I disagree that it works. These are simple .png buttons I’ve created
in photoshop and I am using the Background Image replacement option
that comes with the action itself… If I have to go in and modify
styles etc., it doesn’t work as advertised.


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

If you can find your way to the Action with a text editor (mine is
here: /Applications/Freeway 5 Pro/Freeway 5 Pro.app/Contents/
SharedSupport/Actions/ FAST/CSS Navigation.fwactionb/Contents/
Resources/Actions/CSS Menus.fwaction) then you can do the following:

Search for the string <value name="None" />
and replace with
<value name="no-repeat" title="None" />.

There should be five or six replacements made. You will need to
unlock the file before you can edit it – BBEdit or TextWrangler
would be your weapon of choice.

Don’t include the backticks in your search or replace, they’re here
only to get the tags to show in the Web forum.

Walter

On Apr 9, 2008, at 2:08 PM, Walter Lee Davis wrote:

You are correct. There appears to be a bug in the Action related to
non-tiling images. I’ll file a bug report on this, as it looks really
straightforward to fix.

Walter

On Apr 9, 2008, at 1:51 PM, James Wilkinson wrote:

I disagree that it works. These are simple .png buttons I’ve created
in photoshop and I am using the Background Image replacement option
that comes with the action itself… If I have to go in and modify
styles etc., it doesn’t work as advertised.


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

I can’t find the file in question anywhere on my Mac… Have BBEdit…


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