Product Listing - Trying to move text up. Please Help

I think the problem is in the Attributes section.
Both of these are pulling from the same product_info_display file
(Shown Below)

http://www.nothingbutcostumes.com/index.php?main_page=product_info&cPath=1402_1403&products_id=17482

I want the Pulldown below the add to cart and then the Description to go under that.

Without the attribute pull down it looks like this:

http://www.nothingbutcostumes.com/index.php?main_page=product_info&cPath=1405&products_id=11413

<?php /** * Page Template * * Loaded automatically by index.php?main_page=product_info.<br /> * Displays details of a typical product * * @package templateSystem * @copyright Copyright 2003-2006 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_product_info_display.php 3435 2006-04-14 03:42:46Z ajeh $ */ //require(DIR_WS_MODULES . '/debug_blocks/product_info_prices.php'); ?> <div class="centerColumn" id="productGeneral"> <!--bof Form start--> <?php echo zen_draw_form('cart_quantity', zen_href_link(zen_get_info_page($_GET['products_id']), zen_get_all_get_params(array('action')) . 'action=add_product'), 'post', 'enctype="multipart/form-data"') . "\n"; ?> <!--eof Form start--> <?php if ($messageStack->size('product_info') > 0) echo $messageStack->output('product_info'); ?> <!--bof Category Icon --> <?php if ($module_show_categories != 0) {?> <?php /** * display the category icons */ require($template->get_template_dir('/tpl_modules_category_icon_display.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_category_icon_display.php'); ?> <?php } ?> <!--eof Category Icon --> <!--eof Prev/Next top position --> <?php if (PRODUCT_INFO_PREVIOUS_NEXT == 1 or PRODUCT_INFO_PREVIOUS_NEXT == 3) { ?> <?php /** * display the product previous/next helper */ require($template->get_template_dir('/tpl_products_next_previous.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_products_next_previous.php'); ?> <?php } ?> <!--eof Prev/Next top position--> <!--bof Main Product Image --> <?php if (zen_not_null($products_image)) { ?> <?php /** * display the main product image */ require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?> <?php } ?> <!--eof Main Product Image--> <!--bof Product Name--> <h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1> <!--eof Product Name--> <!--bof Product Price block --> <h2 id="productPrices" class="productGeneral"> <?php // base price if ($show_onetime_charges_description == 'true') { $one_time = '<span >' . TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION . '</span><br />'; } else { $one_time = ''; } echo $one_time . ((zen_has_product_attributes_values((int)$_GET['products_id']) and $flag_show_product_info_starting_at == 1) ? TEXT_BASE_PRICE : '') . zen_get_products_display_price((int)$_GET['products_id']); ?></h2> <!--eof Product Price block --> <!--bof Add to Cart Box --> <?php if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') { // do nothing } else { ?>

        <?php
$display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
        if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
          // hide the quantity box and default to 1
          $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
        } else {
          // show the quantity box
$the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
        }
$display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);

//jstephens added for attribute quantity.
if(PRODUCT_STOCK_ATTRIBUTE_SHOW == 'true' && zen_qty_product_attributes_count((int)$_GET['products_id'])) {
   $output = '';
   include("stock_check.php");
   
   $inf = strlen($output)?$output . '<br />':'';
   $attib_qty2 = <<<ABC

<div id='form_stock_check'>$inf <input type='submit' value='Check Stock' name='stock_check' /> </div> <script> document.getElementById('form_stock_check').style.display = 'none'; </script> ABC;

   $attib_qty1 = <<<ABC

<script> document.write("<div class='attributeQuantity' id='stockTeller'>Checking...</div>"); </script>

ABC;

   $display_qty = $attib_qty1 . $display_qty;;
   
  }

?>

