CSS Menu and Bacground Graphic

I’m in the process of developing a website which uses CSS Menus. The current state of the website can be seen at http://homepage.mac.com/taliesinsoft/ECR/index.html.

Here’s the problem…

The width of the single master page is set to 1024 pixels. There is a graphic masthead underneath which is a 24 pixel high menu with of six horizontal items each of which is 166 pixels wide, giving a total menu width of 996 pixels. My wanting is to have this menu placed on top of a menu bar that is 1024 pixels wide and 24 pixels high. My problem is that so far I have been unsuccessful at achieving this.

The current Freeway site can be seen in my taliesinsoft iDisk public folder in the containing ECR folder.

Any thoughts and/or advice (and even criticisms) will be most appreciated.


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

I’ll be interested ti see an expert’s reply to this. I had a quick
look at what you are trying to do and to my simplistic mind it should
be easy.

If you create a menu bar with no background to the main menu, you
should be able to float the layer over a background graphic to the
size you want. Adjust the em size in the Action window (I wish they
were pixel measurements!) to the best width and centre to make a neat
fit. BUT, it doesn’t seem to work that way.

I have found before that there is a problem with IE browsers if you
don’t have a background colour or image selected for the main menu.
The submenu just doesn’t (in non coders language) ‘stick’ - and only
by a very, very swift mouse movement or by holding down the mouse
button and clicking again can you actually make a selection. As far
as I now this behaviour is only with IE. And that’s probably your
biggest audience!

If you have a plain background, it’s easily overcome - just match the
menu background colour, but for a graphic it’s a real problem - unless
I’m (quite probably) missing something very obvious to others.

Perhaps, someone from Softpress Towers might like to comment on this
one.

Colin

On 20 Dec 2008, at 18:53, James L. Ryan wrote:

The width of the single master page is set to 1024 pixels. There is
a graphic masthead underneath which is a 24 pixel high menu with of
six horizontal items each of which is 166 pixels wide, giving a
total menu width of 996 pixels. My wanting is to have this menu
placed on top of a menu bar that is 1024 pixels wide and 24 pixels
high. My problem is that so far I have been unsuccessful at
achieving this.


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

Colin,

Many thanks for taking the time to comment. I too, with my also simplistic mind, think what I would like to achieve should be easy. I’ll be soliciting suggestions from Softpress in the morning and will report back on what, if any, suggestions they have.

Jim


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

Hi James,

Rather than use a graphic item behind the menu you can just use an
HTML item with a background color set to the color of the menus. The
reasons for this are:

a) You’re using a single color so there’s no need for it to be a
graphic. Using graphics means more resources to download resulting in
a slower loading page when you add them all up. A good rule to
remember is that many small resources will use more bandwidth than
fewer bigger resources (and by bigger I don’t mean HUGE :p).

b) Some browsers change the size of text, for some it’s just the way
they work but others people will have changed the default size of
their text. The result of this can be menus that extend past the
height of the graphic. Since graphics are static they can’t increase
in size with the menus unlike HTML items.

