Flexible product listing CSS Issue

[niccol]

OK . I will clarify in my next post. Food first!

[kdb04d]

It actually looks like a html issue to me the price, form quantity and the amount are in the same <td class="listingPriceCell"> each should have their own then they will center themselves on their own

[Empire]

I did make some changes to the product_listing.php file in 'includes/modules/my_custom_template"

The file as it looks now

    $product_contents = array(); // Used For Column Layout (Grid Layout) Add on module
    $flex_skips = 0; //reset flag for reducing # of columns
	$prev_cell_text = '';
    for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
      $lc_align = '';
      $lc_text = '';
      switch ($column_list[$col]) {
        case 'PRODUCT_LIST_MODEL':
        $lc_text = '<div class="listingModel">' . $listing->fields['products_model'] . '</div>';
		$lc_class = 'listingModelCell';
        break;
        case 'PRODUCT_LIST_NAME':
        $lc_text .= '<h3 class="itemTitle">' . $listing->fields['products_name'] . '</h3><div class="listingDescription">' . zen_trunc_string(zen_clean_html(stripslashes(zen_get_products_description($listing->fields['products_id'], $_SESSION['languages_id']))), PRODUCT_LIST_DESCRIPTION) . '</div>';
		$lc_class = 'listingNameCell';
        break;
        case 'PRODUCT_LIST_MANUFACTURER':
        $lc_text .= '<div class="listingManufacturer"><a href="' . zen_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $listing->fields['manufacturers_id']) . '">' . $listing->fields['manufacturers_name'] . '</a>' . '</div>';
		$lc_class = 'listingManufacturerCell';
        break;
        case 'PRODUCT_LIST_PRICE':
        $lc_price = zen_get_products_display_price($listing->fields['products_id']) . '';
        $lc_text .= '<div class="listingPrice">' . $lc_price . '</div>';
		$lc_class = 'listingPriceCell';
        $lc_button = '';

        // more info in place of buy now
        if (zen_has_product_attributes($listing->fields['products_id']) or PRODUCT_LIST_PRICE_BUY_NOW == '0') {
          $lc_button = '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? $_GET['cPath'] : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . MORE_INFO_TEXT . '</a>';
        } else {
          if (PRODUCT_LISTING_MULTIPLE_ADD_TO_CART != 0) {
            if (
                // not a hide qty box product
                $listing->fields['products_qty_box_status'] != 0 &&
                // product type can be added to cart
                zen_get_products_allow_add_to_cart($listing->fields['products_id']) != 'N'
                &&
                // product is not call for price
                $listing->fields['product_is_call'] == 0
                &&
                // product is in stock or customers may add it to cart anyway
                ($listing->fields['products_quantity'] > 0 || SHOW_PRODUCTS_SOLD_OUT_IMAGE == 0) ) {
              $how_many++;
            }
            // hide quantity box
            if ($listing->fields['products_qty_box_status'] == 0) {
              $lc_button = '<a href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing->fields['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_BUY_NOW_ALT, 'class="listingBuyNowButton"') . '</a>';
            } else {
              $lc_button = TEXT_PRODUCT_LISTING_MULTIPLE_ADD_TO_CART . "<input type=\"text\" name=\"products_id[" . $listing->fields['products_id'] . "]\" value=\"0\" size=\"4\" />";
            }
          } else {
            // qty box with add to cart button
            if (PRODUCT_LIST_PRICE_BUY_NOW == '2' && $listing->fields['products_qty_box_status'] != 0) {
              $lc_button= zen_draw_form('cart_quantity', zen_href_link(zen_get_info_page($listing->fields['products_id']), zen_get_all_get_params(array('action')) . 'action=add_product&products_id=' . $listing->fields['products_id']), 'post', 'enctype="multipart/form-data"') . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($listing->fields['products_id'])) . '" maxlength="6" size="4" />' . zen_draw_hidden_field('products_id', $listing->fields['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT) . '</form>';
            } else {
              $lc_button = '<a href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing->fields['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_BUY_NOW_ALT, 'class="listingBuyNowButton"') . '</a>';
            }
          }
        }

