keep successive text/images in same place on the page?

Hello,

I have the code below in which the play1.gif image is visible and when
the associated sound has been played the the 2 images same1.gif and
different1.gif appear. Once one of these has been selected the 3
images and the title disappear and the second title and play image
appear etc.

Problem is that for sucessive Test titles the titles and the
associated images move down the page. I am using the following css.

..hiddenDiv2 {
display: none;
}
..visibleDiv2{
display: block;
}

Is it possible to keep the successive titles and images in the same
place on the page?

Cheers

Geoff



<div id="test1" class="visibleDiv2">
<h3>Test 1:</h3>
<IMG alt="image" id="a10" src="../assets/images/play1.gif"
onclick="musicSelect(this);">
</div>
<div id="test11" class="hiddenDiv2">
<IMG alt="image" id="a11" src="../assets/images/same1.gif"
onclick="checkThisFirst(this);">
<IMG alt="image" id="a12" src="../assets/images/different1.gif"
onclick="checkThisSecond(this);">
</div>

<div id="test2" class="hiddenDiv2">
<h3><em>Test 2:</em></h3>
<IMG alt="image" id="a20" src="../assets/images/play1.gif"
onclick="musicSelect(this);">
</div>
<div id="test21" class="hiddenDiv2">
<IMG alt="image" id="a21" src="../assets/images/same1.gif"
onclick="checkThisFirst(this);">
<IMG alt="image" id="a22" src="../assets/images/different1.gif"
onclick="checkThisSecond(this);">
</div>

On 2008-04-25, Geoff Cox <gcox (AT) freeuk (DOT) notcom> wrote:

Hello,

I have the code below in which the play1.gif image is visible and when
the associated sound has been played the the 2 images same1.gif and
different1.gif appear. Once one of these has been selected the 3
images and the title disappear and the second title and play image
appear etc.

Problem is that for sucessive Test titles the titles and the
associated images move down the page. I am using the following css.

.hiddenDiv2 {
display: none;
}
.visibleDiv2{
display: block;
}

Is it possible to keep the successive titles and images in the same
place on the page?

It sounds like you want to use

..hiddenDiv2 {
visibility: hidden;
}
..visibleDiv2{
visible: visible;
}

instead. Display: none makes the element disappear, which alters the
position of other elements. Visibility: hidden just makes it invisible.

On Fri, 25 Apr 2008 16:38:00 -0500, Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-04-25, Geoff Cox <gcox (AT) freeuk (DOT) notcom> wrote:
Hello,

I have the code below in which the play1.gif image is visible and when
the associated sound has been played the the 2 images same1.gif and
different1.gif appear. Once one of these has been selected the 3
images and the title disappear and the second title and play image
appear etc.

Problem is that for sucessive Test titles the titles and the
associated images move down the page. I am using the following css.

.hiddenDiv2 {
display: none;
}
.visibleDiv2{
display: block;
}

Is it possible to keep the successive titles and images in the same
place on the page?

It sounds like you want to use

.hiddenDiv2 {
visibility: hidden;
}
.visibleDiv2{
visible: visible;
}

Ben,

the snag with above is that the successive tests and images move down
the page - the block idea keeps them in the same place ...

Cheers

Geoff

instead. Display: none makes the element disappear, which alters the
position of other elements. Visibility: hidden just makes it invisible.

On Fri, 25 Apr 2008 16:38:00 -0500, Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-04-25, Geoff Cox <gcox (AT) freeuk (DOT) notcom> wrote:
Hello,

I have the code below in which the play1.gif image is visible and when
the associated sound has been played the the 2 images same1.gif and
different1.gif appear. Once one of these has been selected the 3
images and the title disappear and the second title and play image
appear etc.

Problem is that for sucessive Test titles the titles and the
associated images move down the page. I am using the following css.

.hiddenDiv2 {
display: none;
}
.visibleDiv2{
display: block;
}

Is it possible to keep the successive titles and images in the same
place on the page?

It sounds like you want to use

.hiddenDiv2 {
visibility: hidden;
}
.visibleDiv2{
visible: visible;
}

Ben,

In fact contrary to my other reply it seems that it is
postion:absolute that keeps successive titles and images in the same
place ...?

Cheers

Geoff

instead. Display: none makes the element disappear, which alters the
position of other elements. Visibility: hidden just makes it invisible.

In article <69m514tsriaqub03jaup70mtonv46lie6q (AT) 4ax (DOT) com>,
Geoff Cox <gcox (AT) freeuk (DOT) notcom> wrote:

Ben,

In fact contrary to my other reply it seems that it is
postion:absolute that keeps successive titles and images in the same
place ...?

position: absolute has a bad habit of doing this sort of thing.

--
dorayme

On Sat, 26 Apr 2008 17:53:25 +1000, dorayme
<doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <69m514tsriaqub03jaup70mtonv46lie6q (AT) 4ax (DOT) com>,
Geoff Cox <gcox (AT) freeuk (DOT) notcom> wrote:

Ben,

In fact contrary to my other reply it seems that it is
postion:absolute that keeps successive titles and images in the same
place ...?

position: absolute has a bad habit of doing this sort of thing.

Yes - but that's what I want! Except that with position absolute the
titles and images can be on the top of the text in some pages ...

Cheers

Geoff

In article <eco514lul30t33n81e4s22v6b1vb9s4rva (AT) 4ax (DOT) com>,
Geoff Cox <gcox (AT) freeuk (DOT) notcom> wrote:

On Sat, 26 Apr 2008 17:53:25 +1000, dorayme
doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <69m514tsriaqub03jaup70mtonv46lie6q (AT) 4ax (DOT) com>,
Geoff Cox <gcox (AT) freeuk (DOT) notcom> wrote:

Ben,

In fact contrary to my other reply it seems that it is
postion:absolute that keeps successive titles and images in the same
place ...?

position: absolute has a bad habit of doing this sort of thing.

Yes - but that's what I want!

I suspected you did! Let me add <g> to help along here.

--
dorayme

On Sat, 26 Apr 2008 18:19:09 +1000, dorayme
<doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <eco514lul30t33n81e4s22v6b1vb9s4rva (AT) 4ax (DOT) com>,
Geoff Cox <gcox (AT) freeuk (DOT) notcom> wrote:

On Sat, 26 Apr 2008 17:53:25 +1000, dorayme
doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <69m514tsriaqub03jaup70mtonv46lie6q (AT) 4ax (DOT) com>,
Geoff Cox <gcox (AT) freeuk (DOT) notcom> wrote:

Ben,

In fact contrary to my other reply it seems that it is
postion:absolute that keeps successive titles and images in the same
place ...?

position: absolute has a bad habit of doing this sort of thing.

Yes - but that's what I want!

I suspected you did! Let me add <g> to help along here.

agh!!!