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
  • #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 { 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)
    (Need code to show this)

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


    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.


    Thanks for the quick reply. I think this is what you need

    Site is Work In Progress


    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.


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


    Along with the *required field* text

    Look forward to hearing back, thanks again


    That will mean some restructuring of the HTML I feel.


    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.


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


    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


    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.