and how it looked before

    $product_contents = array(); // Used For Column Layout (Grid Layout) Add on module
    $flex_skips = 0; //reset flag for reducing # of columns
	$prev_cell_text = '';
    for ($col=0, $n=sizeof($column_list); $col<$n; $col++) {
      $lc_align = '';
      $lc_text = '';
      switch ($column_list[$col]) {
        case 'PRODUCT_LIST_MODEL':
        $lc_text = '<div class="listingModel">' . $listing->fields['products_model'] . '</div>';
		$lc_class = 'listingModelCell';
        break;
        case 'PRODUCT_LIST_NAME':
        $lc_text .= '<h3 class="itemTitle"><a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . $listing->fields['products_name'] . '</a></h3><div class="listingDescription">' . zen_trunc_string(zen_clean_html(stripslashes(zen_get_products_description($listing->fields['products_id'], $_SESSION['languages_id']))), PRODUCT_LIST_DESCRIPTION) . '</div>';
		$lc_class = 'listingNameCell';
        break;
        case 'PRODUCT_LIST_MANUFACTURER':
        $lc_text .= '<div class="listingManufacturer"><a href="' . zen_href_link(FILENAME_DEFAULT, 'manufacturers_id=' . $listing->fields['manufacturers_id']) . '">' . $listing->fields['manufacturers_name'] . '</a>' . '</div>';
		$lc_class = 'listingManufacturerCell';
        break;
        case 'PRODUCT_LIST_PRICE':
        $lc_price = zen_get_products_display_price($listing->fields['products_id']) . '<br />';
        $lc_text .= '<div class="listingPrice">' . $lc_price . '</div>';
		$lc_class = 'listingPriceCell';
        $lc_button = '';

        // more info in place of buy now
        if (zen_has_product_attributes($listing->fields['products_id']) or PRODUCT_LIST_PRICE_BUY_NOW == '0') {
          $lc_button = '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? $_GET['cPath'] : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . MORE_INFO_TEXT . '</a>';
        } else {
          if (PRODUCT_LISTING_MULTIPLE_ADD_TO_CART != 0) {
            if (
                // not a hide qty box product
                $listing->fields['products_qty_box_status'] != 0 &&
                // product type can be added to cart
                zen_get_products_allow_add_to_cart($listing->fields['products_id']) != 'N'
                &&
                // product is not call for price
                $listing->fields['product_is_call'] == 0
                &&
                // product is in stock or customers may add it to cart anyway
                ($listing->fields['products_quantity'] > 0 || SHOW_PRODUCTS_SOLD_OUT_IMAGE == 0) ) {
              $how_many++;
            }
            // hide quantity box
            if ($listing->fields['products_qty_box_status'] == 0) {
              $lc_button = '<a href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing->fields['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_BUY_NOW_ALT, 'class="listingBuyNowButton"') . '</a>';
            } else {
              $lc_button = TEXT_PRODUCT_LISTING_MULTIPLE_ADD_TO_CART . "<input type=\"text\" name=\"products_id[" . $listing->fields['products_id'] . "]\" value=\"0\" size=\"4\" />";
            }
          } else {
            // qty box with add to cart button
            if (PRODUCT_LIST_PRICE_BUY_NOW == '2' && $listing->fields['products_qty_box_status'] != 0) {
              $lc_button= zen_draw_form('cart_quantity', zen_href_link(zen_get_info_page($listing->fields['products_id']), zen_get_all_get_params(array('action')) . 'action=add_product&products_id=' . $listing->fields['products_id']), 'post', 'enctype="multipart/form-data"') . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($listing->fields['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_draw_hidden_field('products_id', $listing->fields['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT) . '</form>';
            } else {
              $lc_button = '<a href="' . zen_href_link($_GET['main_page'], zen_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing->fields['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_BUY_NOW, BUTTON_BUY_NOW_ALT, 'class="listingBuyNowButton"') . '</a>';
            }
          }
        }

[Empire]

I agree with you kdb04d but unfortunately I do not know what files I need to edit to make the changes.

[niccol]

Yes, I can see that you made some edits to product-listing.php. That is why I had to shut my mouth about my second point. You had already solved it perfectly

The issue with tables is that they take some of the alignment away from the css. A table will default to valign:center which means that the contents of a table cell are vertically centered. Which is fine except that it means that you loose some control over the vertical positioning of elements within the cells. This is pretty well documented.

In some cases it really isn't a problem. With a single line of text in each cell it looks fine. When things get more intricate with divs and images that have heights the results are sometimes unsatisfactory and adjusting the top and bottom margins of the elements contained with the cells doesn't always achieve the desired effect.

One solution to this is to set the valign of the table cells to align to the top of the cell. The advantage of this is that elements then align within the cells in the same way as they would inside a containing <div>. If you are used to styling within divs then this is comforting.

What you loose is the ability to align thing centrally vertically but this usually just means that you have an equally elegant layout but without vertical centering.

What I suggested in the earlier post is editing tpl_tabular_display.php to set the vertical align of all <tr> tags to be valign:top; . This means that every <td> has its contents aligned to the top of the cell. Then the individual elements in the cell can be aligned exactly as if the table cell was a div.

It should be noted that this will apply to all the cells in ALL of zen Cart that use this file as a template. ( I think that this is all of the tables but couldn't swear to it. ) If this is a problem then there is a fairly easy solution to only apply it on one page but that is for another post.

So, how does one give the <tr> tags a valign:top; ?

You need to edit the tpl_tabular_display.php. Preferably the override version of it. You will find it in includes / templates / YOUR TEMPLATE / common / . If it doesn't exist create it by copying the same file from template_default.

On a default version of this file without any previous edits you will find that line 26 reads :

  <tr <?php echo $r_params; ?>>

You need to edit this to read:

  <tr valign=top <?php echo $r_params; ?>>

Save it. Upload it.

Now all the tables in Zen Cart have a valign:top and you can position the elements within the cells using css to style the margins and padding. Although I'd try and stick with margin because of IE6.

Hope that makes more sense.

Nik


ps putting a colored border around individual elements often helps to see what is what. Also the web deleoper add on for firefox is great for this.

[niccol]

To put this another way that is perhaps easier.

kdb04d is quite right in that what is being centered is the whole of that block. Because of what is in the block it is almost impossible to align the price with the center of the next <div> ( which contains the quantity and add to cart ) all of which are inside the <td>

This is what I was saying about emulating a vertical align center with css.

Yes it would be a solution to put the next div ( which contains the quantity and add to cart ) in its own table cell. Unfortunately this is going to mean rewriting a good chunk of flexible_product_listing as far as I can see.

My solution is to get rid of the center align. Set the part number 16px (or 1em) down from the top of the cell. Set the Item name 16px down from the top of the cell. Set the price 16px down from the top of the cell. They may not be in the center but they will align with each other and you will find a spacing that makes it look just great. (16px is just a guess.)

[niccol]

Sorry, I have had a drink and am full of words

Another way of saying it is to forget about the table for a moment. In that table cell you have two things.

div #listingPrice
div #listingButtonGroup

To solve it perfectly you want to align the two divs vertically so their centers line up. This is well nigh impossible with css and html. ( I believe it is a recommendation in the next version of css which is due out eventually. )

So the best solution is to align product number, product name and the price. You can only do that if you set the vertical align of the cells to valign = top .

You could fudge it by bumping the price down with a blank graphic but that is going to break down if the font size changes and different browsers and operating systems use different default font sizes - let alone people who zoom the font size for accessibility reasons.

[Empire]

I would like to thank everyone for all the help. Niccol I will give your suggestion a try and update this thread with how it has worked. thanks again.

[niccol]

Oh I hate it when this happens. I may be about to eat my words.

In normal circumstances I stand by everything I said!

However, in the world of what is practical rather than what is right I think I may have a bit of a hack for you.

We can't add another <td> to the table because it would involve too much coding. BUT we can add another table inside the last cell of this table. It will be a mini-table of one row and two columns.

We have two divs
div #listingPrice
div #listingButtonGroup
We'll put one in each of the mini-table cells.

Then they will , hopefully be able to center align.

Empire - all the work happens in product_listing.php. I have edited a default version of this file and will attach it. It seems like you have enough skill to work out how to apply the changes to your version of the file! I have commented clearly the 3 lines I have edited or inserted and I am sure that you will understand what they do. I can't test this at the moment (my server is down for the first time in five years which is why I am still awake ) and it is late and I think the code will work but I am tired and may have made typos.

Back-up, please.

This definitely breaks the 'thou shalt not use tables for layout positioning' commandment. So strike me down. It also breaks all kinds of guidelines. So, if your site is government funded AND you tell them AND they bother to look then it might, maybe possibly be a problem unless you apologise and make them a cup of coffee. Just don't say I didn't tell you when the XHTML police break your door down in the middle of the night with some well formed code.

[niccol]

Just was curious to see how you got on so had a look.

First, I was an engineer and I love the concept of the site. I have spent to much time with dog eared parts manuals trying to work out parts numbers. Particularly when the previous user has had grease on there hands and decided that some of their lunch would also look nice on the page. Also they get photocopied so much that they become useless. So, I think the site and the diagrams looks great.

Looks like you are getting somewhere with the table. Two points both meant constructively. You seem to have an extra <td> tag in there. Is that my code? If so I'll have a look at it. Without seeing your product_listing.php I can't tell.

It turns up in the source looking like:

<table>
<tr>
<td>$263.89</td>
<td><td><form name="cart_quantity" acti

Secondly, it is a shame about the 1px grey line above the mini-table <td>s.

The line is inherited from the formatting of the parent table.

.productListing-even td {height:42px; padding: 0px 5px; background-color: #e9e9e9; border-top: 1px solid #999999;}
.productListing-odd td {height:42px; padding: 0px 5px; border-top: 1px solid #999999;} /*control all listing elements with this*/

To get rid of it you need to add a class to the <td>s in the mini table and set border-top to 0px. The <td>s might read <td class="minitable"> instead of just <td>. Then you can stlye the class .minitable to get rid of the line.