pictures move while loading

[Arjen]

Hi, I have a question about this page:
http://www.hondenpage.com/fotos/p_user_id_22.php

As you can see there are some pics there all with max width=125px and
max height = 125px. When the page loads the pictures jump around the
page untill all the images are loaded. Is there a good way to prevent
this behaviour without knowing the exact dimentions of the images ?

Basically what I want is
50% on the left for the full image
50% on the right for the thumbs with as much thumbs placed on a line as
possible. My solution (aldought probably not a verry pretty one .. im
still learning) does the trick but I dont like the side effects/

Arjen

Ive tested it in ie6+7 and ff 1+2

This is a simple version:

<div id="fullfoto"><p>full image goes here</p></div>
<div id="thumb"><p>
<div class ="foto"><img src="somepic.jpg" onclick="showpic('104')"
alt="sometitle"/></div>

<div class ="foto"><img src="somepic2.jpg" onclick="showpic('104')"
alt="sometitle2"/></div>
</p></div>

and the css
#content .foto
{
float:left;
height: 125px;
width: 125px;
}

#fullfoto p{
width:50%;
float:left;
}

#thumb{
float:right;
width: 50%;
}

 

[Arjen]

Arjen schreef:

Hi, I have a question about this page:
http://www.hondenpage.com/fotos/p_user_id_22.php

Ive tested it in ie6+7 and ff 1+2

Forgot .. it only happens with ie. ff displays a small gray square
untill the pics are loaded wich is fine

Arjen

 

[Bergamot]

http://www.hondenpage.com/fotos/p_user_id_22.php

When the page loads the pictures jump around the
page untill all the images are loaded. Is there a good way to prevent
this behaviour without knowing the exact dimentions of the images ?

The only way to prevent the jumping around is to specify the image
dimensions in the width and height HTML attributes. Since you are using
php, you can easily get this info via function getimagesize and plug it
in as you go.

 

[Toby Inkster]

The only way to prevent the jumping around is to specify the image
dimensions in the width and height HTML attributes.

or CSS.

 

[Arjen]

Toby Inkster schreef:

or CSS.

Ok thx both ... I understand that part.

What I dont understand is why the images initally go beyond the css box
made for them. Dis you mean with 'or CSS' that there is a way around this ?

Arjen