Photo gallery help

[muckerz]

Hey guys!

 

Hope i'm posting this in the right place!

 

I'm making a simple site with an image gallery.

 

using some simple code i found after a quick google, i've got a gallery all set up and working.

I'm trying to tweak it to what i need, but getting nowhere fast 

 

have a look at the gallery here

 

What i'm trying to do is have each image display on its own line, instead of having 3 images per line.

Once I've accomplished that, I want to move the title and description to the right hand side of the image and add a line break inbetween the two.

 

Here's the code i've got so far for displaying the images...

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ("Error connecting to database");
mysql_select_db($dbname) or die ("Error selecting the database");

function cleanString($caption="")
{
	$removeunderscore = str_replace("_"," ",$caption);
	$removedash = str_replace("-"," ",$removeunderscore);
	$removedimensions = str_replace("1366x768","",$removedash);
	$cleanstring = str_replace(".jpg","",$removedimensions);	
	return $cleanstring;
}
$sql = "SELECT  * FROM photos ORDER BY id ASC";
$query = mysql_query($sql);
while($row = mysql_fetch_array($query))
{
	$file = $row['photo_name'];
	$title = $row['title'];
	$description = $row['description'];
	
	echo '<div id="container">
  			<div id="thumbnail"><a href="uploads/'. $file .'"  title="'.cleanString($title).'" class="thickbox"><img src="thumbnails/thumb_'.$row['id'].'.jpeg" width="282" height="158" alt="image" /></a></div>
  		    <div id="info"><strong>' .cleanString($title).cleanString($description).'</div><br>
		  </div>';
}
?>
<div class="clear"></div>
</div>

This page calls CSS from two CSS files...

 

style.css

and

thickbox.css

 

So can anyone point me in the right direction?

I'm not too hot with CSS, which is a shame as i'm sure its the key here.

 

Thanks in advance guys!!!!

 

 

 

[Ch0cu3r]

 

What i'm trying to do is have each image display on its own line, instead of having 3 images per line.

Remove the    float: left; from #container css definition.

 

 

Once I've accomplished that, I want to move the title and description to the right hand side of the image

First increase the width or remove it (    width: 282px;)  for #container css definition

 

And then remove the float from #thumbnail and #info. Set them to display as inline.

#thumbnail, #info {
  display: inline;
}

 

and add a line break inbetween the two.

Change

 

cleanString($title).cleanString($description)

 

to

 

cleanString($title) . '<br />' . cleanString($description)

 

NOTE: When using CSS ids should be only be used once. You should be using classes instead.

Edited November 21, 2013 by Ch0cu3r