# \[Pro\] Inline CSS menu background extension

**URL:** <https://discourse.softpress.com/t/pro-inline-css-menu-background-extension/15935>\
**Category:** Freeway\
**Created:** [December 26, 2012, 4:28pm UTC](https://discourse.softpress.com/t/pro-inline-css-menu-background-extension/15935 "2012-12-26T16:28:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![gdlow](https://discourse.softpress.com/user_avatar/discourse.softpress.com/gdlow/32/57_2.png) [@gdlow](https://discourse.softpress.com/u/gdlow)\
**Post date:** [December 26, 2012, 4:28pm UTC](https://discourse.softpress.com/t/pro-inline-css-menu-background-extension/15935/1 "2012-12-26T16:28:45Z")

</div>

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](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](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](http://www.dmoft.co.uk/test.html)

* * *

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

---

<div class="post-metadata">

**Author:** ![Ernie\_Simpson](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/e/a587f6/32.png) [@Ernie\_Simpson](https://discourse.softpress.com/u/Ernie_Simpson)\
**Post date:** [December 26, 2012, 5:23pm UTC](https://discourse.softpress.com/t/pro-inline-css-menu-background-extension/15935/2 "2012-12-26T17:23:18Z")

</div>

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](mailto: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](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](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](http://www.dmoft.co.uk/test.html)
> 
> * * *
> 
> freewaytalk mailing list  
> email@hidden  
> Update your subscriptions at:  
> [http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![gdlow](https://discourse.softpress.com/user_avatar/discourse.softpress.com/gdlow/32/57_2.png) [@gdlow](https://discourse.softpress.com/u/gdlow)\
**Post date:** [December 27, 2012, 10:16am UTC](https://discourse.softpress.com/t/pro-inline-css-menu-background-extension/15935/3 "2012-12-27T10:16:10Z")

</div>

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](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/](http://www.gordonlow.net/)

* * *

On 26 Dec 2012, at 5:23 pm, Ernie Simpson [email@hidden](mailto: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](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Ernie\_Simpson](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/e/a587f6/32.png) [@Ernie\_Simpson](https://discourse.softpress.com/u/Ernie_Simpson)\
**Post date:** [December 28, 2012, 7:36am UTC](https://discourse.softpress.com/t/pro-inline-css-menu-background-extension/15935/4 "2012-12-28T07:36:59Z")

</div>

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](mailto: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](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/](http://www.gordonlow.net/)
> 
> * * *
> 
> On 26 Dec 2012, at 5:23 pm, Ernie Simpson [email@hidden](mailto: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](http://freewaytalk.net/person/options)

* * *

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

---

<div class="post-metadata">

**Author:** ![gdlow](https://discourse.softpress.com/user_avatar/discourse.softpress.com/gdlow/32/57_2.png) [@gdlow](https://discourse.softpress.com/u/gdlow)\
**Post date:** [December 28, 2012, 5:08pm UTC](https://discourse.softpress.com/t/pro-inline-css-menu-background-extension/15935/5 "2012-12-28T17:08:53Z")

</div>

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/](http://www.gordonlow.net/)

* * *

On 28 Dec 2012, at 7:36 am, Ernie Simpson [email@hidden](mailto: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](http://freewaytalk.net/person/options)