...

View Full Version : display products in a grid like way



prijsjager
04-22-2011, 10:48 AM
Hi all

im building a site where I would like to present the users with an overview of products in either rows or in a grid.., displaying them in rows works fine, but I cannot get them to show in a grid ( 3 next to each other)

can anyone point me to the right way to do this?

here you see a page which shows products in rows..

url for the site : http://beta.prijsjagers.be/nintendo-ds~1166.htm

I do not manage to apply css to show them in a grid



I think its should be done with float left, but i cannot implement this correctly

help appreciated,

K.

Kor
04-22-2011, 11:07 AM
use the float (to put the divs side by side)and the clear(to start a new "row") CSS properties


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#container{
border:solid 1px #ff0000;
}
.left{
float:left;
width:100px;
border:solid 1px #000;
height:25px;
padding:5px;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id="container">

<div class="left"> prod 1_1</div>
<div class="left"> prod 1_2</div>
<div class="left"> prod 1_3</div>
<div class="clear"></div>
<div class="left"> prod 2_1</div>
<div class="left"> prod 2_2</div>
<div class="left"> prod 2_3</div>
<div class="clear"></div>
<div class="left"> prod 3_1</div>
<div class="left"> prod 3_2</div>
<div class="left"> prod 3_3</div>
<div class="clear"></div>

</div>
</body>
</html>

prijsjager
04-22-2011, 11:11 AM
this is my current code :


<div style="clear:both;"></div>
<div class="ListingRow">
<div class="ListingHr"></div>
<div class="ListingCheckbox">
<input type="checkbox" name="chkCompare" id="idCompareChk<?=$pId?>" value="<?=$pId?>">
</div>
<div class="ListingThumbnail">
<?= getProductThumbnail($pId, $pLink, $row['TITLE'], $cId, '90', '90', 'ListingThumbnailBox') ?>
</div>
<div class="ListingRowRight">
<div style="clear:both;"></div>
<div>
<div class="ListingRowRightLeft">
<a href="<?=$pLink?>" class="linkLarge" title="<?=strip_tags($pTitle)?>"><?=$pTitle?></a>
<br>
<font class="PLDetail"><?=$pDetail?></font>
<br><br>
<?=getProductRating($pId, $pRating, $pFilename, $cId, $cFilename)?>
</div>
<div class="ListingRowRightRight">
<br>
<font class="PLPrice">
<?= getFormattedPrice($pMinPrice, $currencySymbol, $currencyRate)?>
<?= $pMinPrice==$pMaxPrice?'':(" - ".getFormattedPrice($pMaxPrice, $currencySymbol, $currencyRate)) ?>
</font>
<br><br>
<? getUserProductLink($pId, $storeCount, $pLink) ?>
</div>
</div>
</div>
</div>


how do i change this to work ?

my css is in a seperate file



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum