Display product attributes in two columns (side by side)

[innovafire]

Yeah, they could. But I don't have images for them and don't want t go to the trouble. I'm really surprised that the option would be limited to making columns only out of image attributes.

Anybody else got an idea on this?

[innovafire]

OK, here's the code for that file that should have created the two colum attributes (from the ZIP file above). I'm only just learning PHP, so I'm hoping someone that knows better can spot what needs to be changed.

<?php
/**
* Module Template
*
* Template used to render attribute display/input fields
*
* @package templateSystem
* @copyright Copyright 2003-2005 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_modules_attributes.php 3208 2006-03-19 16:48:57Z birdbrain $
*/
?>
<div id="productAttributes">
<?php if ($zv_display_select_option > 0) { ?>
<h3 id="attribsOptionsText"><?php echo TEXT_PRODUCT_OPTIONS; ?></h3>
<?php } // show please select unless all are readonly ?>

<?php
for($i=0;$i<sizeof($options_name);$i++) {
?>
<?php
if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') {
$output .= '<h3 class="attributesComments">'.$options_comment[$i].'</h3>';
}

$output .= '
<div class="wrapperAttribsOptions">
<h4 class="optionName back">'.$options_name[$i].':</h4>
<br class="clearBoth" />
<div class="back">' . $options_menu[$i].'</div>
<br class="clearBoth" />
</div>';

if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') {
$output .= '<div class="ProductInfoComments">'.$options_comment[$i].'</div>';
}

if ($options_attributes_image[$i] != '') {
$output .= $options_attributes_image[$i];
}

$output .= '<br class="clearBoth" />';

if ($i%2) {
if($i==0){
$left_col .= $output;
} else {
$right_col .= $output;
}
} else {
$left_col .= $output;
}
$output ='';

}

?>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="50%"><?php echo $left_col; ?></td>
<td width="50%"><?php echo $right_col; ?></td>
</tr>
</table>


<?php
if ($show_onetime_charges_description == 'true') {
?>
<div class="wrapperAttribsOneTime"><?php echo TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION; ?></div>
<?php } ?>


<?php
if ($show_attributes_qty_prices_description == 'true') {
?>
<div class="wrapperAttribsQtyPrices"><?php echo zen_image(DIR_WS_TEMPLATE_ICONS . 'icon_status_green.gif', TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK, 10, 10) . '&nbsp;' . '<a href="javascriptopupWindowPrice(\'' . zen_href_link(FILENAME_POPUP_ATTRIBUTES_QTY_PRICES, 'products_id=' . $_GET['products_id'] . '&products_tax_class_id=' . $products_tax_class_id) . '\')">' . TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK . '</a>'; ?></div>
<?php } ?>
</div>

[lukemcr]

I dropped this right in and it worked for me. Thanks a lot. :-)

[DivaVocals]

Glad ya liked it..

[busymum]

Really great, thank you!

One question, now that my size and colour attributes are side by side (ace!) there is a large space between 'Please choose:' and the the actual attributes. Any way to get rid of this space?

Thanks.

[rwoody]

This is a little off topic, but I thought that possibly someone could answer this for me. In the product_info layout, the drop down on the attributes has a huge margin between them (100px). I've looked carefully at the layout and the style sheet and nothing I try seems to reduce this. I have the drop downs in a vertical format and I only want the margin about 25px between them. The top drop down should be able to go right over the top of the second when selected if necessary.

The other alternative was to get them into a two column layout, where the drop downs would appear side by side, but after reading this thread I don't believe this module will help in that area.

Are there any suggestions or could someone tell me what in the .css is controlling that margin.

Thanks in advance.

[DivaVocals]

Busymum & rwoody

Since neither of you included a link to your site, I am only making a guess here, but both of your issues sound like stylesheet modifications are needed to correct your layout issues.. As you can see in my test site where I have this working, I don't have the spacing issues you are both referring to.

http://clients.overthehillweb.com/my...products_id=36

I would suggest creating a thread in the stylesheet forum, and seeing if one of the experts there can help you figure out what changes are needed to get the layout to look the way you want.

[DivaVocals]

How to display 4 columns. Please help me!!!!!!!

The code I shared in the original post is only for two columns, and I while I understand how it was done, I didn't write the code (it was done for me). So I can't really help with this. You might try posting this as a NEW question so you can get assistance with this.. Feel free to reference this post if someone needs an example of how this was accomplished with two columns.

[gjh42]

Don't know what happened to the post I thought I made a few minutes ago...

You can get the four-column effect by using the stylesheet code from post 55, adapted to
width: 24%;
so that the individual attributes will fit four to a row.

You also will need to add
height: ##px; (where ## is the height you want)
to the .wrapperAttribsOptions rule to ensure that the floating happens smoothly.

This is a generic method, and will not be suitable to every situation.

[jsksathiya]

Thank you for your great replay