By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
454,619 Members | 1,025 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 454,619 IT Pros & Developers. It's quick & easy.

z-index

P: n/a
Wanting to put together a site using z-index.
Problem is, the numerous sites that discuss z-index mostly speak of and
demonstrate the use of 2 layers.
Showing how one layer has priority over the other.
Very few discuss the actual implementation of divisional layers.
e.g.: I have 10 items in the left menu bar.
Item 1 is the "home" division.
What is the procedure for making item 7 the displayed division?
I understand the basics of z-indexing, just now how to implement it
correctly.

Any one have a working site that does this?

Jul 21 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
Richard wrote:
Wanting to put together a site using z-index.
Problem is, the numerous sites that discuss z-index mostly speak of and
demonstrate the use of 2 layers.
Showing how one layer has priority over the other.
Very few discuss the actual implementation of divisional layers.
e.g.: I have 10 items in the left menu bar.
Item 1 is the "home" division.
What is the procedure for making item 7 the displayed division?
I understand the basics of z-indexing, just now how to implement it
correctly.

Any one have a working site that does this?


This might be useful:

http://www.dzinelabs.com/Pages/stackingdemo.htm
http://www.dzinelabs.com/Pages/positioning_four.htm
Jul 21 '05 #2

P: n/a
mscir wrote:
Richard wrote:
Wanting to put together a site using z-index.
Problem is, the numerous sites that discuss z-index mostly speak of and
demonstrate the use of 2 layers.
Showing how one layer has priority over the other.
Very few discuss the actual implementation of divisional layers.
e.g.: I have 10 items in the left menu bar.
Item 1 is the "home" division.
What is the procedure for making item 7 the displayed division?
I understand the basics of z-indexing, just now how to implement it
correctly.

Any one have a working site that does this?
This might be useful: http://www.dzinelabs.com/Pages/stackingdemo.htm
http://www.dzinelabs.com/Pages/positioning_four.htm


Thanks. The first one is discussed a zillion times over with no real
discussion on how layering is actually achieved.
The second one is not what I want in any way.
It uses php for the swapping.

From what I've seen so far, mostly what is done is show how
position:absolute works.
For what they show, z-index isn't even needed.
Unless you want an image under text.

Jul 21 '05 #3

P: n/a
On Sun, 12 Dec 2004 17:37:14 -0600, "Richard" <An*******@127.001>
wrote:
mscir wrote:
Richard wrote:
Wanting to put together a site using z-index.
Problem is, the numerous sites that discuss z-index mostly speak of and
demonstrate the use of 2 layers.
Showing how one layer has priority over the other.
Very few discuss the actual implementation of divisional layers.
e.g.: I have 10 items in the left menu bar.
Item 1 is the "home" division.
What is the procedure for making item 7 the displayed division?
I understand the basics of z-indexing, just now how to implement it
correctly.

Any one have a working site that does this?

This might be useful:

http://www.dzinelabs.com/Pages/stackingdemo.htm
http://www.dzinelabs.com/Pages/positioning_four.htm


Thanks. The first one is discussed a zillion times over with no real
discussion on how layering is actually achieved.
The second one is not what I want in any way.
It uses php for the swapping.

From what I've seen so far, mostly what is done is show how
position:absolute works.
For what they show, z-index isn't even needed.
Unless you want an image under text.


For what you decsribe in your original post, z-index isn't needed at
all. Instead you use display: none; and display: block; and toggle
between the two with JavaScript.

When JS and/or CSS is disabled then all ten of your content sections
will display one after another down the page. But if they are both
enabled then you change the display of sections 2-9 to 'none' when the
page first loads. Clicking on one of the links would change the
display of the current visible section to 'none' and the display of
the new section to 'block'.

z-index not required unless part of your design involves stacking of
layers. But that's a totally separate issue to the one you described.

Steve

Jul 21 '05 #4

P: n/a
Steve Pugh wrote:
On Sun, 12 Dec 2004 17:37:14 -0600, "Richard" <An*******@127.001>
wrote:
mscir wrote:
Richard wrote:

Wanting to put together a site using z-index.
Problem is, the numerous sites that discuss z-index mostly speak of
and demonstrate the use of 2 layers. Showing how one layer has
priority over the other. Very few discuss the actual implementation of
divisional layers. e.g.: I have 10 items in the left menu bar. Item 1
is the "home" division. What is the procedure for making item 7 the
displayed division? I understand the basics of z-indexing, just now
how to implement it correctly. Any one have a working site that does
this?
This might be useful:

http://www.dzinelabs.com/Pages/stackingdemo.htm
http://www.dzinelabs.com/Pages/positioning_four.htm


Thanks. The first one is discussed a zillion times over with no real
discussion on how layering is actually achieved.
The second one is not what I want in any way.
It uses php for the swapping.

From what I've seen so far, mostly what is done is show how
position:absolute works.
For what they show, z-index isn't even needed.
Unless you want an image under text.

For what you decsribe in your original post, z-index isn't needed at
all. Instead you use display: none; and display: block; and toggle
between the two with JavaScript. When JS and/or CSS is disabled then all ten of your content sections
will display one after another down the page. But if they are both
enabled then you change the display of sections 2-9 to 'none' when the
page first loads. Clicking on one of the links would change the
display of the current visible section to 'none' and the display of
the new section to 'block'. z-index not required unless part of your design involves stacking of
layers. But that's a totally separate issue to the one you described. Steve


I had considered that but I want to avoid using a javascript if at all
possible.
I saw one solution where the guy wrote a VBscript which was fairly simple.
Question is, if the browser has javascript turned off, is VBscript turned
off as well?
I thought my description was rather self explanatory.
Yes I do want the divisions stacked.
If image swapping is feasible, why isn't division swapping?
Isn't that what z-index is for?
I have seen a few sites do what I'm after, but finding one now is to time
consuming to say the least.
Jul 21 '05 #5

