can anyone help images not going below each other

[deansaddigh]

IF you look here http://www.languageschoolsuk.com/school_details.php?id=53

 

my gallery box is expanded i want the thumbs to go underneath when thew containers gets full

 

heres the css code on the ul li

 

#pikame li {
margin-top: 5px;
  float: left;
  
  
  
}

[deansaddigh]

Heres my page.

 

http://www.languageschoolsuk.com/school_details.php?id=53

 

Theres a couple of problems with the gallery on the right.

One the shark picture seems to expand out of its contents and its really annoiyng me, and 2 i want to make the whole thing bigger to about 400px. so the images are a lot bigger.

 

Can anyone help

 

Heres the css

 

/* pikachoose  { */

.pikachoose {

margin: 0 auto 50px 1em;

padding: 5px;

width: 300px;

background: #eee;

border: 1px #ddd solid;



}



.pikachoose ul {

padding: 5px;

width: 310px;

margin: 0;

overflow: hidden;

}



.pikachoose ul li {

float: left;

border: 1px solid #eee;

background: #ccc;

margin: 0 6px 4px 0;

position: relative;

overflow: hidden;

}



.pikachoose ul li div img {

position: relative;

cursor: pointer;

}



.pika_main {

width: 301px;

height: 196px;

display: block;

position: relative;

}



.pika_main_img {

position: absolute;

top: 2px;

left: 2px;

}



.pika_back_img {

position: relative;

top: 0px;

}



.pika_subdiv {

position: relative;

border: 1px solid #aaa;

background: #eee;

padding: 2px;

}



.pika_subdiv img, .pika_subdiv a img{

border:none;

  width:295px;

}


.pika_caption{

width: 295px;

height: 16px;

padding-top: 4px;

text-align: center;

position: absolute;

bottom: 10px;

left: 3px;

color: white;

background: url('includes/PikaChoose_3.0/black.png') top left;

}





.pika_caption a{color:white;}

.pika_play{position:absolute;z-index:1;left:50%;margin-left:-25px;width:50px;top:5px;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('includes/PikaChoose_3.0/play.png') top center no-repeat;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;display: block;width:50px;height:50px;background:url('includes/PikaChoose_3.0/pause.png') top center no-repeat;}

.pika_navigation a{font-size: 12px; text-decoration: none;}
.pika_navigation a:hover{text-decoration: underline;}
.pika_navigation{padding-top:10px;clear:both;text-align:center;}

/* if you want to 'hide' these jus make their height and width 1px */
.pika_prev_hover{position:absolute;top:5px;left:5px;height:456px;width:100px;background:url('includes/PikaChoose_3.0/rewind.png') top left no-repeat;}
.pika_next_hover{position:absolute;top:5px;right:5px;height:456px;width:100px;background:url('includes/PikaChoose_3.0/fastf.png') top right no-repeat;}

 

And here is myphp where i display the image

 

// Open the div for the images				
			echo '<div class="pikachoose" style="float: right;">';
			echo '<div class="pikamain">';
			echo '<ul id="pikame">';
			// Image loop
			while($copiedrow = mysql_fetch_array($copiedresult))
			{
				$imagename = $copiedrow ['image_name'];
				$image = 'Admin/'.$copiedrow['path'] . '/' . $copiedrow ['image_name'];

                    echo '<li><img class="pika_main_img" src="'.$image.'"/ ><span>'.$imagename.'</span></li>';



			}
			// Close div
			echo '</ul>';
			echo '</div>';
			echo '</div>';

 

I have been doing this all day and ive only got so far.

can anykind soul please help me

 

[Orionsbelter]

You need to put this in the CSS forum you will find more help there than here.

[Orionsbelter]

This code is not your its pikachoose this means that you should have a doc explain its use and how to make changes.

[Orionsbelter]

.pikachoose {

margin: 0 auto 50px 1em;

padding: 5px;

width: 300px;  /* maybe this is it?? change it too 400px */

background: #eee;

border: 1px #ddd solid;



}

[bbaker]

like blmg911 said.....these are CSS questions

 

with the shark expanding below the thumbnails.....for "pika_subdiv" set a height  & add overflow: hidden; in the CSS.  play with the CSS values.  I went to your sight & modified it locally using Firebug & changing the widths in the CSS seem to work just fine.