[Pro] Menu disappears behind content

Freeway
1

Hiya,

I’ve just upgraded to Pro7 and have a small issue with CSS menu drop down disappearing behind page content. I would normally move the order of stuff about in the page tab but this doesn’t seem to work. The original order of stuff was fine in Pro6.

Thanks,

Nige.

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

2

I had a similar issue in a FW7 file. Perhaps you can try following:

As you are aware, you can’t change the stacking order of items in an inflow layout – however, you can force an item to be in front of other items by giving it a high “z-index” value.
To do that, go to your “Master page” Master, select the CSS Menu item, go to Item>Extended, click on the

tab, click New, enter “z-index” (without the quotes) for Name, enter “99” (again no quotes) and then type a Return to make the new value be accepted into the dialog. You can then click OK to close the dialog.
Now preview in a browser and you’ll see that it’s fixed.
Note that the higher the z-index number, the higher the item will be in the stacking order of items when displayed in a browser.

This is not going on my account rather on the Softpress support.
Hanna

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

3

Hi,

Thanks, I tried this with different values but the problem still persists.

Thank you,

Nige.

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

4

Did you exactly (especially the return) what I described? This was my failure at the first time. Otherwise I cannot help I am afraid.

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

5

Yep - but you must be aware, that an item can stuck in a parent-item and it’s therefor necessary, to chose the correct (root-level) one.

Furthermore an “overflow hidden” can cause problems as well.

An online-example could clarify what item requires what activity.

Cheers

Thomas

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

6

tried to change the stacking in the left column? click on “sitemap” to
change to “page”
Op 28 nov. 2014 15:39 schreef “Thomas Kimmich” email@hidden:

Yep - but you must be aware, that an item can stuck in a parent-item and
it’s therefor necessary, to chose the correct (root-level) one.

Furthermore an “overflow hidden” can cause problems as well.

An online-example could clarify what item requires what activity.

Cheers

Thomas

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

7

“sitemap” must be “site”
Op 28 nov. 2014 15:44 schreef email@hidden:

tried to change the stacking in the left column? click on “sitemap” to
change to “page”
Op 28 nov. 2014 15:39 schreef “Thomas Kimmich” email@hidden:

Yep - but you must be aware, that an item can stuck in a parent-item and
it’s therefor necessary, to chose the correct (root-level) one.

Furthermore an “overflow hidden” can cause problems as well.

An online-example could clarify what item requires what activity.

Cheers

Thomas

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

8

Hiya,

Yes, I made sure to hit return. I also played around with applying it to the html item that the menu is a child of, but still no luck.

Thanks,

Nige.

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

9

Hi Andries,

Yes, that was my first thought and it has solved the problem in the past but it didn’t work this time.

Thank you,

Nige.

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

10

An online-example could clarify what item requires what activity.

This is always the fastest route to the best advice, even if only posted
temporarily - without seeing the patient, everything is just a guess.

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

11

Guys, I have the exact same problem and DeltaDave suggested a similar approach to solving my problem some time ago, i.e. by adding a ‘z-value’ of ‘9999’, but it hasn’t helped.
Look at ‘eyemack.co.uk’ and, using the menu, click between PORTFOLIO and CONTACT. You’ll see the Gallery appear on top of the menu.
Funnily enough, if you manually scroll, it doesn’t.

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

12

This is always the fastest route to the best advice, even if only posted temporarily - without seeing the patient, everything is just a guess.

Another second and third for this.

David

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

13

David, see my above post on my site that you tried to help with in another thread a few weeks ago.

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

14

Hi,

Sorry I couldn’t post as the page hasn’t been OK’d yet. However, I played about with it for most of this afternoon and suddenly it works OK (without the z-index) and is pretty much how I originally had the page so I’m not sure what went on - maybe a bug?

Thanks all,

Nige.

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

15

so I’m not sure what went on - maybe a bug?

Unlikely - more likely a stacking order issue.

D

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

16

Iain - in your case select the item navbarcontainer1 and add item>extended z-index 9999