<?php if ($display_qty != '' or $display_button != '') { ?>

<div id="cartAdd">
<?php
  echo $display_qty;
  echo $display_button;
  echo $attib_qty2;
        ?>
      </div>

<?php } // display qty and button ?> <?php } // CUSTOMERS_APPROVAL == 3 ?> <!--eof Add to Cart Box--> <!--bof Attributes Module --> <?php if ($pr_attr->fields['total'] > 0) { ?> <?php /** * display the product atributes */ require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?> <?php } ?> <!--eof Attributes Module --> <!--bof Product details list --> <?php if ( (($flag_show_product_info_model == 1 and $products_model != '') or ($flag_show_product_info_weight == 1 and $products_weight !=0) or ($flag_show_product_info_quantity == 1) or ($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name))) ) { ?> <ul id="productDetailsList" class="floatingBox back"> <?php echo (($flag_show_product_info_model == 1 and $products_model !='') ? '<li>' . TEXT_PRODUCT_MODEL . $products_model . '</li>' : '') . "\n"; ?> <?php echo (($flag_show_product_info_weight == 1 and $products_weight !=0) ? '<li>' . TEXT_PRODUCT_WEIGHT . $products_weight . TEXT_PRODUCT_WEIGHT_UNIT . '</li>' : '') . "\n"; ?> <?php echo (($flag_show_product_info_quantity == 1) ? '<li>' . $products_quantity . TEXT_PRODUCT_QUANTITY . '</li>' : '') . "\n"; ?> <?php echo (($flag_show_product_info_manufacturer == 1 and !empty($manufacturers_name)) ? '<li>' . TEXT_PRODUCT_MANUFACTURER . $manufacturers_name . '</li>' : '') . "\n"; ?> </ul> <br class="clearBoth" /> <?php } ?> <!--eof Product details list --> <!--bof free ship icon --> <?php if(zen_get_product_is_always_free_shipping($products_id_current)) { ?> <div id="freeShippingIcon"><?php echo TEXT_PRODUCT_FREE_SHIPPING_ICON; ?></div> <?php } ?> <!--eof free ship icon --> <!--bof Product description --> <?php if ($products_description != '') { ?> <div id="productDescription" class="productGeneral biggerText"><?php echo stripslashes($products_description); ?></div> <?php } ?> <!--eof Product description --> <br class="clearBoth" /> <!--bof Quantity Discounts table --> <?php if ($products_discount_type != 0) { ?> <?php /** * display the products quantity discount */ require($template->get_template_dir('/tpl_modules_products_quantity_discounts.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_products_quantity_discounts.php'); ?> <?php } ?> <!--eof Quantity Discounts table --> <!--bof Additional Product Images --> <?php /** * display the products additional images */ require($template->get_template_dir('/tpl_modules_additional_images.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_additional_images.php'); ?> <!--eof Additional Product Images --> <!--bof Prev/Next bottom position --> <?php if (PRODUCT_INFO_PREVIOUS_NEXT == 2 or PRODUCT_INFO_PREVIOUS_NEXT == 3) { ?> <?php /** * display the product previous/next helper */ require($template->get_template_dir('/tpl_products_next_previous.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_products_next_previous.php'); ?> <?php } ?> <!--eof Prev/Next bottom position --> <!--bof Tell a Friend button --> <?php if ($flag_show_product_info_tell_a_friend == 1) { ?> <div id="productTellFriendLink" class="buttonRow forward"><?php echo ($flag_show_product_info_tell_a_friend == 1 ? '<a href="' . zen_href_link(FILENAME_TELL_A_FRIEND, 'products_id=' . $_GET['products_id']) . '">' . zen_image_button(BUTTON_IMAGE_TELLAFRIEND, BUTTON_TELLAFRIEND_ALT) . '</a>' : ''); ?></div> <?php } ?> <!--eof Tell a Friend button --> <!--bof Reviews button and count--> <?php if ($flag_show_product_info_reviews == 1) { // if more than 0 reviews, then show reviews button; otherwise, show the "write review" button if ($reviews->fields['count'] > 0 ) { ?> <div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS, zen_get_all_get_params()) . '">' . zen_image_button(BUTTON_IMAGE_REVIEWS, BUTTON_REVIEWS_ALT) . '</a>'; ?></div> <br class="clearBoth" /> <p class="reviewCount"><?php echo ($flag_show_product_info_reviews_count == 1 ? TEXT_CURRENT_REVIEWS . ' ' . $reviews->fields['count'] : ''); ?></p> <?php } else { ?> <div id="productReviewLink" class="buttonRow back"><?php echo '<a href="' . zen_href_link(FILENAME_PRODUCT_REVIEWS_WRITE, zen_get_all_get_params(array())) . '">' . zen_image_button(BUTTON_IMAGE_WRITE_REVIEW, BUTTON_WRITE_REVIEW_ALT) . '</a>'; ?></div> <br class="clearBoth" /> <?php } } ?> <!--eof Reviews button and count --> <!--bof Product date added/available--> <?php if ($products_date_available > date('Y-m-d H:i:s')) { if ($flag_show_product_info_date_available == 1) { ?> <p id="productDateAvailable" class="productGeneral centeredContent"><?php echo sprintf(TEXT_DATE_AVAILABLE, zen_date_long($products_date_available)); ?></p> <?php } } else { if ($flag_show_product_info_date_added == 1) { ?> <p id="productDateAdded" class="productGeneral centeredContent"><?php echo sprintf(TEXT_DATE_ADDED, zen_date_long($products_date_added)); ?></p> <?php } // $flag_show_product_info_date_added } ?> <!--eof Product date added/available --> <!--bof Product URL --> <?php if (zen_not_null($products_url)) { if ($flag_show_product_info_url == 1) { ?>

