xox Posted March 16, 2011 Share Posted March 16, 2011 Hello, at the moment I'm displaying categories and subcategories in tree -category --subcategory -category2 --subcategory2 etc. I would like to display them in grid (3x4 - I have 12 categories) using divs The code for tree is <?php $query = "SELECT DISTINCT k.ID, k.name_category, pk.name_subcategory, pk.id_subcategory FROM `categories` AS k LEFT JOIN `subcategories` AS pk ON pk.id_main_category = k.ID"; $result = mysql_query($query) or die(mysql_error()); $currentCat = false; while($row = mysql_fetch_array($result)) { //so it doesn't repeat if($currentCat != $row['ID']) { echo "<br /><b>{$row['name_category']}</b>\n"; $currentCat = $row['ID']; } / ?> <br/><a href="?action=xxx<?php print $row['id_subcategory'];?>"><?php print $row['name_subcategory'] ?><br /></a> <br /> <? } ?> It should be something like this, but I will make images appear behind the text not on the side Quote Link to comment Share on other sites More sharing options...
xox Posted March 16, 2011 Author Share Posted March 16, 2011 anyone? Quote Link to comment Share on other sites More sharing options...
xox Posted March 17, 2011 Author Share Posted March 17, 2011 I wonder how image galleries work... they show everything in grid... Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 17, 2011 Share Posted March 17, 2011 HAve a look here with a little adjustment in color, width and padding it's precisely what you need. If you have questions let me know happy to help Quote Link to comment Share on other sites More sharing options...
xox Posted March 18, 2011 Author Share Posted March 18, 2011 Thanks for you help, this is what I was looking for! But now I have a slight problem with more than one line of text under the image,you can see in screen shot that text is on the right side... totally wrong place. The problem is also that the last two boxes doesn't have links like others have and "test text" isn't bold. Also how could I make image as background with this solution you've posted? The image with the problem described is attached to this post. CSS div.media-box{ float:left; margin-right:40px; overflow: hidden; background-color:#CCCCFF; padding:3px; margin-bottom: 10px; border:1px solid #fff; color:#CC0000; } .media-box img{ background-repeat: repeat-x; background-position: center; margin:5px; } HTML/PHP <?php $query = "SELECT DISTINCT k.ID, k.name_category, pk.name_subcategory, pk.id_subcategory FROM `categories` AS k LEFT JOIN `subcategories` AS pk ON pk.id_main_category = k.ID"; $result = mysql_query($query) or die(mysql_error()); $currentCat = false; while($row = mysql_fetch_array($result)) { //so it doesn't repeat if($currentCat != $row['ID']) { ?> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /><b>{$row['name_category']}</b> <?php $currentCat = $row['ID']; } ?> <p><a href="?action=xxx<?php print $row['id_subcategory'];?>"><?php print $row['name_subcategory'] ?></a></p> </div> <? } ?> [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 18, 2011 Share Posted March 18, 2011 You are asking a few thing and some are unclear, since i only see your processing script and not the final output. Php is a server side language and css wont give a crap about that. So what i need is your source code from the script you made a printscreen off. Now i am not sure what your level in css is, but css is all about selectors, #id's and .classes If you want to change the style of something you first need to target it, by either using a selector, an #id or a .class Now setting a background for for instance the div. you can use the class to select it and than set a background property. like so: div.mediabox{ background: #CCCCFF url(../images/my-background-image.gif) no-repeat; } But i recommend you either follow a tutorial on css, buy a book (best option), or google it, because we are here to help with code you tried, not to make it for you. Quote Link to comment Share on other sites More sharing options...
xox Posted March 18, 2011 Author Share Posted March 18, 2011 This is the whole code I've written <style> <!-- div.media-box{ float:left; margin-right:40px; overflow: hidden; background-color:#CCCCFF; padding:3px; margin-bottom: 10px; border:1px solid #fff; color:#CC0000; } .media-box img{ background-repeat: repeat-x; background-position: center; margin:5px; } --> </style> <?php $query = "SELECT DISTINCT k.ID, k.name_category, pk.name_subcategory, pk.id_subcategory FROM `categories` AS k LEFT JOIN `subcategories` AS pk ON pk.id_main_category = k.ID"; $result = mysql_query($query) or die(mysql_error()); $currentCat = false; while($row = mysql_fetch_array($result)) { //so it doesn't repeat if($currentCat != $row['ID']) { ?> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> //main category output <br /><b><?php echo $row['name_category']?></b> <?php $currentCat = $row['ID']; } //subcategory output ?> <p><a href="?action=xxxx&id=<?php print $row['id_subcategory'];?>"><?php print $row['name_subcategory'] ?></a> </p> </div> <? } ?> Well I know how to make image as background in CSS but is this possible inside .media-box img class? Because I will get images from mysql with something like this <img src="images/'.$row['path']." alt="" /> and I believe php inside css isn't possible. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 18, 2011 Share Posted March 18, 2011 I'll just repeat myself: php is a server side language, it happens on your server, and than it send s stuff to your browser. now that last thing is what i need to see, so not your php script, but the html. There is no way i can tell how to target something if i am looking at a php script. since i can't know how it will look after processing, so again, run the script, and copy paste the source of the output. run script in browser, right click, view source copy / paste. Quote Link to comment Share on other sites More sharing options...
xox Posted March 18, 2011 Author Share Posted March 18, 2011 I've misunderstood you, sorry. Here's the source <!-- START: Content --> <div class="contentContainer clearfix"> <div class="wideMainContent"> <div class="article"> <h6 class="font"> Testing</h6> <style> <!-- div.media-box{ float:left; margin-right:40px; overflow: hidden; background-color:#CCCCFF; padding:3px; margin-bottom: 10px; border:1px solid #fff; color:#CC0000; } .media-box img{ background-repeat: repeat-x; background-position: center; margin:5px; } --> </style> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /><b>Test text</b> <p><a href="?action=xxx&id=95">Text bottom</a> </p> </div> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /><b>Test text</b> <p><a href="?action=xxx&id=99">Text bottom</a> </p> </div> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /><b>Test text</b> <p><a href="?action=xxx&id=96">Text bottom</a> </p> </div> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /><b>Test text</b> <p><a href="?action=xxx&id=100">Text bottom</a> </p> </div> <p><a href="?action=xxx&id=103">Text bottom</a> </p> </div> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /><b>Test text</b> <p><a href="?action=xxx&id=105">Text bottom</a> </p> </div> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /><b>Test text</b> <p><a href="?action=xxx&id=101">Text bottom</a> </p> </div> <p><a href="?action=xxx&id=102">Text bottom</a> </p> </div> <input type="button" value="Back" onClick="history.go(-1);return true;"> </div> </div> Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 18, 2011 Share Posted March 18, 2011 well that's a little better, but a html page looks different: see below how a html page looks like.... Now also i recommend you learn this the proper way: (css = target something, and set a style.) Also this: <style> should be <style type="text/css"> Your php should start with <?php and not <? Also indent your code properly so it's easier to read for yourself and others on your team not to mention me or others helping out. Now the code below works. Notice the indentation, and how i wrapped everything in a div. That way we group all media boxes etcetera and that way we can target it. Also notice i gave the containers an ID this makes it not only better to read, but also easier to target! Hope this hellps, but seriously, buy a book, because your website will be a mess if you don't read about the whole idea behind css. (which is target, by using selectors ids or classes and set style to it) Good luck! cssfreakie. P.s. maybe have a look at my blog, quite some best practises there which you already omitted. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test stuff</title> <style type="text/css"> div.media-box{ float:left; margin-right:40px; overflow: hidden; background-color:#CCCCFF; padding:3px; margin-bottom: 10px; border:1px solid #fff; color:#CC0000; } .media-box img{ background-repeat: repeat-x; background-position: center; margin:5px; } .clearrow{ /* i added this class after the 3th media box you can use a for loop in php to do this automatically*/ clear:both; } </style> </head> <body> <!-- START: Content --> <div id="wrapper" class="contentContainer clearfix"> <div id="main" class="wideMainContent"> <div class="article"> <div id="mediaboxes"> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /> <b>Test text</b> <p> <a href="?action=xxx&id=95">Text bottom</a> </p> </div> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /> <b>Test text</b> <p> <a href="?action=xxx&id=95">Text bottom</a> </p> </div> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /> <b>Test text</b> <p> <a href="?action=xxx&id=95">Text bottom</a> </p> </div> <div class="clearrow"></div> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /> <b>Test text</b> <p> <a href="?action=xxx&id=95">Text bottom</a> </p> </div> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /> <b>Test text</b> <p> <a href="?action=xxx&id=95">Text bottom</a> </p> </div> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /> <b>Test text</b> <p> <a href="?action=xxx&id=95">Text bottom</a> </p> </div> </div> <div class="clearrow"></div> <div id=""> <p><a href="?action=xxx&id=102">Text bottom</a></p> <input type="button" value="Back" onClick="history.go(-1);return true;" /> </div> </div> </div><!-- end main --> </div><!-- end wrapper --> </body> </html> Quote Link to comment Share on other sites More sharing options...
xox Posted March 18, 2011 Author Share Posted March 18, 2011 The problem I'm getting now is that div is closed to early when more than one line is written. Can you help me out with it? Here's the source: <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /> <b>Test text</b> <p> <a href="?action=xxx&id=100">Text bottom</a> </p> </div><!-- here's the problem --> <p> <a href="?action=xxx&id=103">Text bottom</a> </p> </div> Your blog is already in my favorites. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 18, 2011 Share Posted March 18, 2011 well you must have missed something when copying than. this is the code <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /> <b>Test text</b> <p> <a href="?action=xxx&id=95">Text bottom</a> </p> </div> </div> <div class="clearrow"></div> <div id="extra"><!-- dont leave an id empty ---> <p><a href="?action=xxx&id=102">Text bottom</a></p> <input type="button" value="Back" onClick="history.go(-1);return true;" /> </div> As you can see there are 3 divs. Now your processing code might have produced it wrong, but that's hard to tell from here. What i would make is a script that only outputs, the media boxes. you include those in a wrapper div. Quote Link to comment Share on other sites More sharing options...
xox Posted March 18, 2011 Author Share Posted March 18, 2011 Problem remains, or should I say, things are even worse. Here's my processing script <style type="text/css"> <!-- div.media-box{ float:left; margin-right:40px; overflow: hidden; background-color:#CCCCFF; padding:3px; margin-bottom: 10px; border:1px solid #fff; color:#CC0000; } .media-box img{ background-repeat: repeat-x; background-position: center; margin:5px; } .clearrow{ clear:both; } --> </style> <div id="mediaboxes"> <?php $query = "SELECT DISTINCT k.ID, k.name_category, pk.name_subcategory, pk.id_subcategory FROM `categories` AS k LEFT JOIN `subcategories` AS pk ON pk.id_main_category = k.ID"; $result = mysql_query($query) or die(mysql_error()); $currentCat = false; while($row = mysql_fetch_array($result)) { if($currentCat != $row['ID']) { $i++; if ($i==4 || $i==8 || $i==12 || $i==16) { ?> <div class="clearrow"></div> <?php } ?> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /> <b><?php echo $row['name_category'] ?></b> <?php $currentCat= $row['ID']; } ?> </div> </div> <div id="extra-box"> <p> <a href="?action=xxx&id=<?php print $row['id_subcategory'];;?>"><?php print $row['name_subcategory'] ?></a></p> <input type="button" value="Back" onClick="history.go(-1);return true;"> </div> <?php } ?> And here is output generated by above script <!-- START: Content --> <div class="contentContainer clearfix"> <div class="wideMainContent"> <div class="article"> <h6 class="font"> E-obrazci</h6> <style type="text/css"> <!-- div.media-box{ float:left; margin-right:40px; overflow: hidden; background-color:#CCCCFF; padding:3px; margin-bottom: 10px; border:1px solid #fff; color:#CC0000; } .media-box img{ background-repeat: repeat-x; background-position: center; margin:5px; } .clearrow{ clear:both; } --> </style> <div id="mediaboxes"> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /> <b>Test text</b> </div> </div> <div id="extra-box"> <p> <a href="?action=xxx&id=95">Text bottom</a></p> <input type="button" value="Back" onClick="history.go(-1);return true;"> </div> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /> <b>Test text</b> </div> </div> <div id="extra-box"> <p> <a href="?action=xxx&id=99">Bottom text</a></p> <input type="button" value="Back" onClick="history.go(-1);return true;"> </div> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /> <b>Izvršba</b> </div> </div> <div id="extra-box"> <p> <a href="?action=xxx&id=96">bottom text</a></p> <input type="button" value="Back" onClick="history.go(-1);return true;"> </div> <div class="clearrow"></div> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /> <b>Test text/b> </div> </div> <div id="extra-box"> <p> <a href="?action=xxx&id=100">Bottom text</a></p> <input type="button" value="Back" onClick="history.go(-1);return true;"> </div> </div> </div> <div id="extra-box"> <p> <a href="?action=xxx&id=103">Bottom text</a></p> <input type="button" value="Back" onClick="history.go(-1);return true;"> </div> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /> <b>Test text</b> </div> </div> <div id="extra-box"> <p> <a href="?action=xxx&id=105">bottom text</a></p> <input type="button" value="Back" onClick="history.go(-1);return true;"> </div> <div class="media-box"> <img src="http://i55.tinypic.com/2d962ww.png" alt="" /> <br /> <b>Test text</b> </div> </div> <div id="extra-box"> <p> <a href="?action=xxx&id=101">Bottom text</a></p> <input type="button" value="Back" onClick="history.go(-1);return true;"> </div> </div> </div> <div id="extra-box"> <p> <a href="?action=xxx&id=102">Bottom text</a></p> <input type="button" value="Back" onClick="history.go(-1);return true;"> </div> </div> </div> Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted March 18, 2011 Share Posted March 18, 2011 But that is more a php thing really. You are generating a mediabox, than button box, becuase you have them in the same if statement. Also you $i doesn't have a staring value. I recommend you place your processing script in the php help forum, becuase the problem you now have has nothing to do anymore with html or css. You script is just producing it wrong. Be as precise as possible (this is what i have, it produces this, and this is how I want it to look like) I bet there are some php guru's that can fixed that. But at the moment your php script is wrong 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.