Help with center box layout

Ok I have searched the forums and have applied may suggestions into the layout of my centerbox content. I have reached a point where I am stuck and I request your infinet wisdom o' mighty Zenner. I would like to use my stylesheet if at all possable.

Right now I am working on the layout of my featured products. You can view my site here http://www.inhomedirect.com

I have the borders around each product more or less how I want it. Using suggestions found elseware in the forums I was able to add short product descriptions and buy now, more info buttons to the center box.

But I am stumped on how to arange the content of the centerbox to the way I want.

I would like it to display as follows:

Product Name

I Description
M to the side
A of the image
G
E $Price
Buy button **|**More info button

Right now it is all centered. I have looked at doing this with tables but am unsure how and still maintaining the outer box border and spacing. It has also stopped displaying the price of the product, which I can't figure out why

Here is a copy of my stylesheet.css

/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license [URL]http://www.zen-cart.com/license/2_0.txt[/URL] GNU Public License V2.0
 * @version $Id: stylesheet.css 5347 2006-12-22 20:26:09Z birdbrain $
 */
body {
 margin: 0;
 font-family: verdana, arial, helvetica, sans-serif;
 font-size: 62.5%;
 color: #000000;
 background-color: #e5edf5;
 }
a img {border: none; }
a:link, #navEZPagesTOC ul li a {
 color: #3300FF;
 text-decoration: none;
 }
 
a:visited {
 color: #3300FF;
 text-decoration: none;
 }
a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
 color: #FF0000;
 }
a:active {
 color: #0000FF;
 }
h1 {
 font-size: 1.5em;
 }
h2 {
 font-size: 1.4em;
 }
h3 {
 font-size: 1.3em;
 }
h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
 font-size: 1.1em;
 }
.biggerText {
 font-size: 1.2em;
 }
h1, h2, h3, h4, h5, h6 {
    margin: 0.3em 3px;
}
CODE {
 font-family: arial, verdana, helvetica, sans-serif;
 font-size: 1em;
 }
FORM, SELECT, INPUT {
 display: inline;
 font-size: 1em;
 margin: 0.1em;
 }
TEXTAREA {
/* float: left;*/
 margin: auto;
 display: block;
 width: 95%;
 }
input:focus, select:focus, textarea:focus {
 background: #F0F8FF;
 }
FIELDSET {
 padding: 0.5em;
 margin: 0.5em 0em;
 border: 1px solid #cccccc;
 }
LEGEND {
 font-weight: bold;
 padding: 0.3em;
 }
LABEL, h4.optionName {
 line-height: 1.5em;
 padding: 0.2em;
 }
LABEL.checkboxLabel, LABEL.radioButtonLabel {
 margin: 0.5em 0.3em;
 }
#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
 float: left;
 }
LABEL.inputLabel {
 width: 11em;
 float: left;
 }
LABEL.inputLabelPayment {
 width: 15em;
 float: left;
 }
LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel  {
 width: 12em;
 float: left;
 }
P, ADDRESS {
 padding: 0.5em;
 }
ADDRESS {
 font-style: normal;
 }
.clearBoth {
 clear: both;
 }
HR {
 height: 1px;
 margin-top: 0.5em;
 border: none;
 border-bottom: 1px solid #9a9a9a;
 }
/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
 line-height: 1.8em;
 padding: 0.2em;
 border: 1px solid #000000;
 }
.messageStackWarning, .messageStackError {
 background-color: #ff0000;
 color: #ffffff;
 }
.messageStackSuccess {
 background-color: #99FF99;
 color: #000000;
 }
.messageStackCaution {
 background-color: #FFFF66;
 color: #000000;
 }
/*wrappers - page or section containers*/
#mainWrapper {
 background-color: #ffffff;
 text-align: left;
 width: 100%;
 vertical-align: top;
 }
#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
 margin: 0em;
 padding: 0em;
 }
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
 margin: auto;
 } 
#tagline {
 color:#000000;
 font-size: 2em;
 text-align : center;
 vertical-align: middle;
 }
#sendSpendWrapper {
 border: 1px solid #cacaca;
 float: right;
 margin: 0em 0em 1em 1em;
 }
.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
 margin: 0;
 width: 47%;
 }
.wrapperAttribsOptions {
 margin: 0.3em 0em;
 }
/*navigation*/
.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
 margin: 0em;
 font-size: 0.9em;
 }
.navNextPrevList {
 display: inline;
 white-space: nowrap;
 margin: 0;
 padding:  0.5em 0em;
 list-style-type: none;
 }
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
 margin: 0em;
 background-color: #9a9a9a;
 font-weight: bold;
 color: #ffffff;
 height: 1%;
 width: 100%;
 }
#navMain ul, #navSupp ul, #navCatTabs ul  {
 margin: 0;
 padding:  0.5em 0em;
 list-style-type: none;
 text-align: center;
 line-height: 1.5em;
 }
