Jump to content

Displaying categories and subcategories in grid (with mysql)


xox

Recommended Posts

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

mac-app-store-categories.png

 

Link to comment
Share on other sites

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]

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>



Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>				

 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.