css - add padding on left

Posted on 2011-04-29
Last Modified: 2012-05-11
How do I add 35px of padding-right to the 3 buttons at the bottom of the page so their right margin matches the margin of the items listed above them.

Look at the Update Basket, Continue Shopping and Checkout buttons on the bottom of this page:
You might have to add something to the basket to see the three buttons I am talking about.

How do I edit the css listed below to achieve the padding-right on these buttons?

/* Action Buttons */
/* single page || shopping cart buttons */
#the_product  #greyAdd, #the_product .shopform_btn, #the_product .add_to_wishlist, .pay_now {float:left; text-align:center;}
.shopform_btn {margin-bottom:0px;}

#proceed2Checkout .shopform_btn {float:right;margin:0;}
.shopform_btn , .shopform_btn a, .cartActionBtn {height:30px;width:100px;cursor:pointer;overflow:hidden;padding:0;border:0 none;}
.add_to_wishlist, .add_to_wishlist a, .prodDetails .shopform_btn, .prodDetails .shopform_btn a {width:160px;}
.order_form .update_cart, .checkoutSteps .next_step {height:30px;margin:0;padding:0px;border:0 none;}
.order_form .update_cart {float:left;width:100px;margin:0 10px 0 570px;background:#cecece url(images/update_cart.png) no-repeat top center;}
.checkoutSteps .next_step {width:90px;background:#cecece url(images/next_step.png) no-repeat top center;}
.add_to_wishlist, .add_to_wishlist a {margin-bottom:0;}
#vCart .shopform_btn {width:122px;}

/*link buttons*/
.shopform_btn a, .cartActionBtn {display:block;background:url(images/buy_now.png) no-repeat top left;text-indent:-9999em;}
.add_to_enquire_alt a {width:129px;background:url(images/add_inquiry_alt.png) no-repeat top left;}
.add_to_cart_alt a {width:129px;background:url(images/add_to_cart_alt.png) no-repeat top left;}
.buy_now_alt a {width:129px;background:url(images/buy_now_alt.png) no-repeat top left;}
.get_now {display:block;width:32px;height:32px;background:url(images/get_now.png) no-repeat top left;text-indent:-9999em;}
.add_to_wishlist_inactive a {background:url(images/add_to_wishlist_inactive.png) no-repeat top left;}
.start_shop {width:100px;background:url(images/start_shopping.png) no-repeat top left;}
.cont_shop {float:left;margin-right:10px;width:130px;background:url(images/continue_shopping.png) no-repeat top left;}
.cont_shop {float:left;margin-right:10px;width:130px;background:url(images/continue_shopping.png) no-repeat top left;}
.shopform_btn a:hover, .shopform_btn a:focus, .start_shop:hover, .start_shop:focus, .cont_shop:focus, .cont_shop:hover, .update_cart:focus, .update_cart:hover, .next_step:hover, .next_step:focus {background-position: 0 -60px;}
.shopform_btn a:active, .start_shop:active, .cont_shop:active, .update_cart:active, .next_step:active {background-position: 0 -60px;}

/*input buttons*/
.shopform_btn input{margin:0;padding:0;float:right;}
.shopform_btn:hover input, .shopform_btn:focus input {margin-top:0px;}
.shopform_btn:active input {margin-top:-60px;}

Open in new window

screenshot of change I need help with
Question by:carolsanjose
    LVL 13

    Accepted Solution

    Try this:

    At 399 on your .order_form .update_cart selector change your margins to 0 10px 0 530px.

    Change at line 395 the #proceed2Checkout .shopform_btn to a float LEFT inside of float RIGHT.

    That should line it up the way you want.

    Author Comment

    That worked perfectly!

    Have a good weekend!

    Thank you.

    Author Closing Comment

    Easy to understand answer...

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 Specialist

    HTML5 development skills are critical to all developers. HTML5 is the foundation to almost any development process. That's why business, design studios, development shops and other organizations need HTML5 developers. Get your foot in the door as a HTML5 specialist.

    Most web designers often experience crossbrowser issues during interface design / development.  On common problem is with Internet Explorer due to its rendering discrepancies between previous versions.  Here are some techniques I use to help avoid c…
    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    761 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    9 Experts available now in Live!

    Get 1:1 Help Now