So, draw an HTML item that is the width of your page. Give it the same
background color as your menus (#500000), cut the menu, double click
inside your new item and paste. You may need to set the menus so they
are Floating Left (or Right if you’d prefer, think align when you see
Float) and then make the height of the new item to be undefined by
clicking on the height icon in the Inspector palette. This will ensure
that it will grow in height with the menus when they grow.

I hope this helps.

Joe

On 22 Dec 2008, at 01:31, James L. Ryan wrote:

Colin,

Many thanks for taking the time to comment. I too, with my also
simplistic mind, think what I would like to achieve should be easy.
I’ll be soliciting suggestions from Softpress in the morning and
will report back on what, if any, suggestions they have.

Jim


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 note your reply to James, Joe, with which I totally agree in the
design he has prepared. However, I have one site in progress where I
would ideally have liked to run the menu without a background colour
over the base of a graphic so that a curved ‘swash’ shows through. As
mentioned previously, if you do not have a background colour this
works fine in Safari and Firefox on a Mac and Firefox on a PC, but
poor old IE just can’t cope and you cannot select submenus easily.

If you have a PC handy, see ‘processes’ on this test page: http://www.words-strategies.co.uk/clientspace7/testpage.html

I have overcome this, for now, by using a pale background colour
selected from the ‘swash’ for the hover state.

Any comments would be appreciated (or a work around would be even more
appreciated) - something for you to think about over Christmas dinner,
perhaps!!.

Colin

On 22 Dec 2008, at 10:25, Joe Billings wrote:

Hi James,

Rather than use a graphic item behind the menu you can just use an
HTML item with a background color set to the color of the menus. T


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

Joe,

Many thanks for taking the time to help me solve my CSS Menu problem.

I have updated my site at http://homepage.mac.com/taliesinsoft/ECR/index.html and have updated the Freeway source which is in the ECR folder within the Public folder in my taliesinsoft iDisk.

I changed the Menubar and Background items from graphics to HTML but unfortunately the clipping off of the right hand of the Menubar still occurs. I did not embed the Menu into the Menubar as, and perhaps I’m misunderstanding part of what you stated, I didn’t want the Menubar to change size when a menu with multiple entries was selected. (I hope this makes sense to you.)

Jim


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

Colin,

Take a look here (it will be incorporated into the Action as soon as
possible):

http://www.softpress.com/kb/questions/140/

Joe

On 22 Dec 2008, at 14:59, Colin Alcock wrote:

I note your reply to James, Joe, with which I totally agree in the
design he has prepared. However, I have one site in progress where I
would ideally have liked to run the menu without a background colour
over the base of a graphic so that a curved ‘swash’ shows through.
As mentioned previously, if you do not have a background colour this
works fine in Safari and Firefox on a Mac and Firefox on a PC, but
poor old IE just can’t cope and you cannot select submenus easily.

If you have a PC handy, see ‘processes’ on this test page: http://www.words-strategies.co.uk/clientspace7/testpage.html

I have overcome this, for now, by using a pale background colour
selected from the ‘swash’ for the hover state.

Any comments would be appreciated (or a work around would be even
more appreciated) - something for you to think about over Christmas
dinner, perhaps!!.

Colin

On 22 Dec 2008, at 10:25, Joe Billings wrote:

Hi James,

Rather than use a graphic item behind the menu you can just use an
HTML item with a background color set to the color of the menus. T


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

Hi James,

Ok, do the following:

  1. On your Master select the item containing the menus and in the
    Inspector check the Layer option
  2. Select the item behind them and make this a layer too in the same way
  3. Give the same item a custom padding of Left: 15px. To do this
    choose Custom from the padding option at the bottom of the Inspector
    and add 15 in the Left field of the dialog that appears
  4. Select the menus and cut (command-x)
  5. Double click inside the item that was at the back (so you get a
    text insertion I beam
  6. Paste

That’s it, that should (does, I tried it) work as expected.

I hope this helps.

Joe

On 22 Dec 2008, at 15:13, James L. Ryan wrote:

Joe,

Many thanks for taking the time to help me solve my CSS Menu problem.

I have updated my site at <http://homepage.mac.com/taliesinsoft/ECR/index.html

and have updated the Freeway source which is in the ECR folder
within the Public folder in my taliesinsoft iDisk.

I changed the Menubar and Background items from graphics to HTML but
unfortunately the clipping off of the right hand of the Menubar
still occurs. I did not embed the Menu into the Menubar as, and
perhaps I’m misunderstanding part of what you stated, I didn’t want
the Menubar to change size when a menu with multiple entries was
selected. (I hope this makes sense to you.)

Jim


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

Joe,

I applied your six step solution and indeed it did the job. Many thanks, many thanks, many thanks!

I just now tested the site in four different browsers, each of which are the latest versions.

Safari - The menu folds when the text is enlarged, but is still usable.

Firefox - The menu doesn’t fold, instead growing proportionately as the text is enlarged. Also, the menu itself extends something like two pixels lower than the menubar.

Opera - The menu doesn’t fold, instead growing proportionately as the text is enlarged.

Camino - The menu folds when the text is enlarged, but is still usable.

My task now is to fully understand why your suggested fix works.

Again, many thanks!

Jim


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

Many thanks Joe

It really must be Christmas! And your answer a great little Christmas
present that solves the problem so simply. A transparent .gif had
crossed my mind, but I wasn’t sure how to include one.

Colin

On 22 Dec 2008, at 16:07, Joe Billings wrote:

Colin,

Take a look here (it will be incorporated into the Action as soon as
possible):

http://www.softpress.com/kb/questions/140/

Joe

On 22 Dec 2008, at 14:59, Colin Alcock wrote:

I note your reply to James, Joe, with which I totally agree in the
design he has prepared. However, I have one site in progress where
I would ideally have liked to run the menu without a background
colour over the base of a graphic so that a curved ‘swash’ shows
through. As mentioned previously, if you do not have a background
colour this works fine in Safari and Firefox on a Mac and Firefox
on a PC, but poor old IE just can’t cope and you cannot select
submenus easily.

If you have a PC handy, see ‘processes’ on this test page: http://www.words-strategies.co.uk/clientspace7/testpage.html

I have overcome this, for now, by using a pale background colour
selected from the ‘swash’ for the hover state.

Any comments would be appreciated (or a work around would be even
more appreciated) - something for you to think about over Christmas
dinner, perhaps!!.

Colin

On 22 Dec 2008, at 10:25, Joe Billings wrote:

Hi James,

Rather than use a graphic item behind the menu you can just use an
HTML item with a background color set to the color of the menus. T


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

Joe,

A bit of an aside. I ran the W3C validators on my website, getting no errors with the regular validator and two errors with the CSS validator.

Just wanted you to know.

Jim

The grateful one!


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

Good catch, thanks Jim.

Joe

On 22 Dec 2008, at 17:48, James L. Ryan wrote:

Joe,

A bit of an aside. I ran the W3C validators on my website, getting
no errors with the regular validator and two errors with the CSS
validator.

Just wanted you to know.

Jim

The grateful one!


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