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! :)

[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

[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.

[Maccon]

gotcha! many thanks! :)

[Maccon]

Im still struggling to align the text fields...

i want to achieve a look like the following (__=spaces)

optionname: ##############################__TEXTENTRY
optionnameb:##############################__TEXTENTRY

currently it sits like and look untidy:

optionname:TEXTENTRY
optionnameb:TEXTENTRY

site whitesflorist.co.uk

CSS Below:

/**
 * 
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 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: stylesheet.css 3215 2006-03-20 06:05:55Z birdbrain $
 */

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #3B3B39;
	background-color: #FFFFFF;
	background-image: url(../images/body_bg.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	line-height: 1.5em;
	}

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
	color: #3B3B39;
	text-decoration: none;
	}
 
a:visited {
	color: #3B3B39;
	text-decoration: none;
	}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
	color: #666666;
	}

a:active {
	color: #000000;
	}

h1 {
	font-size: 1.5em;
	}

h2 {
	font-size: 1.4em;
	}

h3 {
	font-size: 1.3em;
	}

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
	font-size: 1em;
	}
	
.biggerText {
	font-size: 1.2em;
	}

h1, h2, h3, h4, h5, h6 {
	margin: 0.3em 3px;
	}

CODE {
	font-family: arial, verdana, helvetica, sans-serif;
	font-size: 1em;
	}

FORM, SELECT, INPUT {
	display: inline;
	font-size: 1em;
	margin: 0.1em;
	}

TEXTAREA {
	float: left;
	margin: auto;
	display: block;
	width: 95%;
	}

input:focus, select:focus, textarea:focus {
	background: #F0F8FF;

	}

FIELDSET {
	padding: 0.5em;
	margin: 0.5em 0em;
	border: 1px solid #6caa23;
	background-color: #fbf6d5
	}

LEGEND {
	font-weight: bold;
	padding: 0.3em;
	background-color: #6caa23;
	color: #FFFFFF;
	}
.leftBoxHeading label, .rightBoxHeading label { line-height: 4.2em;}

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

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

LABEL.checkboxLabel, LABEL.radioButtonLabel {
	margin: 0.5em 0.3em;
	}

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, {
	float: left;
	}
	
.attribImg {
	float: left;
	}

LABEL.inputLabel {
	width: 11em;
	float: left;
	}

LABEL.inputLabelPayment {
	width: 15em;
	float: left;
	}

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel  {
	width: 12em;
	float: left;
	}

P, ADDRESS {
	padding: 0.5em;
	}

ADDRESS {
	font-style: normal;
	}

.clearBoth {
	clear: both;
	}

HR {
	height: 1px;
	margin-top: 0.5em;
	border: none;
	border-bottom: 1px solid #9A9C86;
	}

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
	line-height: 1.8em;
	padding: 0.2em;
	border: 1px solid #000000;
	}

.messageStackWarning, .messageStackError {
	background-color: #ff0000;
	color: #ffffff;
	}

.messageStackSuccess {
	background-color: #99FF99;
	color: #000000;
	}

.messageStackCaution {
	background-color: #FFFF66;
	color: #000000;
	}

/*wrappers - page or section containers*/
#mainWrapper {

	text-align: left;
	width: 842px;
	vertical-align: top;
	background-image: url(../images/mainwrapper_tile.jpg);
	background-repeat: repeat-y;
	background-position: center;
	}

#logoWrapper {
	background-color: transparent;
    height:221px;
	}
	
#headerWrapper {
	background-image: url(../images/header_bg.jpg);
    background-repeat: no-repeat;
}

#contentMainWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #popupAdditionalImage, #popupImage {
	margin: 0em;
	margin-top: 15px;
	}
	

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
	margin: auto;
	} 

#tagline {
	color:#ffffff;
	font-size: 1.4em;
	font-weight: bold;
	text-align : right;
	vertical-align: middle;
	padding-right: 30px;
	padding-top: 60px;
	}

#sendSpendWrapper {
	border: 1px solid #cacaca;
	float: right;
	margin: 0em 0em 1em 1em;
	}

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
	margin: 0;
	width: 47%;
	}

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

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
	margin: 0em;
	font-size: 0.9em;
	}
.navNextPrevList {
	display: inline;
	white-space: nowrap;
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	}

