muckerz Posted November 20, 2013 Share Posted November 20, 2013 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!!!! Quote Link to comment Share on other sites More sharing options...
Ch0cu3r Posted November 21, 2013 Share Posted November 21, 2013 (edited) 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.