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.
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.
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.
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.
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.
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
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.)
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.
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
On your Master select the item containing the menus and in the
Inspector check the Layer option
Select the item behind them and make this a layer too in the same way
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
Select the menus and cut (command-x)
Double click inside the item that was at the back (so you get a
text insertion I beam
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.
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.)
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.
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):
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.
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