#navMain ul li, #navSupp ul li, #navCatTabs ul li {
 display: inline;
 }
#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
 text-decoration: none;
 padding: 0em 0.5em;
 margin: 0;
 color: #ffffff;
 white-space: nowrap;
 }
#navEZPagesTOCWrapper {
 font-weight: bold;
 float: right;
 height: 1%;
 border: 1px solid #000000;
 }
#navEZPagesTOC ul {
 margin: 0;
 padding:  0.5em 0em;
 list-style-type: none;
 line-height: 1.5em;
 }
#navEZPagesTOC ul li {
 white-space: nowrap;
 }
#navEZPagesTOC ul li a {
 padding: 0em 0.5em;
 margin: 0;
 }
#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
 margin: 0.5em;
 }
#navMainSearch {
 float: right;
 }
#navBreadCrumb {
 background-color: #cc9900;
 }
#navEZPagesTop {
 background-color: #ffff33;
 }
#navBreadCrumb, #navEZPagesTop {
 font-size: 0.95em;
 font-weight: bold;
 margin: 0em;
 padding: 0.5em;
 }
#navColumnOne {
 background-color: #FFCC99;
 }
#navColumnTwo {
 background-color: #00BFBF;
 }
/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
 vertical-align: top;
 }
 
/*.content,*/ #productDescription, .shippingEstimatorWrapper {
 /*font-size: 1.2em;*/
 padding: 0.5em;
 }
.alert {
 color: #FF0000;
 margin-left: 0.5em;
 }
.advisory {}
.important {
 font-weight: bold;
 }
.notice {}
.rating{}
.gvBal {
 float: right;
 }
.centerColumn, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {
 padding: 0.8em;
 }
.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
 font-size: 0.9em;
 }
/*Shopping Cart Display*/
#cartAdd {
 float: right;
 text-align: center;
 margin: 1em;
 border: 1px solid #000000;
 padding: 1em;
 }
.tableHeading TH {
 border-bottom: 1px solid #cccccc;
 }
.tableHeading, #cartSubTotal {
 background-color: #e9e9e9;
  }
#cartSubTotal {
 border-top: 1px solid #cccccc;
 font-weight: bold;
 text-align: right;
 line-height: 2.2em;
 padding-right: 2.5em;
 }
.tableRow, .tableHeading, #cartSubTotal {
 height: 2.2em;
 }
.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay   {
 padding: 0.5em 0em;
 }
.cartUnitDisplay, .cartTotalDisplay {
 text-align: right;
 padding-right: 0.2em;
 }
#scUpdateQuantity {
 width: 2em;
 }
.cartQuantity {
 width: 4.7em;
 }
.cartNewItem {
 color: #33CC33;
 position: relative;  /*do not remove-fixes stupid IEbug*/
 }
.cartOldItem {
 color: #660099;
 position: relative;   /*do not remove-fixes stupid IEbug*/
 }
.cartBoxTotal {
 text-align: right;
 font-weight: bold;
 }
.cartRemoveItemDisplay {
 width: 3.5em;
 }
.cartAttribsList {
 margin-left: 1em;
 }
#mediaManager {
  width: 50%; 
  margin: 0.2em;
  padding: 0.5em;
  }
.normalprice, .productSpecialPriceSale {
 text-decoration: line-through;
 }
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
 color: #ff0000;
 }
.orderHistList {
 margin: 1em;
 padding: 0.2em 0em;
 } 
#cartBoxListWrapper ul, #ezPageBoxList ul {
 list-style-type: none;
 }
#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
 margin: 0;
 padding: 0.2em 0em;
 } 
#cartBoxEmpty, #cartBoxVoucherBalance {
  font-weight: bold;
  }
.totalBox {
 width: 5.5em;
 text-align: right;
 padding: 0.2em;
 }
.lineTitle, .amount {
 text-align: right;
 padding: 0.2em;
 }
.amount {
 width: 5.5em;
 }
/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
 margin: 0em 1em 1em 0em ;
 }
.categoryIcon {}
#cartImage {
 margin: 0.5em 1em;
 }
/*Attributes*/
.attribImg {
 width: 20%;
 margin: 0.3em 0em;
}
.attributesComments {}
/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
 margin: 1em 0em;
 }
/*sideboxes*/
.columnLeft {}
h3.leftBoxHeading, h3.leftBoxHeading a {
 font-size: 1em;
 color: #ffffff;
 }
.leftBoxHeading, .centerBoxHeading {
 margin: 0em;
 background-color: #FF6699;
 padding: 0.5em 0.2em;
 }
.leftBoxContainer {
 border: 1px solid #ffffff;
 margin-top: 1.5em;
 }
.sideBoxContent {
 background-color: #ffffff;
 padding: 0.4em;
 }
