solidariti
09-23-2009, 04:53 AM
I have created an e-commerce website for some personal trainers and I have a product page here: http://newmovementfitness.co.uk/products-page but for some reason that I can't understand the products are out of kilter. It doesn't look good. The code is below, also has anyone got any ideas how I could make it look a little more professional. I'm using wpe-commerce plugin for wordpress.
I thought it could be the shopping cart box on the right that is putting it out but when I take that out it doesn't seem to change.
HTML Source
<div class="productdisplay default_product_display product_view_2 all-categories">
<div class="textcol">
<div class="imagecol">
<a rel="12 Week Make Over" href="http://newmovementfitness.co.uk/products-page/personal-training/12-week-make-over/">
<img class="product_image" id="product_image_2" alt="12 Week Make Over" title="12 Week Make Over" src="http://newmovementfitness.co.uk/wp-content/uploads/wpsc/product_images/thumbnails/thumb-12wkmakeover-150x128.jpg"/>
</a>
</div>
<div class="producttext">
<h2 class="prodtitles">
<a class="wpsc_product_title" href="http://newmovementfitness.co.uk/products-page/personal-training/12-week-make-over/">12 Week Make Over</a>
<a class='wpsc_edit_product' href='http://newmovementfitness.co.uk/wp-admin/admin.php?page=wpsc-edit-products&product_id=2'>Edit</a> </h2>
<div class='wpsc_description'><p>What is it<br />
A Life changing Personal Experience. The 12 week make over will transform you inside and out.</p>
</div>
<div class='additional_description_span'>
<a href='http://newmovementfitness.co.uk/products-page/personal-training/12-week-make-over/' class='additional_description_link'>
<img class='additional_description_button' src='http://newmovementfitness.co.uk/wp-content/plugins/wp-e-commerce/images/icon_window_expand.gif' title='Additional Description' alt='Additional Description' />More Details </a>
<span class='additional_description'><br />
<h3>Where is it</h3>
Based in a boutique, lavishly equipped studio in Buckinghamshire
<h3>What is a 12 week makeover and what will it achieve
You'll receive:-</h3>
<ul>
<li>Cutting edge 1 on 1 personal training</li>
<li>Sports Massage</li>
<li>Group training</li>
<li>Weekly Analysis and reviews</li>
<li>Tailored nutritional guidance </li>
<li>A wealth of education</li>
</ul>
If you’re serious about change then you’re only 12 weeks away from allowing us to create the success you deserve. Tell your friends and family to get ready because the new you is about to take centre stage.
<h3>Price</h3>
£150 paid monthy by direct debit for 3 months (£450 in total) </span>
<br />
</div>
<form class='product_form' enctype="multipart/form-data" action="http://newmovementfitness.co.uk/products-page" method="post" name="product_2" id="product_2" >
<div class="custom_meta">
</div>
<div class="wpsc_variation_forms">
</div>
<!-- THIS IS THE QUANTITY OPTION MUST BE ENABLED FROM ADMIN SETTINGS -->
<p class="wpsc_extras_forms"/>
<div class="wpsc_product_price">
<span id="product_price_2" class="pricedisplay">£150.00</span>Price:<br/>
</div>
<input type="hidden" value="add_to_cart" name="wpsc_ajax_action"/>
<input type="hidden" value="2" name="product_id"/>
<!-- END OF QUANTITY OPTION -->
<div class='wpsc_buy_button_container'>
<input type='image' src='http://newmovementfitness.co.uk/wp-content/plugins/wp-e-commerce/themes/iShop/images/buy_button.gif' id='product_2_submit_button' class='wpsc_buy_button' name='Buy' value="Add To Cart" />
<div class='wpsc_loading_animation'>
<img title="Loading" alt="Loading" src="http://newmovementfitness.co.uk/wp-content/plugins/wp-e-commerce/images/indicator.gif" class="loadingimage"/>
Updating cart...</div>
</div>
</form>
</div>
</div>
</div>
CSS:
/*
* product default display styling
*/
div.productdisplay{
position:relative;
float:left;
clear:both;
top:0px;
left: 0px;
/* margin-top: 10px; */
margin-bottom: 20px;
width: 100%;
text-align: left !important;
}
div.productdisplay div.imagecol img{
/* width: 300px; */
border: 0px solid #ffffff;
}
div.textcol{
position:relative;
float:left;
top:0px;
left: 0px;
padding: 0px;
padding-bottom: 10px;
margin: 0px;
/* Adjust this width according to your layout*/
width: 77%;
text-align: left !important;
}
div.imagecol{
position:absolute;
float:left;
top:0px;
left: 0px;
padding-right: 5px;
margin-right: 0px;
/* border: 0px solid #fff; */
}
div.producttext{
color: #000;
font-size: 9pt;
font-weight:500;
width: 100%;
text-align: left !important;
font-style: 'Lucida Grande',Geneva,Arial,Verdana,Helvetica,sans-serif;
margin: 0px 0px 30px 5px
}
a.wpsc_product_title{
color:#44555f;
border-bottom: 1px solid #c8d2de;
display: block;
font-size: 11pt;
margin: 0px 0px 5px 0px;
}
a.wpsc_product_title:hover{
text-decoration: none;
}
p.wpsc_description{
margin: 0px 0px 6px 0px;
}
p.wpsc_variation_forms{
margin: 0px 0px 0px 0px;
}
p.wpsc_variation_forms label{
color: #333333;
font-size: 9pt;
font-weight: bold;
}
p.wpsc_extras_forms label{
color: #333333;
font-size: 9pt;
font-weight: bold;
}
p.wpsc_product_price{
margin: 10px 0px 10px 0px;
color: #333333;
font-size: 9pt;
font-weight: bold;
}
div.wpsc_product_price{
width:130px;
}
p.wpsc_product_extra_content{
margin: 10px 0px 10px 0px;
color: #333333;
font-size: 9pt;
font-weight: bold;
}
p.galleryheading{
font-weight:bold;
}
input.wpsc_buy_button{
background-image: url(images/buy_button.gif);
border: none;
width: 76px;
height: 25px;
text-align: center;
/* vertical-align: top; */
padding: 0px 0px 0px 0px;
font-size: 8pt;
margin-top: 3px;
color: #6a6c74;
}
/* styles the additional description */
span.additional_description{
display: none;
}
a.additional_description_link{
display: inline;
}
a.additional_description_link img{
margin-right: 3px;
}
/*
* product rating styling
*/
div.product_footer{
position: relative;
padding: 0px !important;
width: 100%;
border-top: 1px dashed #cccccc;
height: 35px;
margin-top: 1em;
}
div.product_footer strong{
display: block;
font-size: 7pt;
font-weight: normal;
}
div.product_average_vote{
position: absolute;
top: 0px;
left: 0px;
width: 50%;
float: left;
margin: 0px !important;
height: inherit;
}
div.product_user_vote{
position: absolute;
top: 0px;
right: 0px;
width: 30%;
margin: 0px !important;
height: inherit;
}
span.vote_total{
position: relative;
top: -3px;
left: 2px;
font-size: 7pt;
}
span.rating_saved{
color: #990000;
display: none;
}
/*
*end product rating styling
*/
/*
* end default product display styling
*/
/*
* list product display styling
*/
table.list_productdisplay{
/* margin-top: 10px; */
margin-bottom: 20px;
border-collapse: collapse;
width: 100%;
}
table.list_productdisplay tr td{
vertical-align: top;
padding-bottom: 0px;
font-size: 8pt;
/* border: 1px solid black; */
}
table.list_productdisplay tr td select{
margin-right: 3px;
}
table.list_productdisplay tr.list_view_description{
margin: 0px;
padding: 0px;
}
table.list_productdisplay tr.list_view_description td{
margin: 0px;
padding: 0px 3px 5px 3px;
}
table.list_productdisplay tr.list_view_description td div{
display: none;
padding: 3px;
}
/*
* end list product display styling
*/
/*
* loading indicator styling
*/
#loadingindicator{
visibility: hidden;
font-size: 7pt;
font-weight: normal;
}
#loadingindicator img{
position: relative;
top: 3px;
margin-left: 6px;
/* visibility: hidden; */
border: none !important;
}
#alt_loadingindicator{
visibility: hidden;
font-size: 7pt;
font-weight: normal;
}
#alt_loadingindicator img{
position: relative;
top: 3px;
margin-left: 6px;
/* visibility: hidden; */
border: none !important;
}
/*
* end loading indicator styling
*/
div.select_country{
margin-bottom: 5px;
}
div.select_country form{
text-align: left;
}
tr.product_shipping td h2{
margin-bottom: 15px;
/* margin-top: 5px; */
}
div#homepage_products{
width:100%;
}
/* frontpage_product and category view styling */
div.frontpage_product{
width:auto;
float: left;
height: 260px;
text-align: center;
}
div.frontpage_product a p{
margin-top: 0px;
}
div.frontpage_product a{
color: #333333 !important;
font-weight: normal !important;
}
div.frontpage_product a img{
border: none;
}
div.frontpage_product img{
text-align: center;
}
div.frontpage_product span.front_page_price{
display: block;
}
Thank you
Kind regards
Sol
I thought it could be the shopping cart box on the right that is putting it out but when I take that out it doesn't seem to change.
HTML Source
<div class="productdisplay default_product_display product_view_2 all-categories">
<div class="textcol">
<div class="imagecol">
<a rel="12 Week Make Over" href="http://newmovementfitness.co.uk/products-page/personal-training/12-week-make-over/">
<img class="product_image" id="product_image_2" alt="12 Week Make Over" title="12 Week Make Over" src="http://newmovementfitness.co.uk/wp-content/uploads/wpsc/product_images/thumbnails/thumb-12wkmakeover-150x128.jpg"/>
</a>
</div>
<div class="producttext">
<h2 class="prodtitles">
<a class="wpsc_product_title" href="http://newmovementfitness.co.uk/products-page/personal-training/12-week-make-over/">12 Week Make Over</a>
<a class='wpsc_edit_product' href='http://newmovementfitness.co.uk/wp-admin/admin.php?page=wpsc-edit-products&product_id=2'>Edit</a> </h2>
<div class='wpsc_description'><p>What is it<br />
A Life changing Personal Experience. The 12 week make over will transform you inside and out.</p>
</div>
<div class='additional_description_span'>
<a href='http://newmovementfitness.co.uk/products-page/personal-training/12-week-make-over/' class='additional_description_link'>
<img class='additional_description_button' src='http://newmovementfitness.co.uk/wp-content/plugins/wp-e-commerce/images/icon_window_expand.gif' title='Additional Description' alt='Additional Description' />More Details </a>
<span class='additional_description'><br />
<h3>Where is it</h3>
Based in a boutique, lavishly equipped studio in Buckinghamshire
<h3>What is a 12 week makeover and what will it achieve
You'll receive:-</h3>
<ul>
<li>Cutting edge 1 on 1 personal training</li>
<li>Sports Massage</li>
<li>Group training</li>
<li>Weekly Analysis and reviews</li>
<li>Tailored nutritional guidance </li>
<li>A wealth of education</li>
</ul>
If you’re serious about change then you’re only 12 weeks away from allowing us to create the success you deserve. Tell your friends and family to get ready because the new you is about to take centre stage.
<h3>Price</h3>
£150 paid monthy by direct debit for 3 months (£450 in total) </span>
<br />
</div>
<form class='product_form' enctype="multipart/form-data" action="http://newmovementfitness.co.uk/products-page" method="post" name="product_2" id="product_2" >
<div class="custom_meta">
</div>
<div class="wpsc_variation_forms">
</div>
<!-- THIS IS THE QUANTITY OPTION MUST BE ENABLED FROM ADMIN SETTINGS -->
<p class="wpsc_extras_forms"/>
<div class="wpsc_product_price">
<span id="product_price_2" class="pricedisplay">£150.00</span>Price:<br/>
</div>
<input type="hidden" value="add_to_cart" name="wpsc_ajax_action"/>
<input type="hidden" value="2" name="product_id"/>
<!-- END OF QUANTITY OPTION -->
<div class='wpsc_buy_button_container'>
<input type='image' src='http://newmovementfitness.co.uk/wp-content/plugins/wp-e-commerce/themes/iShop/images/buy_button.gif' id='product_2_submit_button' class='wpsc_buy_button' name='Buy' value="Add To Cart" />
<div class='wpsc_loading_animation'>
<img title="Loading" alt="Loading" src="http://newmovementfitness.co.uk/wp-content/plugins/wp-e-commerce/images/indicator.gif" class="loadingimage"/>
Updating cart...</div>
</div>
</form>
</div>
</div>
</div>
CSS:
/*
* product default display styling
*/
div.productdisplay{
position:relative;
float:left;
clear:both;
top:0px;
left: 0px;
/* margin-top: 10px; */
margin-bottom: 20px;
width: 100%;
text-align: left !important;
}
div.productdisplay div.imagecol img{
/* width: 300px; */
border: 0px solid #ffffff;
}
div.textcol{
position:relative;
float:left;
top:0px;
left: 0px;
padding: 0px;
padding-bottom: 10px;
margin: 0px;
/* Adjust this width according to your layout*/
width: 77%;
text-align: left !important;
}
div.imagecol{
position:absolute;
float:left;
top:0px;
left: 0px;
padding-right: 5px;
margin-right: 0px;
/* border: 0px solid #fff; */
}
div.producttext{
color: #000;
font-size: 9pt;
font-weight:500;
width: 100%;
text-align: left !important;
font-style: 'Lucida Grande',Geneva,Arial,Verdana,Helvetica,sans-serif;
margin: 0px 0px 30px 5px
}
a.wpsc_product_title{
color:#44555f;
border-bottom: 1px solid #c8d2de;
display: block;
font-size: 11pt;
margin: 0px 0px 5px 0px;
}
a.wpsc_product_title:hover{
text-decoration: none;
}
p.wpsc_description{
margin: 0px 0px 6px 0px;
}
p.wpsc_variation_forms{
margin: 0px 0px 0px 0px;
}
p.wpsc_variation_forms label{
color: #333333;
font-size: 9pt;
font-weight: bold;
}
p.wpsc_extras_forms label{
color: #333333;
font-size: 9pt;
font-weight: bold;
}
p.wpsc_product_price{
margin: 10px 0px 10px 0px;
color: #333333;
font-size: 9pt;
font-weight: bold;
}
div.wpsc_product_price{
width:130px;
}
p.wpsc_product_extra_content{
margin: 10px 0px 10px 0px;
color: #333333;
font-size: 9pt;
font-weight: bold;
}
p.galleryheading{
font-weight:bold;
}
input.wpsc_buy_button{
background-image: url(images/buy_button.gif);
border: none;
width: 76px;
height: 25px;
text-align: center;
/* vertical-align: top; */
padding: 0px 0px 0px 0px;
font-size: 8pt;
margin-top: 3px;
color: #6a6c74;
}
/* styles the additional description */
span.additional_description{
display: none;
}
a.additional_description_link{
display: inline;
}
a.additional_description_link img{
margin-right: 3px;
}
/*
* product rating styling
*/
div.product_footer{
position: relative;
padding: 0px !important;
width: 100%;
border-top: 1px dashed #cccccc;
height: 35px;
margin-top: 1em;
}
div.product_footer strong{
display: block;
font-size: 7pt;
font-weight: normal;
}
div.product_average_vote{
position: absolute;
top: 0px;
left: 0px;
width: 50%;
float: left;
margin: 0px !important;
height: inherit;
}
div.product_user_vote{
position: absolute;
top: 0px;
right: 0px;
width: 30%;
margin: 0px !important;
height: inherit;
}
span.vote_total{
position: relative;
top: -3px;
left: 2px;
font-size: 7pt;
}
span.rating_saved{
color: #990000;
display: none;
}
/*
*end product rating styling
*/
/*
* end default product display styling
*/
/*
* list product display styling
*/
table.list_productdisplay{
/* margin-top: 10px; */
margin-bottom: 20px;
border-collapse: collapse;
width: 100%;
}
table.list_productdisplay tr td{
vertical-align: top;
padding-bottom: 0px;
font-size: 8pt;
/* border: 1px solid black; */
}
table.list_productdisplay tr td select{
margin-right: 3px;
}
table.list_productdisplay tr.list_view_description{
margin: 0px;
padding: 0px;
}
table.list_productdisplay tr.list_view_description td{
margin: 0px;
padding: 0px 3px 5px 3px;
}
table.list_productdisplay tr.list_view_description td div{
display: none;
padding: 3px;
}
/*
* end list product display styling
*/
/*
* loading indicator styling
*/
#loadingindicator{
visibility: hidden;
font-size: 7pt;
font-weight: normal;
}
#loadingindicator img{
position: relative;
top: 3px;
margin-left: 6px;
/* visibility: hidden; */
border: none !important;
}
#alt_loadingindicator{
visibility: hidden;
font-size: 7pt;
font-weight: normal;
}
#alt_loadingindicator img{
position: relative;
top: 3px;
margin-left: 6px;
/* visibility: hidden; */
border: none !important;
}
/*
* end loading indicator styling
*/
div.select_country{
margin-bottom: 5px;
}
div.select_country form{
text-align: left;
}
tr.product_shipping td h2{
margin-bottom: 15px;
/* margin-top: 5px; */
}
div#homepage_products{
width:100%;
}
/* frontpage_product and category view styling */
div.frontpage_product{
width:auto;
float: left;
height: 260px;
text-align: center;
}
div.frontpage_product a p{
margin-top: 0px;
}
div.frontpage_product a{
color: #333333 !important;
font-weight: normal !important;
}
div.frontpage_product a img{
border: none;
}
div.frontpage_product img{
text-align: center;
}
div.frontpage_product span.front_page_price{
display: block;
}
Thank you
Kind regards
Sol