Can I hide relatively proistioned divs with z-index?

[deko]

Is there any way to work around the blank space created by hidden divs? I'm
trying to use a relatively postioned divs with show/hide behaviors to
annotate an image. The divs show/hide onMouseOver/onMouseOut but leave a
blank space on the page when hidden (the space where the divs would normally
be). Is it possible to use z-indexing to put regular content where the
hidden divs would be? When I try to do this, the layers don't unhide as
they should. Does the JavaScript get screwed up when the relatively
positioned div is nested? Or is there some other reason why the layer won't
unhide when nested in a div with a higher z-index?

[Gus Richter]

deko wrote:

Is there any way to work around the blank space created by hidden divs? I'm
trying to use a relatively postioned divs with show/hide behaviors to
annotate an image. The divs show/hide onMouseOver/onMouseOut but leave a
blank space on the page when hidden (the space where the divs would normally
be).
Static and Relative are in the normal flow and therefore take up real
estate. A Floated element is out of the normal flow, as are Absolute and
Fixed and do not take up any real estate.
Is it possible to use z-indexing to put regular content where the
hidden divs would be? When I try to do this, the layers don't unhide as
they should. Does the JavaScript get screwed up when the relatively
positioned div is nested? Or is there some other reason why the layer won't
unhide when nested in a div with a higher z-index?

No need to use z-index, simply use an Absolute positioned DIV to
Annotate/Popup. Here's some code for you to evaluate. Place your text or
image, to call an annotation/popup when moused over, inside a link like so:

<a href="" onclick="return false" onMouseOver="show('firstDiv')"
onMouseOut="hide('firstDiv')" style="text-decoration:none;">
<div>
a body of text or image
(The image does not need to be in a DIV. If the text is not inside a
DIV, then the mouseOver will work strictly only on the text portion.)
</div>
</a>

Then create your annotation/popup such as:

<!-- Popup Portions -->
<div id="firstDiv" style="position:absolute; top:250px; left:390px;
width:350px; color:black; font-family:sans-serif; background:#E6E6F3;
border:.25em solid #336699; padding:0 5px 0 5px; visibility:hidden;">
This 1^st DIV is <u>Absolute Model</u> where the positioning
of top and left are relative to the top left corner of the containing
block - in this case a DIV which has the same top and left as BODY
(viewport).
<pre>
position : absolute;
border : .25em solid #336699;
width : 350px;
top : 250px;
left : 390px;
padding : 0 5px 0 5px;
visibility : hidden;
</pre>
</div>

Of course, you may wish to move the styles into a stylesheet.

--
Gus

[deko]

> Static and Relative are in the normal flow and therefore take up real

estate. A Floated element is out of the normal flow, as are Absolute and
Fixed and do not take up any real estate.
10-4. That makes sense.
No need to use z-index, simply use an Absolute positioned DIV to
Annotate/Popup. Here's some code for you to evaluate. Place your text or
image, to call an annotation/popup when moused over, inside a link like so:

I am using Dreamweaver, which generates JavaScript for me, but I understand
what you are suggesting. The problem is accommodating different screen
resolutions - the divs show up in the wrong place if user is viewing with
different resolution. You can view a beta page at
http://www.clearpointsystems.com/software02.php - click on the "Organize XP"
icon on the top of the page and you will be taken to a named anchor (with
the image below). You will notice a big gap between the top section of the
page and the image, which is what I'm trying to get rid of, or work around
somehow. I have one show/hide behavior working - mouse over the vertical
stack of buttons on the left side of the image. You will notice swap image
behaviors on several other areas in the image - each one needs to have a
show/hide div behavior attached to the corresponding hotspot.

So, what I was thinking (suggested in my original post) is that I could put
the content above the image in a (relatively positioned) layer on top of the
hidden divs, thus reclaiming the space they consume. I had trouble with
this and I'm not sure if this is possible - am I barking up the wrong tree?
Another option I tried is putting the hidden divs below the image and just
leaving the trailing blank space - but again I had trouble - is it possible
to put the divs after the image? Or is this in violation of document flow
requirements ?
Of course, you may wish to move the styles into a stylesheet.

