Getting a menu to sit at a fixed position in the browser winder is easy enough by toggling the “fixed in Window” in the inspector. The menu will travel down the browser as you scroll down the page content.
What if you’re build a fully inline page (box model) where the page content is centred using margins :auto and your menu is now sitting in something like an inline #div id='“left-col” where ideally is needs to be but only fix to the height to stay inside that box.
Simply selecting “fixed in Window” takes it out of the centred div and fixes it to the browser top/right using the co-ordinates on the box.
Are there any tips/tricks workarounds if any to make this scenario to work?
Yes. Make a parent for your fixed menu element that is 100% wide and fixed in window, then insert your menu element inline within that box and set its margins to Auto. This will give you a vertically-fixed, horizontally-centered layout element. Just remember that the fixed element will cover any links or other controls that happen to fall behind it, even though the menu won’t appear to cover them.
Walter
On Sep 17, 2012, at 11:52 AM, David Owen wrote:
Getting a menu to sit at a fixed position in the browser winder is easy enough by toggling the “fixed in Window” in the inspector. The menu will travel down the browser as you scroll down the page content.
What if you’re build a fully inline page (box model) where the page content is centred using margins :auto and your menu is now sitting in something like an inline #div id='“left-col” where ideally is needs to be but only fix to the height to stay inside that box.
Simply selecting “fixed in Window” takes it out of the centred div and fixes it to the browser top/right using the co-ordinates on the box.
Are there any tips/tricks workarounds if any to make this scenario to work?
That’s the issue; if the menu with a parent at 100% and centred is in-front, it covers any main content links and if behind the content covers the menu links
Using z-index just the menu item does not appear to be working. Does z-index only work up to the parent container?
–
David
On 17 Sep 2012, at 16:55, Walter Lee Davis wrote:
This will give you a vertically-fixed, horizontally-centered layout element. Just remember that the fixed element will cover any links or other controls that happen to fall behind it, even though the menu won’t appear to cover them.
Each parent sets a new local scope for z-index. Each index is relative to its nearest parent element, in other words. If you want the menu to float above all other content, then it needs to be a direct child of the PageDiv, and probably in the last place in source order, too. You could try using the left:50%, margin-left: -[50% of the menu width]px trick, see if that lets you set it centered and fixed. You’ll need to break out the calculator for this, and I can’t recall if Freeway lets you set the Left in % using the Inspector. You may have to do this in the Extended dialog, relying on the fact that if you set an attribute there it will overwrite whatever you’ve entered in the Inspector.
Walter
On Sep 17, 2012, at 12:09 PM, David Owen wrote:
That’s the issue; if the menu with a parent at 100% and centred is in-front, it covers any main content links and if behind the content covers the menu links
Using z-index just the menu item does not appear to be working. Does z-index only work up to the parent container?
–
David
On 17 Sep 2012, at 16:55, Walter Lee Davis wrote:
This will give you a vertically-fixed, horizontally-centered layout element. Just remember that the fixed element will cover any links or other controls that happen to fall behind it, even though the menu won’t appear to cover them.
Before I check if this will work, is there a javascript method? Or would the same z-index issues apply?
–
David
On 17 Sep 2012, at 17:14, Walter Lee Davis wrote:
Each parent sets a new local scope for z-index. Each index is relative to its nearest parent element, in other words. If you want the menu to float above all other content, then it needs to be a direct child of the PageDiv, and probably in the last place in source order, too. You could try using the left:50%, margin-left: -[50% of the menu width]px trick, see if that lets you set it centered and fixed. You’ll need to break out the calculator for this, and I can’t recall if Freeway lets you set the Left in % using the Inspector. You may have to do this in the Extended dialog, relying on the fact that if you set an attribute there it will overwrite whatever you’ve entered in the Inspector.
Walter
On Sep 17, 2012, at 12:09 PM, David Owen wrote:
That’s the issue; if the menu with a parent at 100% and centred is in-front, it covers any main content links and if behind the content covers the menu links
Using z-index just the menu item does not appear to be working. Does z-index only work up to the parent container?
–
David
On 17 Sep 2012, at 16:55, Walter Lee Davis wrote:
This will give you a vertically-fixed, horizontally-centered layout element. Just remember that the fixed element will cover any links or other controls that happen to fall behind it, even though the menu won’t appear to cover them.
JavaScript could be used to move the field out of the normal stacking order, but you’re just automating the HTML/CSS change that you could make in Freeway anyway, and forcing that change to happen each time the page loads, which is wasteful.
Walter
On Sep 17, 2012, at 12:23 PM, David Owen wrote:
Before I check if this will work, is there a javascript method? Or would the same z-index issues apply?
Make the menu inline under the content on the freeway page all in a parent container. Then make the menu #menu-col position:fixed with the height set where the content starts in this case top:128px
JavaScript could be used to move the field out of the normal stacking order, but you’re just automating the HTML/CSS change that you could make in Freeway anyway, and forcing that change to happen each time the page loads, which is wasteful.
Walter
On Sep 17, 2012, at 12:23 PM, David Owen wrote:
Before I check if this will work, is there a javascript method? Or would the same z-index issues apply?
Nice. For the record, I though you were trying to do something different – to center a fixed-position menu over the top of a centered page.
Walter
On Sep 17, 2012, at 12:44 PM, David Owen wrote:
Fixed it…
Make the menu inline under the content on the freeway page all in a parent container. Then make the menu #menu-col position:fixed with the height set where the content starts in this case top:128px
JavaScript could be used to move the field out of the normal stacking order, but you’re just automating the HTML/CSS change that you could make in Freeway anyway, and forcing that change to happen each time the page loads, which is wasteful.
Walter
On Sep 17, 2012, at 12:23 PM, David Owen wrote:
Before I check if this will work, is there a javascript method? Or would the same z-index issues apply?
On Mon, Sep 17, 2012 at 12:44 PM, David Owen <
email@hidden> wrote:
Fixed it…
Make the menu inline under the content on the freeway page all in a parent
container. Then make the menu #menu-col position:fixed with the height set
where the content starts in this case top:128px