#navMainWrapper {
	margin: 0em;
	margin-bottom: 0px;
	height: 26px;
	background-color: #989da3;
	font-weight: bold;
	color: #000000;
	padding: 15px;
	background-image: url(../images/nav_cat_bg.jpg);
	background-repeat: no-repeat;
	}
	
#navSuppWrapper {	
    margin: 0em;
	margin-bottom: 0px;
	height: 26px;
	background-color: #989da3;
	font-weight: bold;
	color: #ffffff;
	padding: 15px;
	background-image: url(../images/footer.jpg);
	background-repeat: repeat-y;
	}
	
#navCatTabsWrapper {
    margin-left: 20px;
	margin-right: 20px;
	width: 802px;
	background-image: none;
	height: 20px;
	position: absolute;
	top: 12px;
}

#navMain ul, #navSupp ul, #navCatTabs ul  {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	text-align: center;
	line-height: 1.5em;
	}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
	display: inline;
	white-space: nowrap;
	}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
	color: #ffffff;
	font-size: 1.4em;
	}

#navEZPagesTOCWrapper {
	font-weight: bold;
	float: right;
	height: 1%;
	border: 1px solid #000000;
	}

#navEZPagesTOC ul {
	margin: 0;
	padding:  0.5em 0em;
	list-style-type: none;
	line-height: 1.5em;
	}

#navEZPagesTOC ul li {
	white-space: nowrap;
	}

#navEZPagesTOC ul li a {
	padding: 0em 0.5em;
	margin: 0;
	}

#navMainSearch, #navCategoryIcon, .buttonRow, #indexProductListCatDescription {
	margin: 0.5em;
	}

#navBreadCrumb {
	background-color: transparent;
	}

#navEZPagesTop {
	background-color: #FFFFFF;
	}

#navBreadCrumb, #navEZPagesTop {
	font-size: 0.95em;
	font-weight: bold;
	margin: 0em;
	padding: 0.5em 0.5em 0.5em 1.5em;
	}

#navColumnOne {
	background-color: transparent;
    }

#navColumnTwo {
	background-color: transparent;	
	}

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
	vertical-align: top;
	}
	
table {padding-left: 8px;
       padding-right: 8px;
	   }

/*.content,*/ #productDescription, .shippingEstimatorWrapper {
	/*font-size: 1.2em;*/
	padding: 0.5em;
	}

.alert {
	color: #FF0000;
	margin-left: 0.5em;
	}
.advisory {}
.important {
	font-weight: bold;
	}
.notice {}
.rating{}
.gvBal {
	float: right;
	}
.centerColumn, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {
	padding: 20px;
	}

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
	font-size: 0.9em;
	}

/*Shopping Cart Display*/
#cartAdd {
	float: right;
	text-align: center;
	margin: 1em;
	border: 1px solid #000000;
	padding: 1em;
	}


.tableHeading TH {
	border-bottom: 1px solid #cccccc;
	}

.tableHeading, #cartSubTotal {
	background-color: #e9e9e9;
	 }

#cartSubTotal {
	border-top: 1px solid #cccccc;
	font-weight: bold;
	text-align: right;
	line-height: 2.2em;
	padding-right: 2.5em;
	}

.tableRow, .tableHeading, #cartSubTotal {
	height: 2.2em;
	}

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay   {
	padding: 0.5em 0em;
	}

.cartUnitDisplay, .cartTotalDisplay {
	text-align: right;
	padding-right: 0.2em;
	}

#scUpdateQuantity {
	width: 2em;
	}

.cartQuantity {
	width: 4.7em;
	}

.cartNewItem {
	color: #33CC33;
	position: relative;  /*do not remove-fixes stupid IEbug*/
	}

.cartOldItem {
	color: #606000;
	position: relative;   /*do not remove-fixes stupid IEbug*/
	}

.cartBoxTotal {
	text-align: right;
	font-weight: bold;
	}

.cartRemoveItemDisplay {
	width: 3.5em;
	}

#cartAttribsList {
	margin-left: 1em;
	}

#mediaManager {
	width: 50%; 
	margin: 0.2em;
	padding: 0.5em;
	}
.normalprice, .productSpecialPriceSale {
	text-decoration: line-through;
	}

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
	color: #ff0000;
	}