Yes, here is a sample of a few of the divs (there are about 30 total) - I've
given each one a different z-index. Not sure if that is really necessary...

#quickSearch {
position:relative;
left:-960px;
top:550px;
width:371px;
height:190px;
z-index:1001;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
border: 1px solid #000000;
padding: 15px 15px 13px 15px;
background-color: #FFFFCC;
visibility: hidden;
}

#apptStatus {
position:relative;
left:0px;
top:-300px;
width:371px;
height:190px;
z-index:1002;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
border: 1px solid #000000;
padding: 15px 15px 13px 15px;
background-color: #FFFFCC;
visibility: hidden;
}

#txStatus {
position:relative;
left:200px;
top:-250px;
width:371px;
height:190px;
z-index:1003;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
border: 1px solid #000000;
padding: 15px 15px 13px 15px;
background-color: #FFFFCC;
visibility: hidden;
}

#actionButtons {
position:relative;
left:-100px;
top:300px;
width:371px;
height:190px;
z-index:1004;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
border: 1px solid #000000;
padding: 15px 15px 13px 15px;
background-color: #FFFFCC;
visibility: hidden;
}

Thanks for your reply!

[deko]

As a follow up to my previous post, this page will is a better example:

http://www.clearpointsystems.com/software08.php

The divs are visible on load for testing. After mousing around the image,
you will see the divs hide themselves. I have not set the coordinates for
each div in the style sheet yet, but they will all be within the image area
when I'm done. Nevertheless, the space they occupy on load is real estate I
don't want to give up. I assume that even after I set the coordinates, the
divs will still occupy space above the image?

[kchayka]

deko wrote:

I am using Dreamweaver, which generates JavaScript for me,
The tool you use should be irrelevant, unless you make the bold
assumption that the tool knows how to write code better than a
knowledgable person. ;) Hint: it doesn't.
The problem is accommodating different screen
resolutions - the divs show up in the wrong place if user is viewing with
different resolution. You can view a beta page at
http://www.clearpointsystems.com/software02.php

The problem is not accomodating different screen resolutions, the
problem is that the tool doesn't know how to deal with any unit other
than px, because you have not directed it to do otherwise. After looking
at this page for a while, I get the feeling that you are making this way
more complicated than it needs to be. You are doing something in
JavaScript that could just as easily be done with the title attribute
along with proper alt text.

BTAIM, your code is invalid. Id must be unique for an element within a
page, but you've used stuff like id="blulink" repeatedly. These should
be class selectors instead. You must fix this, along with any other
coding errors before the code can be properly debugged.

You have at least 72 HTML errors to fix on this page alone:
<URL:http://validator.w3.org/check?uri=http%3A//www.clearpointsystems.com/software02.php>

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[deko]

> The problem is not accomodating different screen resolutions, the

problem is that the tool doesn't know how to deal with any unit other
than px, because you have not directed it to do otherwise. After looking
at this page for a while, I get the feeling that you are making this way
more complicated than it needs to be. You are doing something in
JavaScript that could just as easily be done with the title attribute
along with proper alt text.
Hi and thanks for the reply. I looked at Title and Alt - neither is robust
enough for my purposes. One thing I noticed is that there is a delay before
they appear, and then they disappear after a few seconds. Also, with a div
I have all the formatting control I want.

As for screen resolutions - the relatively positioned div DOES accomodate
different resolutions (in my situation). while the absolutely positioned div
does not. I've almost got it working:

http://www.clearpointsystems.com/software11.php

What I did was put the hidden divs below the image. So there is trailing
white space on the page - perhaps I'll find a way to get rid of it, but if
not, I can live with it.
BTAIM, your code is invalid. Id must be unique for an element within a
page, but you've used stuff like id="blulink" repeatedly. These should
be class selectors instead. You must fix this, along with any other
coding errors before the code can be properly debugged.

yeah, I know... I've been meaning to rework that... among other things :)
So all I need to do is replace the "#" with a "." in the stylesheet - is
that correct?

