[Pro] FWP 6.0.3 and Z-Index?

How do I set inline layout items (such as CSS drop down menus) to overlap inline items below them?


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

The z-index attribute sets the layering order of an item. However, it’s not
always that simple.

Sometimes things get cut-off for other reasons – float and overflow
conflicts are some of the instances. The best way I’ve found, using Safari
6’s Inspect Element command gives you some dynamic access to a web page.
Simply preview in Safari 6, command-click or right-click on the
questionable item in the browser window, and select Inspect Element from
the resulting Contextual menu.

In the code view window that opens, search for the container of the item
that is having problems. This is not as easy as you might think. However,
notice as you hover over code items in that window, corresponding items are
highlighted in the browser window - giving you some visual feedback. If you
click on an element in the main code window, the right side will show you
information on how the browser displays that item. Note: almost all this is
editable. It’s not real editing and will revert when the page is refreshed,
but until then you can see and alter the code that creates the page.

When I find the item I think needs the improved z-index setting, I add that
attribute and value to the element then see if the change that I want takes
place in the browser window. If it does, then I find that element in
Freeway Pro and extend it’s style, otherwise I look for something else to
be the problem. Like I said, it isn’t always a layering problem.


Ernie Simpson

On Sat, Feb 23, 2013 at 12:52 AM, RavenManiac email@hiddenwrote:

How do I set inline layout items (such as CSS drop down menus) to overlap
inline items below them?


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

Yeah, with this website there are two issues that are going to give me problems with an inline layout. The first is the CSS menus, the second is the “g” descender in the WMP logo overlapping the Carousel and images throughout the site. This is why I originally used layered items for these two elements.

http://wmp.idealynx.com


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

Do you think it’s possible to use the Z-Index to resolve these issues? If so, how does one set the Z-index?


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

First, you have to work out WHICH item needs to have its layer order
improved. Sometimes you can guess, but since everyone works a little
differently you just can’t say absolutely.

That said, if you are using a basic inline layout that uses three main
available width divs to divide the page vertically (Header, Content,
Footer) and your menu is in the Header div, then likely the Content and
Footer divs are covering up the menu drop-downs.

This is because every item you add to an inline layout is slightly closer
to the front of the viewport than the item preceding it. The best way to
understand this is to look at your list of page items in the Site / Page
pane left of the workspace. Items near the top are further back than items
near the bottom.

So if the culprit is the Header div, you want to improve it’s z-index
value. With absolutely positioned items, it’s as simple as Bring to Front
or Move to Back. But with inline layouts, it’s different.

The easiest way I know how to change the z-index of an item is to extend
the item’s style. Select the item, choose menu Item > Extended…, select the
<div style> pane, Add a new attribute with Name of z-index and Value of
99 (high is good) and that’s it!

Again, this is not some automatic fix that can be blindly applied. Changing
the z-index on the wrong element gets you nothing but frustration. That’s
why I use Safari 6’s Inspect Element feature to root out the cause of the
problem. The proble almost always is something in front of your menu –
discovering what that something is and why IS HOW you fix it. :slight_smile:


Ernie Simpson

On Sat, Feb 23, 2013 at 10:29 AM, RavenManiac email@hiddenwrote:

Do you think it’s possible to use the Z-Index to resolve these issues? If
so, how does one set the Z-index?


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

So is there anything wrong, from a design or structure standpoint, with leaving the logo and menu absolute, layered items?

I like simple. :slight_smile:


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

Absolutely not. Mix-n-match as needed. Just be aware of how each method affects your design.

Todd

So is there anything wrong, from a design or structure standpoint, with leaving the logo and menu absolute, layered items?


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

So is there anything wrong, from a design or structure standpoint, with
leaving the logo and menu absolute, layered items?

No, not wrong - unless you want those items or their parent to behave the
way inline items do. If they are absolute and you want them to shift with
changing content or changing browser sizes then you will likely be unhappy
with the result.

Try it out, try everything - those who spend countless hours hammering away
at things just to see what they can or cannot do become the best at this
stuff.


Ernie Simpson


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

The easiest way I know how to change the z-index of an item is to extend the item’s style. Select the item, choose menu Item > Extended…, select the

pane, Add a new attribute with Name of z-index and Value of 99 (high is good) and that’s it!

I just tried this Ernie and it worked like a charm. Thanks!


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

just a small detail (maybe):

The div id=“content” contains two floating items, so it’s a clever idea to add the “clearfix (Action)” to this so it gets the original height (of the content) back (instead of collapsing to 0px which it currently does). This is btw part of my screencasts-series on which you are subscribed. It’s video no. #012 (part5) starting somewhere on minute 25).

From the construction point:

Absolutely recommended and pretty fine. A good example for the “Hybrid Inflow Construction” which is combining the best of both worlds.

Cheers

Thomas


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