or do it in Page>Html markup in the before end section

<style type="text/css">
#navbarcontainer1 {
z-index: 9999;
}
</style>

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

17

Thanks David. I changed it to navbarcontainer1 and it worked!
How do we know which item to work on? I have 2 more items on that site that have the same issue, i.e. the form and the map in Contact.
If it’s not the item itself that appears to be doing the offending, is it usually the parent? How can you tell?

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

18

How do we know which item to work on?

The z-index property is the “third dimension” or “stacking order” (from
back to front) of items on the page. For inflow layouts(1), this stacking
order becomes natural - the page-items shown in the Page Items panel start
with the lowest at the top and the highest at the bottom.

CSS styles can be used to change an items z-index value (as we have
discussed already) However, child-items can only be reordered WITHIN their
parent item - they can’t be elevated or lowered beyond the level their
parent exists at. So, items that are wrapped or contained by a parent
element may need to have that parent elevated instead.

CONTAINER1
-- menu
CONTAINER2
-- stuff

In this case, the menu in CONTAINER1 is blocked by stuff in CONTAINER2
which has a naturally higher stacking value than container1. Giving the
container1 menu a higher z-index value only elevates it WITHIN that
container1 element. Increasing the z-index value for CONTAINER1, however,
elevates it - and the menu within it - above the obstructing container2.

Some actions automatically create wrapping containers for the items they
inject into a page… it becomes important that you can read Freeway’s output
code to see that structure. For example,

<div id="item1">…</div>
<div id="item2">…</div>

are two separate parent containers, while

<div id="item1">
      <div id="item2">…</div>
</div>

item1 container is the parent of the item2 container. Understanding this
extra-dimensional hierarchy should make life a bit easier when dealing with
inflow layouts.

(1) inflow layout = inline layout = box-model layout

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

19

Thanks a lot for the detailed reply.

So, in my case above, the following was the structure:

 CONTAINER1

     CONTAINER2

         Menu

     CONTAINER3

         Item2

     CONTAINER3

         Item3

The item that required the z-index to be 99 was CONTAINER2, so that Menu would be on top of everything else.

I guess that is consistent with my understanding of what you said, yes?

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

20

The item that required the z-index to be 99 was CONTAINER2, so that Menu
would be on top of everything else.

I guess so Iain… I haven’t been really reading this thread and just
addressed the theory of finding the correct element to elevate, not
necessarily your specific page.

The terminology may be the biggest issue for most people… parent, child,
sibling, descendant… can be confusing at first, but I think it clears
everything up once you get used to it.

<div id="item1"> <!-- this is the PARENT item -->
      <div id="item2"> <! -- this is a CHILD of item1 -->
      <div id="item3"> <!-- this is a SIBLING of item2, and also a CHILD of
item1 -->
            <div id="item4"> <!-- this is a CHILD of item3 but not item1…
it's a DESCENDANT of item1 -->

Now I am using divs (HTML containers) for this example, but this hierarchy
also applies to text, images, lists – ANY html structure that resides
within any html container.

<div id-"item1"> <!-- the PARENT item -->
      <h1>The Big Heading</h1>
      <p>The following paragraph…</p>
      <p><img src="look-an-image.jpg"></p>
      <ol id="bullet-list"> <!-- a bulleted list -->
            <li>List items of the bulleted list</li>
      </ol>

The layer order of all these items can be reset WITHIN their parent item
using the z-index CSS property. We DON’T do this normally because we
usually never need to… these are what we call “block-level” elements which
do their best not to interfere with one another naturally. However, no
matter what z-index value we give to any of SIBLING items, they cannot be
elevated above (or below) the PARENT item.

SO… the z-index solution works best when the occluding element is a SIBLING
of the blocked element. Figuring out where the two elements then share that
relationship determines where the z-index solution is applied.

It sounds to me Iain as if you understand the principle… I’m just spelling
it out for the other folks who may one day read this thread and go “Ah-ha!”

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