Need help with CSS

[summerboyd111]

below is the product options CSS code for my site. Cant seem to get it to look like the below picture (with the drop down menu fitting more snug and NOT taking up the width of the page). What do I need to change?

/* Product Options */
.product-options { padding:15px 30px 15px 0; position:relative; }
.product-options dt { padding:10px 0 0; font-weight:normal; }
.product-options dt label { }
.product-options dt label.required em { color:#eb340a; }
.product-options dd .qty-holder { display:block; padding:10px 0 0; }
.product-options dd .qty-holder label { vertical-align:middle; }
.product-options dd .qty-disabled { background:none; border:0; padding:3px; color:#353535; }
.product-options dd { padding:5px 0 5px; }
.product-options dl.last dd.last { border-bottom:0; padding-bottom:5px; margin-bottom:0; }
.product-options dd input.input-text { width:98%; }
.product-options dd input.datetime-picker { width:150px; }
.product-options dd .time-picker { display:-moz-inline-box; display:inline-block; padding:2px 0; vertical-align:middle; }
.product-options dd textarea { width:98%; height:8em; }
.product-options dd select { width: 99%; }
.product-options dd .multiselect option { border-bottom:1px dotted #d9e5ee; padding:2px 4px; }
.product-options ul.options-list { margin-right:5px; }
.product-options ul.options-list li { padding:2px 0; }
.product-options ul.options-list input.radio { float:left; margin-top:3px; }
.product-options ul.options-list input.checkbox { float:left; margin-top:2px; }
.product-options ul.options-list .label { display:block; margin-left:18px; }
.product-options ul.options-list label { font-weight:normal; }
.product-options ul.validation-failed { padding:0 7px; }
.product-options p.required { position:absolute; right:15px; top:10px; }

.product-options-bottom { border-top:1px solid #efefef; padding:15px 0; margin:0 0 5px 0; }
.product-options-bottom .price { font-size: 20px; font-weight: normal; }
.product-options-bottom .tier-prices { margin:0; padding:0 0 10px; border:0; background:0; }
.product-options-bottom .price-box { float:left; margin:0; }
.product-options-bottom .add-to-links { float:right; text-align:left; }
.product-options-bottom .price-label { padding-right:5px; }
.product-options-bottom .price-tax { float:left; }
.product-options-bottom .add-to-cart { float:right; margin:0; padding:0; border:0; background:0; }
.product-options-bottom .quanitybox { float:left; margin:1px 15px; }

#container2 .product-options-bottom .add-to-links { float:right; clear: both; text-align:left; }
#container2 .product-options-bottom .add-to-links li { display:inline; margin-left:15px; background:transparent url(../images/plus.png) no-repeat scroll left center;}
#container2 .product-options-bottom .addthis_toolbox { margin-top: -33px; }
.product-shop .product-options-bottom .price-box { float:none; margin:0; }
.product-shop .product-options-bottom .price-label { float:none; padding-right:0; }
.product-shop .product-options-bottom .price-tax { float:none; }
.product-shop .product-options-bottom .add-to-cart { float: left; text-align:left; }

(code above gives this) http://imageshack.us/photo/my-images/812/myshoppingcart.jpg/
(Need code to show this) http://imageshack.us/photo/my-images/829/goodshoppingcart.jpg/

Would appreciate some tips or someone savvy to point me in the direction of changing this

[Paulie_D]

We’d really need to see a live link as a bunch of CSS isn’t helpful by itself as we don’t know which classes apply to which elements.

[summerboyd111]

Thanks for the quick reply. I think this is what you need http://prettybu.nextmp.net/shop/pretty-rolls/prettyrolls.html

Site is Work In Progress

[Paulie_D]

You have this:

.product-options dd select {
width: 99%;

on line 1172 of the CSS sheet. I would set it to `auto` or any number you like.

[summerboyd111]

Thank you very much

This has worked to reduce width of the drop down menu, however the dropdown menu and add to cart are still in the same position and I want to move them all up into the area where the description is (to the right of the product image).

[summerboyd111]

Along with the *required field* text

Look forward to hearing back, thanks again

[Paulie_D]

That will mean some restructuring of the HTML I feel.

[Paulie_D]

Although, if you set a width of, say 25% on `.product-options` (line 1159) and `float:left.

Then, say, 60% on `.product-options-bottom` (1183) and `float:right`

It will get you some of the way.

I don’t like it as it may have knock-on effects down the line.

[summerboyd111]

what do you mean by knock on effects? ill give it a go thanks

[summerboyd111]

hey paulie thanks for the info, it didnt really do alot it moved the price and *required fields in a bit but rest stayed the same

[summerboyd111]

is there a way to encapsulate all of the code then set width positioning etc.

[Author]

Posts