Posted by Arjen on 12/20/06 16:42

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%;
}

[Back to original message]