[Pro] Inline CSS menu background extension

Freeway
1

Hope everyone had a great Christmas and here’s to a great 2013. Incidentally have you noticed that if you add up all the digits in 2013 they come to 6. Wonder what else with that digit may hopefully be appearing soon?

Anyway I digress.

I have probably been rather ambitious but I have tried to create my first inline website at http://www.DMofT.co.uk with the help of many posts in the FreewayTalk archive.

I’ve also had to play with z-index quite a lot to make sure the menu is always above all the text/photos, especially in various incarnations of Internet Exploder.

However I am struggling with the CSS menu action and so far haven’t found any reference to a workable solution.

To add a CSS menu I have created a container called ‘cssmenuholder’ into which I have placed ‘cssmenu’, the CSS Menu action instance.

To make sure the CSS menu background extends the full width of the central area, and is the same height as the menu section, I have set the background of ‘cssmenuholder’ to EE9289. However despite the fact ‘cssmenuholder’ contains ‘cssmenu’ the parent’s height will not grow to match the size of the CSS menu event though it is set to ‘oveflow visible’.

It’s almost as if the CSS menu ‘floats above’ the container and the parent doesn’t know what height it is.

I’ve put together three examples at http://www.dmoft.co.uk/test.html including one ‘fix’ a I found in the archive but that turns the CSS menu into a table which I’m trying to avoid.

Hopefully I’ve just overlooked something simple to get this to work as it all seemed to simple when I started out…

Thanks

Gordon

http://www.dmoft.co.uk/test.html

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

2

Hi Gordon, I’m not sure that I follow you… your menu seems to work fine and
I can’t see anything visually annoying.

As far as undeclared (or “auto”) width and height behaviors go, width grows
to fill its container element, while height shrinks to the size of it’s
largest contained element. If you are asking the element to grow in height
to fit it’s container, then you have the concept wrong.

Of course, it all looks good to me, so maybe a different explanation of
what is the problem I am missing?

–
Ernie Simpson

On Wed, Dec 26, 2012 at 11:28 AM, Gordon Low email@hidden wrote:

Hope everyone had a great Christmas and here’s to a great 2013.
Incidentally have you noticed that if you add up all the digits in 2013
they come to 6. Wonder what else with that digit may hopefully be appearing
soon?

Anyway I digress.

I have probably been rather ambitious but I have tried to create my first
inline website at http://www.DMofT.co.uk with the help of many posts in
the FreewayTalk archive.

I’ve also had to play with z-index quite a lot to make sure the menu is
always above all the text/photos, especially in various incarnations of
Internet Exploder.

However I am struggling with the CSS menu action and so far haven’t found
any reference to a workable solution.

To add a CSS menu I have created a container called ‘cssmenuholder’ into
which I have placed ‘cssmenu’, the CSS Menu action instance.

To make sure the CSS menu background extends the full width of the central
area, and is the same height as the menu section, I have set the background
of ‘cssmenuholder’ to EE9289. However despite the fact ‘cssmenuholder’
contains ‘cssmenu’ the parent’s height will not grow to match the size of
the CSS menu event though it is set to ‘oveflow visible’.

It’s almost as if the CSS menu ‘floats above’ the container and the parent
doesn’t know what height it is.

I’ve put together three examples at http://www.dmoft.co.uk/test.htmlincluding one ‘fix’ a I found in the archive but that turns the CSS menu
into a table which I’m trying to avoid.

Hopefully I’ve just overlooked something simple to get this to work as it
all seemed to simple when I started out…

Thanks

Gordon

http://www.dmoft.co.uk/test.html

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

3

Hi Ernie

My apologies for not being clear - too much turkey I guess.

The operation and placement of the menus works fine. However the CSS Menu is only as wide as its content, not the page. What I was aiming for was to make it look as though I had extended the menu to the width of the page at exactly the same height and this is where I’ve come unstuck.

I have exaggerated the height difference in the second example at http://www.dmoft.co.uk/test.html - I had hoped that the parent ‘cssmenuholder’ would inherit the height from ‘cssmenu’ but that doesn’t seem to be the case. Maybe it’s just one of those things that can’t be done without turning the CSS Menu into a table as in the third example?

All the best

Gordon
http://www.gordonlow.net/

On 26 Dec 2012, at 5:23 pm, Ernie Simpson email@hidden wrote:

Of course, it all looks good to me, so maybe a different explanation of what is the problem I am missing?

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

4

Hey Gordon, sorry for the long delay,

This may help you. Select the item in Freeway Pro titled “cssmenuholder1”
then choose menu Item > Extended… add a new attribute to the div style then
name it ‘display’ and give it a value of ‘inline-table’. Then remember to
remove the height setting for it.

I’ve only tested this solution in Webkit browsers, so it may not be a final
solution. Even if it works to your satisfaction, it may not help you
understand why this behavior happens. I think it may have something to do
with floats used in the menu structure affecting the enclosing elements.
While I cannot stress enough that there is nothing really wrong with the
action you are using, or the way you are using it, I will say that there
are several ways to make such a menu with CSS, and clearly each may have
it’s own set of issues to deal with.

–
Ernie Simpson

On Thu, Dec 27, 2012 at 5:16 AM, Gordon Low email@hidden wrote:

Hi Ernie

My apologies for not being clear - too much turkey I guess.

The operation and placement of the menus works fine. However the CSS Menu
is only as wide as its content, not the page. What I was aiming for was to
make it look as though I had extended the menu to the width of the page at
exactly the same height and this is where I’ve come unstuck.

I have exaggerated the height difference in the second example at
http://www.dmoft.co.uk/test.html - I had hoped that the parent
‘cssmenuholder’ would inherit the height from ‘cssmenu’ but that doesn’t
seem to be the case. Maybe it’s just one of those things that can’t be done
without turning the CSS Menu into a table as in the third example?

All the best

Gordon
http://www.gordonlow.net/

On 26 Dec 2012, at 5:23 pm, Ernie Simpson email@hidden wrote:

Of course, it all looks good to me, so maybe a different explanation of
what is the problem I am missing?

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

5

Hi Ernie

Thanks for getting back to me on this. As always your help is greatly appreciated.

I tried your suggestion but the cssmenu1 floated above the text and the side extensions disappeared.

However by mistake I unticked the CSS button for cssmenuholder1 and that seemed to do the trick, which I guess is a variation of the third option.

I do have a copy of CSS3Menu which could be an alternative way to go but, as you suggested, maybe I should just make a design feature of the limitation.

Never having worked this way before I’m picking up bits and pieces all the time. No doubt I’ll have to re-think it all again when Freeway 6 arrives…

All the best

Gordon
http://www.gordonlow.net/

On 28 Dec 2012, at 7:36 am, Ernie Simpson email@hidden wrote:

Select the item in Freeway Pro titled “cssmenuholder1”
then choose menu Item > Extended… add a new attribute to the div style then
name it ‘display’ and give it a value of ‘inline-table’. Then remember to
remove the height setting for it.

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