473,323 Members | 1,574 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,323 software developers and data experts.

z-index

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
10 3737
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
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
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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: JohnDpatriot | last post by:
After installing XP SP2 on my machine, I continually get the Script Error permission denied when I attempt to adjust the Zindex of an object on the page . see below ...
22
by: DJ WIce | last post by:
Hi, I'm looking for a script to get the hi-est z-index on a page. I want my javascript menu to be always on top of the page (moves along on top when you scroll down). Does anyone know how to...
5
by: Razzbar | last post by:
I'm using a div as a floating dialog box. I'd rather use a popup window, but due to all the popup blockers in use, I have to use another method, a div that has absolute positioning. The damn...
0
by: torchestra | last post by:
I have two activex object. I have to different classes; one with z-index:2000 and one with z-index:1. Both classes have absolute positioning and left and top set to 0. The two objects is located...
0
by: torchestra | last post by:
I have two activex object. I have to different classes; one with z-index:2000 and one with z-index:1. Both classes have absolute positioning and left and top set to 0. The two objects is located...
2
by: reynoldlariza | last post by:
Can somebody please help me, i tried playing around with IE6 and Firefox 2.0 browser for setting zIndexes and hide & show of divs. It seems to work to both. I tried repeatedly clicking on different...
1
by: Sabbaath | last post by:
But haven't really found anything that answers the issue. Basically, I have a js function that has these lines in it, among others: var navSectionBg = document.getElementById("mainNav_" +...
2
by: zz2uk1 | last post by:
Im trying to show a text box above a div in a simple webpage. Im viewing in IE 7 and Chrome and the text box is always below the div, although I have set the zIndex fairly high. I have included...
1
by: gandhi.vishal | last post by:
Hello, I have an issue. I'm not seeing the reportviewer data at all. The column names come up fine but there is no data in the report table. Here is what I'm doing I created a dataset with the...
1
Claus Mygind
by: Claus Mygind | last post by:
How come I can set this style element document.getElementById("popTime").style.left = "0px"; but not this document.getElementById("freqJobDiv").style.zIndex = "20"; I have two nested...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.