[Gus Richter]

deko wrote:

So all I need to do is replace the "#" with a "." in the stylesheet - is
that correct?

id=blulink should be id="blulink"
In the stylesheet change #blulink to .blulink
and in the HTML change id=blulink to class="blulink"

--
Gus

[Gus Richter]

deko wrote:

As a follow up to my previous post, this page will is a better example:

http://www.clearpointsystems.com/software08.php

The divs are visible on load for testing. After mousing around the image,
you will see the divs hide themselves. I have not set the coordinates for
each div in the style sheet yet, but they will all be within the image area
when I'm done. Nevertheless, the space they occupy on load is real estate I
don't want to give up. I assume that even after I set the coordinates, the
divs will still occupy space above the image?

Relative will retain the real estate at the original location.

You could investigate a different method with Absolute.
Positioning is relative to the viewport. The way you have it right now,
the viewport is the whole canvas, BODY.
If you put your total area to annotate into a Relative Wrapper DIV and
the popups are within this wrapper, then the viewport will be the
Wrapper as far as the popups are concerned. Thereafter the positioning
will be relative to the Wrapper and thereby easier positioned in close
proximity exactly where desired.

If you insist on using Relative, you could try thinking out a way to
place the popups off-screen, say to the left of the left margin, so
that no viewable real estate is used and then move the one that you
want (sliding or snapping) into viewable position.

You could also make the popups stick until clicked and dragable by the
viewer.

--
Gus

[kchayka]

deko wrote:

I looked at Title and Alt - neither is robust
enough for my purposes. One thing I noticed is that there is a delay before
they appear, and then they disappear after a few seconds.
FYI there is a non-JS pop-up method demonstrated at
<URL:http://www.meyerweb.com/eric/css/edge/popups/demo.html>

The point is, there is always more than one solution. BTW, you do know
what alt text is really for, don't you? Take a look at your page with
image loading disabled and you'll find out quick enough. ;)
with a div I have all the formatting control I want.
It's a myth that the author has any real "control" over how a page
displays. Sorry, but the formatting on your pages is just plain nasty,
especially when text is zoomed. And in my case, it's unreadable if I
don't zoom text. Have a look at one of your pages in any mozilla browser
at 150% zoom. ish. Even at 100% the layout is off.
As for screen resolutions - the relatively positioned div DOES accomodate
different resolutions (in my situation). while the absolutely positioned div
does not.
It does not adjust very well for my situation, so guess I would have to
change my browsing environment if I want the page to display without so
many ill effects. That isn't going to happen, of course. ;)
I've almost got it working:

http://www.clearpointsystems.com/software11.php
"Working" is in the eye of the beholder. ;) I'll assume you mean you're
getting acceptable results in IE6 at a particular text size, window
size, and screen resolution (which is not the same as window size).
That's a pretty narrow view of the world, even if it is a large part of
your target audience.
What I did was put the hidden divs below the image. So there is trailing
white space on the page - perhaps I'll find a way to get rid of it, but if
not, I can live with it.

So you leave several screens worth of empty space between the large
graphic and the additional thumbs/info at the bottom of the page? I
counted about 10 of them at an 800x600 window size. Somehow, that
doesn't strike me as very professional or user-friendly. Seems to me
that would have a negative effect on your credibility as a software
vendor. If I have trouble with your web site, the confidence level in
your product goes downhill pretty fast.

You really should use absolute positioning for the hidden divs. If you
put them and the table of images inside a relatively positioned div, you
should be able to position the pop-ups relative to the table and get rid
of the excessive extraneous space.

div.popup-container {position: relative}
div#quicksearch {
position: absolute; /* relative to parent popup-container */
top: 100px;
left: 10px;
}

<div class="popup-container">
<table... of screen shot images>
<div id="quicksearch">...
</div>

I didn't test this, but it should give the desired results.

your code is invalid.

So all I need to do is replace the "#" with a "." in the stylesheet - is
that correct?

You know, if you try to design layouts with CSS without understanding
the fundamentals, you are bound to run into just the kind of trouble
you're having now. Get a book, take a class...just stop hacking away at
failed layouts, please.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[deko]

