PDA

View Full Version : Can nested divs appear in same position?



themind
09-23-2005, 05:14 AM
Here is an interesting one. I found and modified a script that does exactly what I want--toggles between CSS classes (visible/invisible) to show supporting text for pictures when you mouseover their respective links. View at:

http://www.pdmdigital.com/webpages.htm

I have TWO issues. First and more importantly, I need the text to appear in the exact same position on the left. I figured that nested divs, if not visible at the same time, could occupy the same exact space--I was wrong. I tried to compensate by adding margins & such, but it just doesn't work/is inconsistent. There must be a better way to due this?

Second (and the first may very well solve this), when I mouse over the links, the container (the div that holds everything else) for the main body gets longer (at the bottom of the page) and annoyingly jumps up and down on mouseover & mouseout. I'm fairly sure the first will remedy the second, but I don't know where to begin to fix the first. As always any help is truly appreciated, thanks for reading this, theMind-

jscheuer1
09-24-2005, 09:35 AM
Use the display property of divisions rather than their visibility when toggling them. Don't nest them though, display is inherited by contained elements. The difference between visibility:hidden and display:none is that with visibility, space is reserved for the invisible element. With display:none, no space is used. That way, if all of your divisions are the same size, they will simply replace one another. The opposite of display:none for divisions is display:block. Better still might be to use just one division. Then instead of hiding and showing multiple divisions, you could just change the innerHTML or the text node of the existing division.

themind
09-24-2005, 08:09 PM
John you're a life saver. I had no idea that "display" didn't reserve div space. It is an interesting nuance that could be used to come up with some cool stuff. Thanks again, the page looks/works great!

www.pdmdigital.com/webpages.htm