Jump to content

image grid gone wrong


Recommended Posts

I'm having trouble with getting the image in the right order. I'm trying to filter images gotten from the database based on the button link. I got the reference from http://www.evoluted.net/thinktank/web-development/jquery-filtering. I have about 20+- buttons and for each button, I am getting all the picture that is being under that filter button through database. (Not sure where to post this, but I think it's more suited to be under css). Basically, I have gotten the css all wrong (my css is basic too ><), so I hope you could help me(where i have gone wrong) and give some pointers.

Here is css:

/*- FILTER OPTIONS -*/ul#filterOptions {	width: auto;	height: auto;	margin-top: 60px ;	;	overflow: hidden;	list-style: none;}ul#filterOptions li {	height: 52px;	margin-right: 2px;	float: left;}ul#filterOptions li a {	height: 50px;	padding: 0 20px;	border: 1px solid #999;	background: #cfcfcf;	color: #fff;	font-weight: bold;	line-height: 50px;	text-decoration: none;	display: block;	list-style: none;}ul#filterOptions li a:hover {	background: #c9c9c9;	list-style: none;}ul#filterOptions li.active a {	background: #999;	list-style: none;}/*- -*//*- OUR DATA HOLDER -*/#filterBody {	width: 100%;	height: 100%;	overflow: hidden;	list-style: none;}#filterBody div.item {	width: 200px;	height: 200px;	float: left;	text-align: center;}#filterBody div.item h3 {	margin-top: 10px;	font-size: 16px;	line-height: 20px;}/*- -*/

My html/php code looks like this (example of 1 button):

<!----------------- The filter buttons will be these-------------------------->    <ul id="filterOptions">      <li class="active"><a href="#" class="all">All</a></li>      <li><a href="#" class="IS_1">C#</a></li>      <li><a href="#" class="IS_2">PHP/MySQL</a></li>      <li><a href="#" class="IS_3">HTML/CSS</a></li>      <li><a href="#" class="IS_4">Java Enterprise Development</a></li>      <li><a href="#" class="IS_5">Mobile Application Development</a></li>      <li><a href="#" class="IM_1">Web Design</a></li>      <li><a href="#" class="IM_2">3D Modelling & Animations</a></li>      <li><a href="#" class="IM_3">Graphic Design</a></li>      <li><a href="#" class="IM_4">Video Editing</a></li>      <li><a href="#" class="IM_5">Motion Graphics & Effects</a></li>      <li><a href="#" class="CNET_1">Network Security</a></li>      <li><a href="#" class="CNET_2">RB Network Design & Implementation</a></li>      <li><a href="#" class="CNET_3">Broadband Access & WAN</a></li>      <li><a href="#" class="CNET_4">ICT Infrastructure Management</a></li>      <li><a href="#" class="CNET_5">Technopreneurship Project</a></li>      <li><a href="#" class="ITSM_1">Virtualisation & Cloud Computing</a></li>      <li><a href="#" class="ITSM_2">IT Service Operation & Management</a></li>      <li><a href="#" class="ITSM_3">Server Administration & Security</a></li>      <li><a href="#" class="ITSM_4">Database Administration & Management</a></li>      <li><a href="#" class="ITSM_5">Internet of Things App Development</a></li>      <!--<li><a href="#" class=""><?php  ?></a></li>-->    </ul><!--------------Filtered contents to be through the button--------------------><div id="filterBody">    <!----Filter contecnt of C#------>      <div class="item IS_1">      <p> Hello everybody!</p><?php  try{  //connect to the database  require("Connections/database.php");  		// array to hold errors        $errors = array(); 		 if(empty($errors)){          //select portfolio picture from database        $query = "SELECT p.*, u.skillset FROM portfolio p INNER JOIN userProfile u ON p.user_id = u.user_id WHERE u.skillset LIKE '%C#%' ";		//var_dump($query);        $stmt = $database->query($query);		  foreach ($stmt as $row) {			  //print out the data				  ?>               <div id= "imagesPortfolio">              <img src="<?php print htmlspecialchars($row['imagePath']); ?>" width="100" height="100">	               </div>             <?php			  //print $row['imageName'] . "t";			  //print $row['Name'] . "t";			//foreach($row['picPath'] as $picURL) {			//$picURL = $row['picPath'];			//'<img src="'. $dir. '/'. $file. '" alt="'. $file. $			//}			 // print '<img src="'. $picPath. '/'. $file. '" alt="'. $file;			  //print $row['introduction'] . "n";		  }		 }  foreach($errors as $error)    {        printf("<li>%s</li>", $error);		//exit();    }  } //end of try block     catch(PDOException $e){ // end of database dependent code, handle any errors    $status = empty($query) ? 'Connection failed':" Query failed: $query";    // application message    trigger_error("$status, Error: {$e->getMessage()}, File: {$e->getFile()}, Line: {$e->getLine()}");    // user message    $errors[] = 'Sorry, this page is not working at this time.';}?>        <!---The like system implementation----><!--        <div class="like-btn">Like</div>        <div class="dislike-btn"></div>-->      </div><!------Other buttons same as this buttons, only filter name different--------></div>

Is my concept wrong? >< I think i have misinterpreted somewhere, I just can't point out whether it's the css, the php or both ;-; I need to put 6 images in a row, and I'm not sure how to do this in the foreach loop too ><


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...