<p id="productInfoLink" class="productGeneral centeredContent"><?php echo sprintf(TEXT_MORE_INFORMATION, zen_href_link(FILENAME_REDIRECT, 'action=url&goto=' . urlencode($products_url), 'NONSSL', true, false)); ?></p>

<?php } // $flag_show_product_info_url } ?> <!--eof Product URL --> <!--bof also purchased products module--> <?php require($template->get_template_dir('tpl_modules_also_purchased_products.php', DIR_WS_TEMPLATE, $current_page_base,'templates'). '/' . 'tpl_modules_also_purchased_products.php');?> <!--eof also purchased products module--> <!--bof Form close--> </form> <!--bof Form close--> </div>

You are right.

You have the image floated left. The rule:

.wrapperAttribsOptions .back{display:block !important; clear:both;}

Has a clear:both in it so this element will sit below the float item (in this case the image).

This is one issue but I suspect there are others :smile: You probably will need to set a width for the <div> that contains the attributes for instance. Otherwise it will assume that it should be full width and not fit next to the image.

You need to work your way through the source code and see where the floats and the clear:boths are applied.

This is in the stylesheet.css correct?

Could you perhaps elaborate with what to look for and what to add?
I am not so good at these things....

Ok I removed the Clear: Both in the css for .wrapperAttribsOptions

The only thing I need to do now is move the word "Size"
just above the product.

How can I do that?

http://www.nothingbutcostumes.com/index.php?main_page=product_info&cPath=3278&products_id=11201

That line of code is in the stylesheet yes.

The way the elements are positioned on the page is a combination of html and css.

At the moment you have the elements in the right order but their floats are messing you up.

http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

http://css.maxdesign.com.au/floatutorial/

As a start stuff this at the bottom of the stylesheet.css

.wrapperAttribsOptions {width:150px;float:left;
        }

Then you're going to want to edit includes/templates/yourtemplate/tpl_modules_attributes.php to get rid of some of the

<br class="clearBoth" />

Change them to <br/>

Excellent! Can I make a little space between the two?

http://www.nothingbutcostumes.com/index.php?main_page=product_info&cPath=3278&products_id=11201

Uhh Hmmm...

This one doesn't look right...

http://www.nothingbutcostumes.com/index.php?main_page=product_info&cPath=1400&products_id=17468

Man this is tough!

.wrapperAttribsOptions {width:300px;float:left;padding-top:10px;padding-bottom:20px;}
#productDescription{width:300px;float:left;}
#productAttributes .clearBoth{clear:none;}

Above is the rather nasty fix that will do what you want but not require editing any code. Just chuck it in the end of your stylesheet.

Time to sleep.

Whhooppaaahhh!

That looks great! :clap:

Where does it pull the word "Size" from I just want to add a few spaces...

label.attribsSelect{margin-right:10px;}

Thanks again for your help!

I did not think I would throw all my descriptions to the right.
But now I think its the only way to make it look correct.

Thanks again!

:D

Hi Nick,

I see you were a great help here. Any chance of having a look at this page http://www.k2tog.com.au/index.php?main_page=product_info&cPath=26_30&products_id=214

I would like the Add to Cart button to be higher, right underneath the image.

Thanks.

You move the section for add to cart in templates/YOUR TEMPLATE/templates_products_info_display

higher...

What milobloom said is part of the solution. Move the code block for add to cart up above the code block for the description.

However, as both the image and the add to cart are floated right then I suspect this isn't going to achieve what you want entirely. A first guess would be that you need to add:

clear:right;

to the rules of addCart in the stylesheet. Come back to me if you want more advice than this...

Thanks Nick, you are ace!

@ awbo

Thank you.

It looks much better, eh? None of my business but I might add this to make the border around the add to cart a bit less aggressive:

#cartAdd {
	margin: 50px 5px 5px 5px;
	float: right;
	border: 1px solid #990000; /*border around cart box*/
	padding: 1em; /**internal padding in the cart box*/
	text-align: center;
	clear: right;
	
	/*float: right;
	margin: 1em;
	*/
	
	}

Ignore me if you want :smile:

Thanks, that's better too. Open to any and all suggestions.