Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Need help with CSS

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #45089

    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

    #137586
    Paulie_D
    Member

    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.

    #137588

    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

    #137590
    Paulie_D
    Member

    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.

    #137596

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

    #137598

    Along with the *required field* text

    Look forward to hearing back, thanks again

    #137600
    Paulie_D
    Member

    That will mean some restructuring of the HTML I feel.

    #137601
    Paulie_D
    Member

    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.

    #137646

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

    #137648

    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

    #137650

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.