Chapter 5: Building a Shopping Cart
139
While you ’ re in the CSS file, create two new classes, one called productlisting and the other called
thumbnail. The productlisting class will be used to encapsulate the text and the thumbnail, and
the thumbnail class will be assigned to each thumbnail image, giving it its own unique margin properties.
img.thumbnail{
clear:both;
float:left;
margin-right:5px;
margin-bottom:15px;
}.productlisting{
float:left;
width:70%;
font-size:.8em;
margin-bottom:30px;
}Next, go through the home, category, product, and search views, and do the following to each thumbnail
and product description:Remove the align=left property on each thumbnail image.Add a class of thumbnail to each thumbnail.Wrap the entire block (thumbnail and text) in a div with a class of productlisting.Remove any < br style=’clear:both’/ > tags you may find. Your new thumbnail class
replaces these.Remove any < p > elements.Here ’ s what the home view should look like after you ’ re finished (changes in bold):< div id=’pleft’ >
< ?php
echo “ < img src=’”.$mainf[‘image’].”’ border=’0’ align=’left’/ > \n”;
echo “ < h2 > ”.$mainf[‘name’].” < /h2 > \n”;
echo “ < p > ”.$mainf[‘shortdesc’]. “ < br/ > \n”;
echo anchor(‘welcome/product/’.$mainf[‘id’],’see details’). “ < br/ > \n”;
echo anchor(‘welcome/cart/’.$mainf[‘id’],’add to cart’). “ < /p > \n”;
? >
< /div >< div id=’pright’ >
< ?php
foreach ($sidef as $key = > $list){
echo “ < div class=’productlisting’ >
< img src=’”.$list[‘thumbnail’].”’ border=’0’ class=’thumbnail’ / > \n”;
echo “ < h4 > ”.$list[‘name’].” < /h4 > \n”;
echo anchor(‘welcome/product/’.$list[‘id’],’see details’). “ < br/ > \n”;
echo anchor(‘welcome/cart/’.$list[‘id’],’add to cart’). “\n < /div > ”;
}
? >
< /div >