h3.rightBoxHeading, h3.rightBoxHeading a {
 font-size: 1.1em;
 color: #FFFF00;
 }
.rightBoxHeading {
 margin: 0em;
 background-color: #663366;
 padding: 0.2em 0em;
 }
h3.leftBoxHeading a:hover {
 color: #FFFF33;
 text-decoration: none;
 } 
h3.rightBoxHeading a:hover {
 color: #FF0000;
 text-decoration: none;
 }
.rightBoxContent {
 background-color: #ffffff;
 margin-bottom: 1em;
 }
.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, 
/*.centerBoxContentsFeatured,*/ .centerBoxContentsNew, .gvBal, .attribImg {
 text-align: center;
 }
#bestsellers .wrapper {
 margin: 0em 0em 0em 1.5em;
 }
#bestsellers ol {
 padding: 0;
 margin-left: 1.1em;
 }
#bestsellers li {
 padding: 0;
 margin: 0.3em 0em 0.3em 0em;
 }
#bannerboxHeading {
 background-color: #0000CC;
}
#upProductsHeading {
 text-align: left;
 }
#upDateHeading {
 text-align: right;
 }
/*misc*/
.back {
 float: left;
 }
.forward, #shoppingCartDefault #PPECbutton {
 float: right;
 }
.bold {
 font-weight: bold;
 }
.rowOdd {
 background-color: #E8E8E8;
 height: 1.5em;
 vertical-align: top;
 }
.rowEven {
 background-color: #F0F0F0;
 height: 1.5em;
 vertical-align: top;
 }
.hiddenField {
 display: none;
}
.visibleField {
 display: inline;
}
CAPTION {
 /*display: none;*/
 }
#myAccountGen li, #myAccountNotify li {
 margin: 0;
 } 
.accountTotalDisplay, .accountTaxDisplay {
 width: 20%;
 text-align: right;
 /*vertical-align: top*/
 }
.accountQuantityDisplay {
 width: 10%;
 vertical-align: top
 }
TR.tableHeading {
 background-color: #cacaca;
 height: 2em;
 }
#siteMapList {
 width: 90%;
 float: right;
 }
.ratingRow {
 margin: 1em 0em 1.5em 0em;
 }
LABEL#textAreaReviews {
 font-weight: normal;
 margin: 1em 0em;
 }
#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
 background-color: #ffffff;
 }
.information {
  padding: 10px 3px; 
 line-height: 150%;
}
/* Center box CSS */
.centerBoxContentsNew, .centerBoxContentsFeatured, .centerBoxContentsSpecials, .specialsListBoxContents {
 margin: 1em 0.8em 0 0;
 padding: 0.5em 0 0.3em 0;
 border-style: solid; 
 border-width: 0.1em 0.2em 0.2em 0.1em; /* also add little shadow effect */ 
 border-color: #CCCCCC #B6B6B6 #B6B6B6 #CCCCCC; /* also add little shadow effect */ 
 height: 19em; /* adjust according to the maximum height of the product's data */ 
}
/* Columnar Cell width adjustment */ 
/* decrease the cell's inner width to provide spaces for the added overhead */
.centerBoxWrapper div /* #whatsNew div, #featuredProducts div, #specialsDefault div */ {
 max-width: 30.5%; 
}
/* Columnar Cell width adjustment */ 
/* decrease the cell's inner width to provide spaces for the added overhead */
/* For IE only */
* html .centerBoxWrapper div {
 width: auto;
        width: 30.5% !important; 
}
.centerBoxContentsNew a, .centerBoxContentsFeatured a, .centerBoxContentsSpecials a, .specialsListBoxContents a {
/* display: block; */
/* text-align: center; */
 padding-left: 2%;
 padding-right: 3%;
}
/* For IE only */
* html .centerBoxContentsNew a, .centerBoxContentsFeatured a, .centerBoxContentsSpecials a, .specialsListBoxContents a {
/* display: block; */
/* text-align: center; */
 padding-left: 2%;
 padding-right: 3%;
}

Here is a copy of my featured_products.php file:

<?php
/**
 * featured_products module - prepares content for display
 *
 * @package modules
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license [URL]http://www.zen-cart.com/license/2_0.txt[/URL] GNU Public License V2.0
 * @version $Id: featured_products.php 4629 2006-09-28 15:29:18Z ajeh $
 */
