Click here to get back home

keep successive text/images in same place on the page?
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
keep successive text/images in same place on the page? Geoff Cox 04-25-2008
Posted by Geoff Cox on April 25, 2008, 1:48 pm
Please log in for more thread options
 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>

Posted by Ben C on April 25, 2008, 5:38 pm
Please log in for more thread options
> 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.

Posted by Geoff Cox on April 26, 2008, 3:22 am
Please log in for more thread options

>> 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.


Posted by Geoff Cox on April 26, 2008, 3:27 am
Please log in for more thread options

>> 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.

Posted by dorayme on April 26, 2008, 3:53 am
Please log in for more thread options

> 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

Similar ThreadsPosted
Starting a video from a particular place July 17, 2008, 2:56 pm
IE6 elements out of place until mouseover? September 25, 2008, 5:54 pm
XTech 2006 -- The Gathering Place for Web Technologists April 20, 2006, 2:11 pm
Need help creating a "Click absolutely ANYWHERE on this page" link for an HTML page with no content February 7, 2007, 5:40 pm
Activating parent page link from 'child page' - revised June 3, 2005, 11:30 am
referencing the index.html page from another page in the same directory July 26, 2004, 12:48 am
extract page structure from page source? September 19, 2006, 1:46 pm
how to make a link to an old page go to a new page without displaying anything August 20, 2007, 3:08 am
Update a web page with contents from another web page. January 8, 2005, 1:59 pm
I would like to sell my web page - You can run your own business with this web page! June 6, 2007, 4:24 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap