Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    display products in a grid like way

    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.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    use the float (to put the divs side by side)and the clear(to start a new "row") CSS properties
    Code:
    <!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>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this is my current code :

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •