need help with CSS menu

Hi…

I am working on a new version of our website using Freeway (the previous one was in iWeb that I tweaked heavily), and am struggling to duplicate the CSS menu we had before.

In both versions, we have icons to the left of all of our main menu choices (the current website version is at
http://www.summerkids.net/About_Us.html )

For Freeway, I am building the CSS menu and then moving the icons into position and locking them down. I have used horizontal layout, left alignment, using content width and adding 50 px padding to the left.

I’m in the testing phase of the Freeway version, and while it looks FABULOUS on my mac’s Safari and Firefox, we aren’t getting the same results on my assistant’s IE. On her computer, the icons are basically on top of the text on the right half of the page.

The link to our Freeway test is below.

Does anyone have any genius ideas about how to fix this? Part of the problem is that I can’t see the issue to begin with on my computer. :slight_smile:

Thanks.

http://www.summerkids.net/test/About_Us.html


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

I am building the CSS menu and then moving the icons into position

This is where you are going wrong.

The images need to be integrated into the menu using some extra CSS styling.

Have a look at http://www.deltadesign.co/fw_examples/menus/graphic_menu.html

Pay careful attention to the styles applied to the sub menu text.

David


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

That’s what I want! Brilliant. And thanks.

Now for the how:

I see that you have added a style for each item that would have an icon… is there any easy way to do that? Is it all under the “Extended” tab? How do I tell it how to reference the image?

I’m a bit of a novice here but am quick to learn and determined to get this right. Thanks, Dave.


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

If you have downloaded the file you can select the styles and Right Click>Edit Styles - once in there look under the Extended tab.

All you will really need to do is upload some correctly sized images to your server and change the paths in the styles to point to your images.

D


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

Is there any way to import those styles into the document I am already working on?


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

Yes

Edit>Styles

Click on the Cog down the bottom left > Import

Choose my FW example file with the file selector then Click the Open button (bottom right)

D


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

I should add that it is then a good idea to drag the imported styles from sheet2 into the top one (sheet1?) - so that it shows in the FW style palette without having to change style sheets in the Inspector.

D


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

…and that just answered my next question. Thanks. :slight_smile:


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

can you explain to me what the padding numbers mean? I got the icons in–it is looking good!–but there is too much space (a) between the icons and my text and (b) just in general… which means it’s bumping into two lines. Guessing that if I fix the padding numbers on the style sheet and/or on the action I am almost there.


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

http://www.w3schools.com/css/css_padding.asp

But you may also have to increase the width of your menus

D


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

Hi… I’ve got it all figured out now, EXCEPT:

When I go to upload the site, I get the following error (regarding CSS menu):

fwParameters.marksubstop has no properties.

There’s a bunch of code below underlined in red:

var showImage= (!fwParameters.marksubstop.fwBoolValue)? “.fwMainPointer1 {display: none}” :"";

The error seems to be on the page where I created the CSS menu before moving it onto the master page, if that helps at all. (When I moved the menu to the master and then reapplied the master, I saw two menus on the screen, despite the fact that I had deleted it off the subject page.)

I’m thinking it may be easiest to just rebuild that page from scratch, but I’d love to hear any other ideas you have.

C


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

The error seems to be on the page where I created the CSS menu before moving it onto the master page,

If the Page where you created the menu uses the Master where the CSS Menu now exists then it is likely that you will have 2 copies of the menu on one page.

If you change your FW view from Site to Page (top of the leftmost column) you will see all the elements on the page listed. And if you have named them correctly you will be able to see if you have 2 items like menu and menua, or maybe item2 and item2a.

Check and see what the menu is called on the Master. Select it on the FW page and the Html inspector (1st tab) will tell you what it is called in the ‘Title’ box.

D


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