Attribute dropdown, vertical alignment

[edwinlloyd]

It is quite possible that over time I have tinkered with my CSS once too often, but for ages the alignment of the option box next to a dropdown attribute has annoyed me. Please look at the option boxes at the bottom of this product listing:

http://www.mygreenerhome.co.uk/laund...-dryer-82.html

For now, never mind the left to right alignment. What I cannot fix is that each dropdown box appears to start half a line above the descriptive entry to its right. I've tried in different browsers, but the layout is definitely not right.

Can anyone help please?

[Leialoha]

Aloha,

I had that Pronlem too... Attributes under the Add to Cart Button,

So You need to edit your : tpl_product_info_display
FROM: (unless you already worked on it)

YOURSHOP/includes/template/template_default/templates/

and SAVE in your own template folder first !!!

YOURSHOP/includes/template/YOURTEMPLATE/templates/

before editing, but I assume you know about the override possibilities.... If not they dont take long to study online here,
but they are very convenient and easy to use...

So What you do:

When you open the file it will you see this blocks...

<!-- bof WHAT EVER BLOCK --> bof=begin of...
<!-- eof WAHT EVER BLOCK --> eof=end of...

So you can Copy and Paste Whole Blocks including the Comments bof---eof, to keep it easy and readable...

So just Copy the "Add to Cart Block" underneath the "Attributes Module Block"

Here some of your generated Source Code so you can check it out

<!--bof Add to Cart Box -->
                  <div id="cartAdd">
    Add to Cart: <input type="text" name="cart_quantity" value="1" maxlength="6" size="4" /><br /><br /><input type="hidden" name="products_id" value="82" /><input type="image" src="includes/templates/template_default/buttons/english/button_in_cart.gif" alt="Add to Cart" title=" Add to Cart " />          </div>
  <!--eof Add to Cart Box-->

<!--bof Product details list  -->
<ul id="productDetailsList" class="floatingBox back">
  
  
  
  <li>Manufactured by: GNU</li>

</ul>
<br class="clearBoth" />
<!--eof Product details list -->

<!--bof Attributes Module -->
<div id="productAttributes">
<h3 id="attribsOptionsText">Please Choose: </h3>


<div class="wrapperAttribsOptions">
<h4 class="optionName back"><label class="attribsSelect" for="attrib-1">Colour</label></h4>
<div class="back">

... AND SO ON....
<!--eof Attributes Module --> 

With you other Layout Problem... I would play with css, if you know how... The Problem is that your Option Text is a h4 a Headline (makes the "BOX" higher) and the Option itself a normal Div and just sticks to it, floats left to it...

You could make up your own classes for this site...

You need to open tpl_modules_attributes.php same location and same way to handle this file before editing as I explained above...
& your css file....

Look for:

<div class="wrapperAttribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
<div class="opmenu"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />

I changed stuff in the 2. & 3rd Line H4 to DIV & the classes

<div class="wrapperAttribsOptions">
<div class="my_option_name"><?php echo $options_name[$i]; ?></div>
<div class="my_opmenu"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />

bow you need to define the two classes I made up in CSS file...

to give them more a table look you can deifne the with of the first DIV, make the Text Alignment to the right, add some padding on the right so it get some space to breathe and the second class let it float left to the box...

.my_option_name { ... }
.my_opmenu { ... }

Hope I could help you ab bit !

Much love from Hawaii
Astrid

[Leialoha]

.my_option_name {
width: 150px;
font-weight: bold;
text-align: left;
padding-left: 4px; }

.my_opmenu { float: left; }

I have not tested this, but as a direction... but it could work....

[edwinlloyd]

Thank you very much Leialoha.

I am surprised that all this is necessary. Am I the only person (except you) to object to the lack of alignment?

Anyhow, I am grateful to you for your replies.

[gjh42]

You can actually get a lot of alignment done with the stock elements.

This is some of the CSS I have added for attribute formatting:

	
#productAttributes input { 
	position: relative; 
	bottom: -.4em;
	} 
	
input#attrib-11-172 {display: none;} /*hide "this piece" radiobutton*/

input#attrib-11-172+label.attribsRadioButton {
    position: relative; 
    bottom: -.3em;
    }
	
h4.optionName { 
	position: relative; 
	bottom: .2em;
	margin-left: 0; 
	padding-left: 0;
	}
h4.optionName label {padding-left: 0;}

It is even possible to target one particular radiobutton label for special treatment - the code adds ids to the inputs.

See my site for the effects.

[edwinlloyd]

Thanks to you all for this. For the benefit of any future thread readers, what works well for me is the following:

In your CSS find the entry that looks like this:

LABEL, h4.optionName {
line-height: 1.5em;
padding: 0.2em;
}

and change it to:

LABEL, h4.optionName {
line-height: 1.5em;
/* padding: 0.2em;*/
position: relative;
bottom: .1em;
}

Looks pretty tidy now.

Edwin