if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}
if ( (!isset($new_products_category_id)) || ($new_products_category_id == '0') ) {
  $featured_products_query = "select distinct p.products_id, p.products_image, pd.products_name, pd.products_description
                           from (" . TABLE_PRODUCTS . " p
                           left join " . TABLE_FEATURED . " f on p.products_id = f.products_id
                           left join " . TABLE_PRODUCTS_DESCRIPTION . " pd on p.products_id = pd.products_id )
                           where p.products_id = f.products_id and p.products_id = pd.products_id and p.products_status = 1 and f.status = 1 and pd.language_id = '" . (int)$_SESSION['languages_id'] . "'";
} else {
  $featured_products_query = "select distinct p.products_id, p.products_image, pd.products_name, pd.products_description
                           from (" . TABLE_PRODUCTS . " p
                           left join " . TABLE_FEATURED . " f on p.products_id = f.products_id
                           left join " . TABLE_PRODUCTS_DESCRIPTION . " pd on p.products_id = pd.products_id), " .
  TABLE_PRODUCTS_TO_CATEGORIES . " p2c, " .
  TABLE_CATEGORIES . " c
                           where p.products_id = p2c.products_id
                           and p2c.categories_id = c.categories_id
                           and c.parent_id = '" . (int)$new_products_category_id . "'
                           and p.products_id = f.products_id and p.products_id = pd.products_id and p.products_status = 1 and f.status = 1 and pd.language_id = '" . (int)$_SESSION['languages_id'] . "'";
}
$featured_products = $db->ExecuteRandomMulti($featured_products_query, MAX_DISPLAY_SEARCH_RESULTS_FEATURED);
$row = 0;
$col = 0;
$list_box_contents = array();
$title = '';
$num_products_count = $featured_products->RecordCount();
// show only when 1 or more
if ($num_products_count > 0) {
  if ($num_products_count < SHOW_PRODUCT_INFO_COLUMNS_FEATURED_PRODUCTS || SHOW_PRODUCT_INFO_COLUMNS_FEATURED_PRODUCTS == 0) {
    $col_width = floor(100/$num_products_count);
  } else {
    $col_width = floor(100/SHOW_PRODUCT_INFO_COLUMNS_FEATURED_PRODUCTS);
  }
  while (!$featured_products->EOF) {
    $products_price = zen_get_products_display_price($featured_products->fields['products_id']);
// bof
$product_link=zen_href_link( zen_get_info_page(  $featured_products->fields['products_id']), 'products_id=' . $featured_products->fields['products_id']);
      $product_image=zen_image(DIR_WS_IMAGES . $featured_products->fields['products_image'], $featured_products->fields['products_name'], IMAGE_FEATURED_PRODUCTS_LISTING_WIDTH, IMAGE_FEATURED_PRODUCTS_LISTING_HEIGHT);
      $product_name=$featured_products->fields['products_name'];
      $product_desc=zen_trunc_string( zen_clean_html( stripslashes( zen_get_products_description( $featured_products->fields['products_id'], $_SESSION['languages_id']))), PRODUCT_LIST_DESCRIPTION);
      $product_id=$featured_products->fields['products_id'];
      $product_addtocart=zen_href_link( $_GET['main_page'], 'products_id=' . $product_id .'&action=buy_now');
// eof
 
 $list_box_contents[$row][$col] = array('params' =>'class="centerBoxContentsFeatured back"' . ' ' . 'style="width:' . $col_width . '%;"',
 'text' => '<div class="featured_prod_name"><a href="' . $product_link . '">' . $product_name . '</a></div>'
  .' <div class="featured_prod_description"><a class="featured_prod_image" href="' . $product_link . '">' . $product_image. '</a>'
  . $product_desc . '</div><div class="clearBoth"></div>'
  . ' <div class="featured_prod_price">' . $product_price .'</div>'
  . ' <div class="featured_prod_links"><a href="' . $product_addtocart . '">' . zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_BUY_NOW_ALT) . '</a>   <a href="' . $product_link . '"><img src="/includes/templates/id/images/btn_more_info.jpg" /></a></div>' );
 
    $col ++;
    if ($col > (SHOW_PRODUCT_INFO_COLUMNS_FEATURED_PRODUCTS - 1)) {
      $col = 0;
      $row ++;
    }
    $featured_products->MoveNextRandom();
  }
  if ($featured_products->RecordCount() > 0) {
    if (isset($new_products_category_id) && $new_products_category_id !=0) {
      $category_title = zen_get_categories_name((int)$new_products_category_id);
      $title = '<h2 class="centerBoxHeading">' . TABLE_HEADING_FEATURED_PRODUCTS . ($category_title != '' ? ' - ' . $category_title : '') . '</h2>';
    } else {
      $title = '<h2 class="centerBoxHeading">' . TABLE_HEADING_FEATURED_PRODUCTS . '</h2>';
    }
    $zc_show_featured = true;
  }
}
?>

Thank you for all your help and making such a wonderful product!

mrmrsg

checkout this thread http://www.zen-cart.com/forum/showthread.php?t=54793

barco57:

checkout this thread http://www.zen-cart.com/forum/showthread.php?t=54793

Yes I was looking at that Mod but I can't figure out how to combine some of the table code he used with the layout I have.

Thanks!