Alignment on Attributes

[Maccon]

Hey,

Im having some issues trying to control where my text and drop downs etc sit in regards to the element...

its appearing to put them on the same line but horizontal alignment seems to be off...

EG (dots represent space as pulls it to left align in here when i leave spacing!)

...........................[TEXT ENTRY BOX]
Enter Name:


...........................[DROPDOWN BOX]
Colour Preference:

I have tried to play around with the settings but cant seem to get it to sit below or inline....

any thoughts???

Thanks!!

[gjh42]

A link to your site will make it easier to give specific advice.

[Maccon]

Sorry!!

ok so link is here..

http://whitesflorist.co.uk/index.php...&products_id=1

now i have played around with the css and added the following:

.wrapperAttribsOptions {
	margin: 0.3em 0em;
		line-height: 1.2em;
	padding: 0.2em;
	width: 16em;
	}

This works to an extent but drops the entry fields onto a new line.

Thanks for your interest! :)

I have removed the width field so you can see the effect i was getting! :)

[gjh42]

You have given a huge line-height which is causing the problem:

LABEL, h4.optionName {
	line-height: 4.2em;
	padding: 0.2em;
	width: 16em;
	}

You can just eliminate this:

LABEL, h4.optionName {
	padding: 0.2em;
	width: 16em;
	}

If you want other labels to have this line-height, separate the selectors into two rules:

LABEL {
	line-height: 4.2em;
	padding: 0.2em;
	width: 16em;
	}

h4.optionName label {
	line-height: 1.2em;/*adjust to taste*/
	padding: 0.2em;
	width: 16em;
	}

[Maccon]

You are a scholar and a gentleman!! Splitting the two worked a treat for alignment!!

Only issue now is this leaves the boxes next to the text - Any thoughts on getting all the boxes aligned on the vertical now??? :)

The reason for the line height was to try to get the text to sit in the middle of teh menu graphics on left and right. Had to try to hack it and this method seemed to work.

Thanks again for taking the time to help me on this one!! :)

[gjh42]

If you only wanted to alter the sidebox headings, you could use

.leftBoxHeading label, .rightBoxHeading label { line-height: 4.2em;}

so labels in other parts of your site are not affected (and there are many other labels, which may now look odd).

For the box alignment, add a plain

h4.optionName {
	width: 16em;
	}

and you can remove the width from the other rules.

[fairestcape]

I didn't like the default layout for the attributes labels and input fields, and I hacked the file in template_default/templates:

tpl_modules_attributes.php

To give a line break after the Attribute Title and to put its input field below it.

The ORIGINAL code looks like:-

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

My MODIFIED code looks like:-

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

After editing, I saved the file to my CUSTOM templates folder