I have been trying to find relevant threads on this but I am struggling to find anything of a similar nature.
Here is my URL:-
Ouch! Body Jewellery
The code resizes all of the images to 100 x 100 pixels, however you will see that they don't vertically align correctly (as there is some floating going on in there, I guess their vertical position depends on the length of the product name).
I would like them all to align correctly (ie, none of them higher or lower than the other three products in their row). I have tried splitting each product with its own table and rows (product name in the top row, image in the middle row, etc) but this just bulks each listing out too much and I am pretty sure there is a neater (more effective) way to do it.
Could I ask for some help please, or at least a point in the right direction? Here is my current code from 'Regular Product Summary' (I know it needs tidying up due to some twiddling and tweaking I have managed here and there):-
Here is my URL:-
Ouch! Body Jewellery
The code resizes all of the images to 100 x 100 pixels, however you will see that they don't vertically align correctly (as there is some floating going on in there, I guess their vertical position depends on the length of the product name).
I would like them all to align correctly (ie, none of them higher or lower than the other three products in their row). I have tried splitting each product with its own table and rows (product name in the top row, image in the middle row, etc) but this just bulks each listing out too much and I am pretty sure there is a neater (more effective) way to do it.
Could I ask for some help please, or at least a point in the right direction? Here is my current code from 'Regular Product Summary' (I know it needs tidying up due to some twiddling and tweaking I have managed here and there):-
HTML Code:
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsFilteringEnabled%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22MatchLayouts%22%20%2f%3e%20%3d%3d%20True%20AND%0d%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%0d%3cactinic%3avariable%20name%3d%22IsProductPageGenerated%22%20%2f%3e%20%3d%3d%20True" > <actinic:variable name="FilteredProductLayout" /> </actinic:block> <actinic:block if="%28%3cactinic%3avariable%20name%3d%22IsFilteringEnabled%22%20%2f%3e%20AND%0d%3cactinic%3avariable%20name%3d%22MatchLayouts%22%20%2f%3e%20%3d%3d%20False%29%20OR%20%0d%3cactinic%3avariable%20name%3d%22IsFilteringEnabled%22%20%2f%3e%20%20%3d%3d%20False%20OR%0d%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Product%20Page%22%29%20OR%0d%3cactinic%3avariable%20name%3d%22IsProductPageGenerated%22%20%2f%3e%20%3d%3d%20False" > <actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e" > <form method="post" action="<actinic:variable value="Shopping Cart Script URL" name="OnlineScriptURL" />"> <input type="hidden" name="SID" value="<actinic:variable name="SectionID" />" /> <input type="hidden" name="PAGE" value="PRODUCT" /> <actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29" > <input type="hidden" name="PAGEFILENAME" value="<actinic:variable name="SectionPageName" />" /> </actinic:block> <actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Product%20Page%22%29" > <input type="hidden" name="PAGEFILENAME" value="<actinic:variable name="ProductPageName" />" /> </actinic:block> <Actinic:SECTION BLOB='<actinic:variable name="SectionCatFile" />'/> <actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e" > <!-- Hidden field when in trial mode --> <input type="hidden" name="SHOP" value="<actinic:variable name="HiddenFields" />" /> </actinic:block> </actinic:block> <table height="255" border="0"> <tr> <td> <actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e" > <actinic:variable formatting="font(Color|808080)" name="ProductReference" /><br> </actinic:block> <actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%0d%28%3cactinic%3avariable%20name%3d%22ProductListNameLink%22%20%2f%3e%20%3d%3d%201%29" ><a href="<actinic:variable name="ProductPageName" />" onclick="AppendParentSection(this, <actinic:variable name="SectionID" />)"> </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%20AND%0d%28%3cactinic%3avariable%20name%3d%22ProductListNameLink%22%20%2f%3e%20%3d%3d%20%202%29" > <actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20a%20Pop%2dUp%20Window%22" > <a href="<actinic:variable name="ExtendedInfoPageEncoded" />" target="ActPopup" onclick="return ShowPopUp('<actinic:variable name="ExtendedInfoPageEncoded" />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);"> </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20the%20Same%20Window%22" > <a href="<actinic:variable name="ExtendedInfoPageName" />"> </actinic:block> </actinic:block> <actinic:variable formatting="h3" name="ProductName" /> <actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%0d%28%3cactinic%3avariable%20name%3d%22ProductListNameLink%22%20%2f%3e%20%3e%200%29" > </a> </actinic:block> <br><br> <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageFileName%22%20%2f%3e%20%21%3d%20%22%22" > <p class="product-image set-left"><actinic:variable value="Small Product Image" name="ProductImageLayout" /></p> </actinic:block> <a name="<actinic:variable name="EncodedProductAnchor" />"></a> <actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29%20AND%0d%28%3cactinic%3avariable%20name%3d%22ProductListNameLink%22%20%2f%3e%20%3d%3d%201%29" ><a href="<actinic:variable name="ProductPageName" />" onclick="AppendParentSection(this, <actinic:variable name="SectionID" />)"> </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%20AND%0d%28%3cactinic%3avariable%20name%3d%22ProductListNameLink%22%20%2f%3e%20%3d%3d%20%202%29" > <actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20a%20Pop%2dUp%20Window%22" > <a href="<actinic:variable name="ExtendedInfoPageEncoded" />" target="ActPopup" onclick="return ShowPopUp('<actinic:variable name="ExtendedInfoPageEncoded" />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);"> </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20the%20Same%20Window%22" > <a href="<actinic:variable name="ExtendedInfoPageName" />"> </actinic:block> </actinic:block> </td> </tr> </table> <div align="center"> <actinic:block if="%3cactinic%3avariable%20name%3d%22UseDynamicPrices%22%20%2f%3e%20%3d%3d%20true%20AND%20%3cactinic%3avariable%20name%3d%22ProductComponentCount%22%20%2f%3e%20%3d%3d%200" > <actinic:variable name="ProductJavascriptLayout" /> </actinic:block> <actinic:variable name="CartError" /> <actinic:block if="%3cactinic%3avariable%20name%3d%22PriceIsEnabled%22%20%2f%3e" > <p class="product-price"> <Actinic:PRICES PROD_REF="<actinic:variable name="ProductID" />" RETAIL_PRICE_PROMPT="<actinic:variable name="ProductPriceDescription" />"> <actinic:variable name="PriceListRetail" /> </Actinic:PRICES> <actinic:variable name="DynamicPrice" /> </p> </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20False" > <p class="product-price"> <Actinic:NOTINB2B><br><actinic:variable name="ProductPriceNotEnabledMessage" /></Actinic:NOTINB2B> </p> </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22IsCustomerMessageUsed%22%20%2f%3e" > <p class="product-price"> <Actinic:PRICE_EXPLANATION PROD_REF="<actinic:variable name="ProductID" />" COMPONENTID=-1><actinic:variable name="RetailCustomerMessage" /></Actinic:PRICE_EXPLANATION> </p> </actinic:block> </div> <a href="<actinic:variable name="ProductPageName" />"><img src="more-info.gif" border="0"></a> <!-- <actinic:block if="%3cactinic%3avariable%20name%3d%22IsAddToCartButtonShown%22%20%2f%3e%20AND%20%0d%28%3cactinic%3avariable%20name%3d%22NumberAttributesInPushButtonGrid%22%20%2f%3e%20%3d%3d%200%29" > <p class="cart-button-placement set-left"> <actinic:variable name="AddToCartButton" /> </p> </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e" > <p class="cart-button-placement set-left"> <strong><span class="actrequired"><actinic:variable name="OutOfStock" /></span></strong> </p> </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e" > <p class="cart-button-placement set-left"> <strong><span class="actrequired"><actinic:variable name="CatalogSuspended" /></span></strong> </p> </actinic:block> <div class="set-below-right"> <actinic:variable name="FeefoProductLogo" /> </div> <p class="quantity-box"> <actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptShown%22%20%2f%3e%20AND%20%28%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e%20%3d%3d%20FALSE%29%20AND%20%28%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e%20%3d%3d%20FALSE%29" > <actinic:block if="%3cactinic%3avariable%20name%3d%22CartButtonVisibleToAllCustomers%22%20%2f%3e" > --> <!-- This code is used when the quantity box is visible to all customers --> <!-- <span class="actrequired"><actinic:variable name="QuantityPrompt" /></span><input type="text" name="Q_<actinic:variable name="ProductID" />" size="4" value="<actinic:variable name="DefaultQuantity" />" class="form_input_general" <actinic:block if="%3cactinic%3avariable%20name%3d%22UseDynamicPrices%22%20%2f%3e%20%3d%3d%20TRUE%20AND%20%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e%20%3d%3d%20FALSE%20AND%20%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20FALSE" >onpaste="QuantityChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />)" onkeyup="QuantityChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />)"</actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22UseDynamicPrices%22%20%2f%3e%20%3d%3d%20TRUE%20AND%20%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e%20%3d%3d%20TRUE%20AND%20%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20FALSE" >onpaste="QuantityChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />, '<actinic:variable name="ShopID" />')" onkeyup="QuantityChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />, '<actinic:variable name="ShopID" />')"</actinic:block>/> </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22EnabledForCustomerGroupID%22%20%2f%3e%20%21%3d%20%22%22" > <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e" > --> <!-- This code is used when the quantity box is visible to retail customers, but not all other customer groups --> <!-- <Actinic:ShowForPriceSchedule Schedules="<actinic:variable name="EnabledForCustomerGroupID" />"> <span class="actrequired"><actinic:variable name="QuantityPrompt" /></span><input type="text" name="Q_<actinic:variable name="ProductID" />" size="4" value="<actinic:variable name="DefaultQuantity" />" class="form_input_general" <actinic:block if="%3cactinic%3avariable%20name%3d%22UseDynamicPrices%22%20%2f%3e%20%3d%3d%20TRUE%20AND%20%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e%20%3d%3d%20FALSE%20AND%20%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20FALSE" >onpaste="QuantityChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />)" onkeyup="QuantityChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />)"</actinic:block><actinic:block if="%3cactinic%3avariable%20name%3d%22UseDynamicPrices%22%20%2f%3e%20%3d%3d%20TRUE%20AND%20%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e%20%3d%3d%20TRUE%20AND%20%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20FALSE" >onpaste="QuantityChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />, '<actinic:variable name="ShopID" />')" onkeyup="QuantityChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />, '<actinic:variable name="ShopID" />')"</actinic:block>/> </Actinic:ShowForPriceSchedule> </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20FALSE" > --> <!-- This code is used when the quantity box needs to hidden from retail customers --> <!-- <actinic:block if="%3cactinic%3avariable%20name%3d%22UseDynamicPrices%22%20%2f%3e%20%3d%3d%20FALSE%20OR%20%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20TRUE" > <Actinic:ShowForPriceSchedule Schedules="<actinic:variable name="EnabledForCustomerGroupID" />" HTML="<p><span class='actrequired'><actinic:variable name="QuantityPrompt" /></span><input type='text' name='Q_<actinic:variable name="ProductID" />' size='4' value='<actinic:variable name="DefaultQuantity" />' class='form_input_general' /></p>"></Actinic:ShowForPriceSchedule> </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22UseDynamicPrices%22%20%2f%3e%20%3d%3d%20TRUE%20AND%20%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e%20%3d%3d%20FALSE%20AND%20%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20FALSE" > <Actinic:ShowForPriceSchedule Schedules="<actinic:variable name="EnabledForCustomerGroupID" />" HTML="<p><span class='actrequired'><actinic:variable name="QuantityPrompt" /></span><input type='text' name='Q_<actinic:variable name="ProductID" />' size='4' value='<actinic:variable name="DefaultQuantity" />' class='form_input_general' onpaste=QuantityChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />) onkeyup=QuantityChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />)/></p>"></Actinic:ShowForPriceSchedule> </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22UseDynamicPrices%22%20%2f%3e%20%3d%3d%20TRUE%20AND%20%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e%20%3d%3d%20TRUE%20AND%20%3cactinic%3avariable%20name%3d%22IsPreviewMode%22%20%2f%3e%20%3d%3d%20FALSE" > <Actinic:ShowForPriceSchedule Schedules="<actinic:variable name="EnabledForCustomerGroupID" />" HTML="<p><span class='actrequired'><actinic:variable name="QuantityPrompt" /></span><input type='text' name='Q_<actinic:variable name="ProductID" />' size='4' value='<actinic:variable name="DefaultQuantity" />' class='form_input_general' onpaste=QuantityChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />, '<actinic:variable name="ShopID" />') onkeyup=QuantityChanged(this, '<actinic:variable name="DynamicPriceCGIURL" />', <actinic:variable name="SectionID" />, '<actinic:variable name="ShopID" />')/></p>"></Actinic:ShowForPriceSchedule> </actinic:block> </actinic:block> </actinic:block> </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptHidden%22%20%2f%3e" > <input type="hidden" name="Q_<actinic:variable name="ProductID" />" value="<actinic:variable name="DefaultQuantity" />" /> </actinic:block> </p> --> <!-- <div id="idVars<actinic:variable name="ProductID" />"> <actinic:variable name="AttributeList" /> <actinic:variable name="ComponentList" /> </div> --> <p class="product-text"> <actinic:variable name="RealTimeStockDisplay" /> </p> <!-- <actinic:block if="%3cactinic%3avariable%20name%3d%22FileURLNotEmpty%22%20%2f%3e" > <p class="product-text"> <a href="<actinic:variable name="ProductLinkInfo" />"> <actinic:variable name="ProductLinkText" /> </a> </p> </actinic:block> --> <actinic:block if="%3cactinic%3avariable%20name%3d%22IsOtherInfoPromptShown%22%20%2f%3e" > <p class="product-prompt"> <span class="actrequired"><actinic:variable name="OtherInfoPrompt" /></span><br> <input class="input-border" type="text" name="O_<actinic:variable name="ProductID" />" maxlength="1000" value="" /> </p> </actinic:block> <actinic:block if="%3cactinic%3avariable%20name%3d%22IsDatePromptShown%22%20%2f%3e" > <p class="product-prompt"> <span class="actrequired"><actinic:variable name="DatePrompt" /></span> <actinic:variable name="DayList" /><actinic:variable name="MonthList" /><actinic:variable name="YearList" /> </p> </actinic:block> <div class="set-below-right"> <actinic:variable name="FeefoProductFeedback" /> </div> <actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e" > </form> </actinic:block> </actinic:block>
Comment