> It does not adjust very well for my situation, so guess I would have to

change my browsing environment if I want the page to display without so
many ill effects. That isn't going to happen, of course. ;)
Are the problems only when you zoom? Would zooming problems be ameliorated
by including more percent-based padding or bigger margins?
"Working" is in the eye of the beholder. ;) I'll assume you mean you're
getting acceptable results in IE6 at a particular text size, window
size, and screen resolution (which is not the same as window size).
That's a pretty narrow view of the world, even if it is a large part of
your target audience.
This is true, I'll have to admit. I've downloaded Opera and Netscape - I'll
test with these as well. At the risk of exposing my ignorance, what is a
mozilla-based browser?
So you leave several screens worth of empty space between the large
graphic and the additional thumbs/info at the bottom of the page? I
counted about 10 of them at an 800x600 window size. Somehow, that
doesn't strike me as very professional or user-friendly. Seems to me
that would have a negative effect on your credibility as a software
vendor. If I have trouble with your web site, the confidence level in
your product goes downhill pretty fast.
I've made some adjustments so the extra space is at the very end. There is
by design a small space between the top content and the image (just enough
for bleed effect of white space). I'm still working on a way to eliminate
the vast grey expanse at the bottom - perhaps with display:inline? Here's
the latest: http://www.clearpointsystems.com/software12.php
You really should use absolute positioning for the hidden divs. If you
put them and the table of images inside a relatively positioned div, you
should be able to position the pop-ups relative to the table and get rid
of the excessive extraneous space.

Now that sounds interesting. I'll give it a whirl.

Your criticisms have been very constructive, for the most part. I have Eric
Meyer's "Cascading Style Sheets" by O'Reilly. If you can recommend another
good book, please let me know. Thanks again for your help.

[deko]

> You could investigate a different method with Absolute.

Positioning is relative to the viewport. The way you have it right now,
the viewport is the whole canvas, BODY.
But is this not necessary? The screen shot image (and the image in the
header bar) will have different coordinates in different resolutions,
correct? For that reason, I use the grey space on the side of the page as
filler for anything greater than 800x600.
If you put your total area to annotate into a Relative Wrapper DIV and
the popups are within this wrapper, then the viewport will be the
Wrapper as far as the popups are concerned. Thereafter the positioning
will be relative to the Wrapper and thereby easier positioned in close
proximity exactly where desired.

If you insist on using Relative, you could try thinking out a way to
place the popups off-screen, say to the left of the left margin, so
that no viewable real estate is used and then move the one that you
want (sliding or snapping) into viewable position.

You could also make the popups stick until clicked and dragable by the
viewer.

I appreciate your suggestions and will try each of them. This was my first
attempt at something like this. Here's the latest:
http://www.clearpointsystems.com/software12.php

[Brian]

deko wrote:

what is a mozilla-based browser?

Any browser that uses the Gecko rendering engine to display pages. That
includes Mozilla (seamonkey), Firefox, Camino, and Galeon. Some of these
browsers use Mozilla's interface (menus, scroll bars, etc.), others use
their own interface. All use the Gecko layout engine to display web pages.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/

[deko]

> If you put your total area to annotate into a Relative Wrapper DIV and

the popups are within this wrapper, then the viewport will be the
Wrapper as far as the popups are concerned. Thereafter the positioning
will be relative to the Wrapper and thereby easier positioned in close
proximity exactly where desired.

I tried the below code, but I've got something wrong.
http://www.clearpointsystems.com/software14.php

*** html:

<div class="oxpMainForm">
<div id="quicksearch"> Quick Search </div>
</div>

*** css:

.oxpMainForm {
position:relative;
visibility: visible; /* for testing */
/* visibility: hidden; */
font-family:Tahoma, Veranda, Arial, sans-serif;
font-size:24px;
border: 1px solid #000000;
padding: 15px 15px 13px 15px;
background-color: #FFFFCC;

}

#quicksearch {
left:30px;
top:-350px;
width:300px;
height:150px;
z-index:240;
}