#cartBoxListWrapper ul, #ezPageBoxList ul {
	list-style-type: none;
	}

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
	margin: 0;
	padding: 0.2em 0em;
	} 

.totalBox {
	width: 5.5em;
	text-align: right;
	padding: 0.2em;
	}

.lineTitle, .amount {
	text-align: right;
	padding: 0.2em;
	}

.amount {
	width: 5.5em;
	}

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
	margin: 0em 1em 1em 0em ;
	}

.categoryIcon {}
#cartImage {
	margin: 0.5em 1em;
	}

/*Attributes*/
.attribImg {
	width: 25%;
	margin: 0.3em 0em;
}

.attributesComments {}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
	margin: 1em 0em;
	}

/*sideboxes*/
.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a {
	font-size: 1em;
	height: 35px;
	color: #ffcc33;
	line-height: 4.2em;
	}

.leftBoxHeading, .centerBoxHeading {
	margin: 0em;
	background-color: transparent;

	}
	
.leftBoxHeading {
	margin: 0em;
	background-color: transparent;
	background-image: url(../images/menu_bg.gif);
	width: 159px;
	background-repeat: no-repeat;
	}

.leftBoxContainer {
     border: none;
	}

.sideBoxContent {
	background-color: transparent;
	padding: 0.4em;
	}

h3.rightBoxHeading, h3.rightBoxHeading a {
	font-size: 1em;
	height: 35px;
	color: #ffcc33;
	line-height: 4.2em;
	}
.rightBoxHeading {
	margin: 0em;
	background-color: transparent;
	background-image: url(../images/menu_right_bg.gif);
		width: 150px;
	background-repeat: no-repeat;
	}
	
.rightBoxContainer {
	border: none;
	}


h3.leftBoxHeading a:hover {
	color: #FFFF33;
	text-decoration: none;
	}

h3.rightBoxHeading a:hover {
	color: #606000;
	text-decoration: none;
	}

.rightBoxContent {
	background-color: #000000;
	margin-bottom: 1em;
	}

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
	text-align: center;
	}

#siteinfoIP, #siteinfoLegal {
	background-color: #FFFFFF;
	}

#bestsellers .wrapper {
	margin: 0em 0em 0em 1.5em;
	}

#bestsellers ol {
	padding: 0;
	margin-left: 1.1em;
	}

#bestsellers li {
	padding: 0;
	margin: 0.3em 0em 0.3em 0em;
	}

#bannerboxHeading {
	background-color: transparent;
}

#upProductsHeading {
	text-align: left;
	}

#upDateHeading {
	text-align: right;
	}

/*misc*/
.back {
	float: left;
	}

.forward {
	float: right;
	}
	
.hiddenField {
	display: none;
	}

.visibleField {
	display: inline;
	}	

.bold {
	font-weight: bold;
	}

.rowOdd {
	background-color: #E8E8E8;
	height: 1.5em;
	vertical-align: top;
	}

.rowEven {
	background-color: #F0F0F0;
	height: 1.5em;
	vertical-align: top;
	}
	
.productListing-odd {background-color: #FFFFFF;
                      }
					  
.productListing-even {background-color: #e5e5e5;
                      }
					  
.listingProductImage {padding: 4px;}

CAPTION {
	/*display: none;*/
	}

#myAccountGen li, #myAccountNotify li {
	margin: 0;
	} 

.accountTotalDisplay, .accountTaxDisplay {
	width: 20%;
	text-align: right;
	/*vertical-align: top*/
	}

.accountQuantityDisplay {
	width: 10%;
	vertical-align: top
	}

TR.tableHeading {
	background-color: #cacaca;
	height: 2em;
	}

#siteMapList {
	width: 90%;
	float: right;
	}

.ratingRow {
	margin: 1em 0em 1.5em 0em;
	}

LABEL#textAreaReviews {
	font-weight: normal;
	margin: 1em 0em;
	}

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp {
	background-color: #ffffff;
	}
.categoryListBoxContents {
	float: left;
	}

[Maccon]

another option woul dbe to have them all listed underneath the option name (including dropdowns)

optionname
TEXTENTRYA


optionnameb
TEXTENTRYB


optionnamec
DROPDOWN