Product Option Horizontol Alignment

[econcepts]

I actually want the 2 drop down boxes beside each and the color swatces above them.

Here ya go (example page at http://www.zencartoptimization.com/f...p/pmsample.php).

It turned out that the only thing you needed was to alter the layout of the page a bit. I added the styles here "hard coded" into the template, but you'll want to add them at the respective points within the Stylesheet instead. I only did it here for ease of reading.

You'll want to make these edits within your "Attributes" module.

Here is the section of code you need to alter (items I altered/added are in bold red), your original location is in bold only:

---------------------------------------------------------------------
<!--bof Attributes Module -->

<div id="productAttributes" style="border: 1px solid #cccccc; width:325px;" class="forward">
<h3 id="attribsOptionsText">Please Choose: </h3>
<!-- Start new location of image attribute code -->
<div class="attribImg"><img src="images/attributes/apple.jpg" alt="" width="45" height="27" /><br />Apple</div>
<div class="attribImg"><img src="images/attributes/aqua.jpg" alt="" width="45" height="27" /><br />Aqua</div>
<div class="attribImg"><img src="images/attributes/banana.jpg" alt="" width="45" height="27" /><br />Banana</div>
<br class="clearBoth" />
<!-- End new location of image attribute code -->

<div class="wrapperAttribsOptions back">
<h4 class="optionName back"><label class="attribsSelect" for="attrib-1">Color</label></h4>
<div class="back">
<select name="id[1]" id="attrib-1">
<option value="75">Apple</option>
<option value="76">Aqua</option>
<option value="74">Banana</option>

</select>

</div>
<br class="clearBoth" />
</div>

<!-- Your old location of code -->
<!--<div class="attribImg"><img src="images/attributes/apple.jpg" alt="" width="45" height="27" /><br />Apple</div>
<div class="attribImg"><img src="images/attributes/aqua.jpg" alt="" width="45" height="27" /><br />Aqua</div>
<div class="attribImg"><img src="images/attributes/banana.jpg" alt="" width="45" height="27" /><br />Banana</div>
-->




<div class="wrapperAttribsOptions back">
<h4 class="optionName back"><label class="attribsSelect" for="attrib-2">Size</label></h4>
<div class="back">
<select name="id[2]" id="attrib-2">
<option value="20">Large</option>
<option value="18">Medium</option>
<option value="21">Small</option>
</select>

</div>

<br class="clearBoth" />
</div>









</div><!--eof Attributes Module -->
------------------------------------------------------------------------

If you have any questions let me know.