0

my php link to database: http://i163.photobucket.com/albums/t315/smc22_2007/pic1.png

My guess at how to show images from mysql database: http://i163.photobucket.com/albums/t315/smc22_2007/pic2.png

what I want it to look like: hxxp://i163.photobucket.com/albums/t315/smc22_2007/pic3.png (unable to post 3 hyperlinks, pls change xx to tt)

Please view the three pictures above in that order.

I can connect & display my database by using an 'include displayitems.php', however, I want to display the images from my database in row of 4 rows of 3 columns.

How do I do this?

I'm getting really confused.

Thankyou

1
  • Please don't post source-code as screenshots, especially those with a very tiny size employed. It's very difficult to make sense of.
    – tadman
    Oct 19, 2012 at 15:30

2 Answers 2

1
<div id='overall'>
<?php
$query = "select * from UFPProducts";
$result = mysql_query ($query, $connect);

while($row = mysql_fetch_array($result)) {

?>

    <div class='container'>
        <div class="image">
            <?php echo "<img src='".$row['Image']."' />"; ?>
        </div>
        <div class="text">
            <?php echo "<p>".$row['Description']."</p>"; ?>
        </div>
    </div>

    <?php

 }

 ?>
 </div>

 <style type="text/css">

 #overall {width:480px;}
 .container {width:100px; height:150px; float:left; display:inline; margin: 0px 10px; }
 .image {width:100px; height:100px;}
 .text {width:100px; height:50px;}

 </style>

The "margin: 0 10px;" is basically saying have no margins on the top or bottom, but have 10px on each side of the container. This means that the container div will be 100px wide still, with 10px of margin (spacing) on each side, therefore making it 100px + 20px wide.

So if you still want 4 in each row; 120px x 4 = 480px. Thus, 480px is the size of the 'overall' container.

3
  • Basically what the other answer said, however this will make a outer container, then stick everything in next to each other, but when a row gets greater than 400px (so in this case 4 divs = 400px), the 5th will go onto the next row..
    – Alias
    Oct 19, 2012 at 15:42
  • thanks, that works quite nicely. I edited it a little bit and this is how my result looks on screen. How do I get the images to not touch? i163.photobucket.com/albums/t315/smc22_2007/pic4.png Oct 19, 2012 at 16:12
  • Well currently the "overall" container is 400px wide, and each of the "container" divs is 100px wide. Therefore 4 will be able to fit into the row (as 4 x 100 = 400px). If you want spaces inbetween, then you will need to make the "overall" div wider (say 500px), and do 'margins' on the container divs... I'll update the code above.
    – Alias
    Oct 19, 2012 at 16:32
1

You need to make a container div with a fixed width (400), then put your objects into the div with a width of 100 (1/4 of the container), then load in each object from your DB inserting the image and text. See example below. As the objects come in, they will stack horizontally, once it runs out of space (at 5), the 5th will go to the next line and keep going. Limiting it to 3 rows will have to be done with SQL --> LIMIT 0, 12;

Without writing the entire code for you, this should give you a good idea of what to do.

<div style="width:400px;">

  <div style="width:100px;display:inline-block;">
    <div class="image"><img src=""></div>
    <div class="description">Lorem Ipsum</div>
  </div>

  <div style="width:100px;display:inline-block;">
    <div class="image"><img src=""></div>
    <div class="description">Lorem Ipsum</div>
  </div>

  <div style="width:100px;display:inline-block;">
    <div class="image"><img src=""></div>
    <div class="description">Lorem Ipsum</div>
  </div>

  <div style="width:100px;display:inline-block;">
    <div class="image"><img src=""></div>
    <div class="description">Lorem Ipsum</div>
  </div>

</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.