Jump to content

Create Classified style website in php


Recommended Posts

  • 4 weeks later...

You could do something fairly simple with css and a MySql Database.  You might create a #main div for the ad content and a div class for the ad itself in css something like:

#main{-moz-column-count: 3;
-webkit-column-count: 3;
-webkit-column-gap: 2px;
column-count: 3;​}

.ads_class{border: 2px solid blue; /*a border around each ad*/
padding: 5px; /*A little padding within ads*/}

Assuming you are taking your ads from a database, within your #main div,  it might look something like:

while($ads = mysqli_fetch_array($result)){
//assuming your table might have image, title, price, and text
 $photo = "<img src=thumbnails/".$ads['image']." width='75px'/>";
 $title = "<h3>".$ads['title']."<h3>";
 $price = $ads['price'];
 $text = $ads['msg_date'];

echo "<div class='ads_class'>";
echo $photo;
echo $title;
echo $text;
echo "</div>";

This will give you three columns of ads.  You could also remove the columns and  create a fixed width for the .ad_class divs and float the divs to the left but the results would not evenly stack.  

Edited by possien
Link to comment
Share on other sites

I always try to go simple first.  Yes, the display on small devices would be crammed up.  Moo tools, Jquery, Bootstrap and others are nice but it's nicer to understand what the basic concepts are that are being employed and build from that point.   A simple media query to collapse the columns based on screen width works well.  I have used a variety of jscript tools and they add a lot of overhead and server calls.  Consider using 3g or 4g devices and having to download 100-200k of js, fonts, and css where only a small portion is used to obtain a grid view.  It may take too long to load and the user moves on.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • 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.