P: n/a
On Mon, 13 Dec 2004 09:00:33 -0600, "Richard" <An*******@127.001>
wrote:
I had considered that but I want to avoid using a javascript if at all
possible.
I saw one solution where the guy wrote a VBscript which was fairly simple.
Question is, if the browser has javascript turned off, is VBscript turned
off as well?
Only IE supports VBScript and yes, if scripting is turned off then
both JavaScript and VBScript will be disabled.
If image swapping is feasible, why isn't division swapping?
The only images you can change with CSS are background images.
You can't swap foreground images.

Similarly, there is nothing in CSS that can react to a mouse click
(well there's :active but that's no use in this case).

You can make your divs appear on hover (see
http://www.meyerweb.com/eric/css/edge/popups/demo.html).
Isn't that what z-index is for?


z-index is for setting the z position of elements that overlap in the
x-y plain. That may be one tool you use in styling sections of the
page that magically appear and disappear but it's not required.

You could use JavaScript to dynamically change the z-index of an
element and thus bring it above a solid background that hides all the
other sections from view. But using display would be simpler.

OTOH if could want to have all the sections visible at once, but
overlapping so that only small parts of them are visible. And then
when you click on one of the visible portions that section moves to
the top and is fully visible. That would require the use of z-index
but you'd still need to use JavaScript to control it.

Steve

Jul 21 '05 #6

P: n/a
Steve Pugh wrote:
On Mon, 13 Dec 2004 09:00:33 -0600, "Richard" <An*******@127.001>
wrote:
I had considered that but I want to avoid using a javascript if at all
possible.
I saw one solution where the guy wrote a VBscript which was fairly
simple. Question is, if the browser has javascript turned off, is

VBscript turned off as well?

Only IE supports VBScript and yes, if scripting is turned off then
both JavaScript and VBScript will be disabled.
If image swapping is feasible, why isn't division swapping?

The only images you can change with CSS are background images.
You can't swap foreground images. Similarly, there is nothing in CSS that can react to a mouse click
(well there's :active but that's no use in this case). You can make your divs appear on hover (see
http://www.meyerweb.com/eric/css/edge/popups/demo.html).


Now that's close to what I want to do.
I see you're basically using span and just locate the appropriate text in
the same block.
That's one possibility I'll look into.
Jul 21 '05 #7

P: n/a
On Mon, 13 Dec 2004 10:35:44 -0600, "Richard" <An*******@127.001>
wrote:
Steve Pugh wrote:
You can make your divs appear on hover (see
http://www.meyerweb.com/eric/css/edge/popups/demo.html).
Now that's close to what I want to do.


Except for the key difference between hovering and clicking a link. If
you have more than a single sentence Eric's technique isn't really
practical.
I see you're basically using span and just locate the appropriate text in
the same block.


I know you're not too good at the whole comprehension thing but the
different names may have been a clue. I am not Eric Meyer, I did not
write the above page.

Steve

Jul 21 '05 #8

P: n/a
Steve Pugh wrote:
On Mon, 13 Dec 2004 10:35:44 -0600, "Richard" <An*******@127.001>
wrote:
Steve Pugh wrote:

You can make your divs appear on hover (see
http://www.meyerweb.com/eric/css/edge/popups/demo.html).


Now that's close to what I want to do.

Except for the key difference between hovering and clicking a link. If
you have more than a single sentence Eric's technique isn't really
practical.


May I ask why you say that?

Restricting hover in this way to <a> (due to lack of support for hover
on other elements in IE) is a shame, as it does mean the popup can't
contain further anchors, however I don't see why you say one is
restricted to a single sentence.

Is it because one can't embed a block level element in an anchor in this
way?

That is annoying, particularly as IE 6, FF & Opera can all render such
code (presumably as by the time they do, the inline <a> has already been
displayed as a block itself). Of course it won't validate & is
consequently unreliable.

I don't suppose there's a way around that?

--
Michael
m r o z a t u k g a t e w a y d o t n e t
Jul 21 '05 #9

P: n/a
On Thu, 16 Dec 2004 13:32:08 +0000, Michael Rozdoba
<mr**@nowhere.invalid> wrote:
Steve Pugh wrote:
On Mon, 13 Dec 2004 10:35:44 -0600, "Richard" <An*******@127.001>
wrote:
Steve Pugh wrote:
You can make your divs appear on hover (see
http://www.meyerweb.com/eric/css/edge/popups/demo.html).

Now that's close to what I want to do.

Except for the key difference between hovering and clicking a link. If
you have more than a single sentence Eric's technique isn't really
practical.


May I ask why you say that?


Because of the necessity of keeping the mouse over the element with
the :hover style in order for it to be visible. The more content you
have the more likely it is that you're going to need to move to mouse
to scroll or hit print or just be accident.

Look at people who are primarily mouse surfers - the mouse is rarely
still even when they're reading something.

Steve

Jul 21 '05 #10

P: n/a
Steve Pugh wrote:
On Thu, 16 Dec 2004 13:32:08 +0000, Michael Rozdoba
<mr**@nowhere.invalid> wrote:
[:hover popups limited use]
May I ask why you say that?

Because of the necessity of keeping the mouse over the element with
the :hover style in order for it to be visible. The more content you
have the more likely it is that you're going to need to move to mouse
to scroll or hit print or just be accident.


True.
Look at people who are primarily mouse surfers - the mouse is rarely
still even when they're reading something.


Yes, I see that.

It wouldn't be so problematic in the case of a menu opening adjacent to
the original object, which would be a nice application - however the
inability to embed links in it kills that on the head :/

--
Michael
m r o z a t u k g a t e w a y d o t n e t
Jul 21 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.