Solved

Move text down and to the left

Posted on 2013-06-18
10
380 Views
Last Modified: 2013-06-19
I've attached a screenshot. You see how the text is too close to the red button and moved up. I want to bring it down...maybe center it to the button and move it to the left...not so close to the button as it is now.

This is how it renders

<div class="formactions placeorder">
Total: USD 96.21
<button class="imagebutton continuecheckout" type="submit" name="dwfrm_orderSummary_submitOrder" value="Place Order"><span>Place Order</span></button>
<div class="clear"></div>
</div>

Open in new window


And these are the CSS

.formactions.placeorder {
text-align: right;
padding-top: 20px;
}


.formactions.placeorder button {
text-transform: uppercase;
font-size: 14px;
float: right;
}


.clear, .clearBoth {
clear: both;
}

Open in new window

doc3.docx
0
Comment
Question by:Camillia
  • 6
  • 4
10 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
Comment Utility
You are hiding your screen shot it's not seems well please post your url.
0
 
LVL 7

Author Comment

by:Camillia
Comment Utility
it's my company url. that's why i didnt post the url. I might have have to upgrade my expert echange to have private question so i could post it. You can't tell me how to fix it the way i have posted my question?
0
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
Comment Utility
Ok one of the reason for your problem is you have no space between class name try my example:

.formactions .placeorder {
text-align: right;
padding-top: 20px;
}


.formactions .placeorder button {
text-transform: uppercase;
font-size: 14px;
float: right;
}


.clear, .clearBoth {
clear: both;
}

Open in new window

0
 
LVL 7

Author Comment

by:Camillia
Comment Utility
thanks, let me try.
0
 
LVL 7

Author Comment

by:Camillia
Comment Utility
didnt work. Stays the same. Where do I put that .clear CSS??
Your .formactions .placeorder  and .formactions .placeorder  button are the same as mine.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 15

Expert Comment

by:Jagadishwor Dulal
Comment Utility
It's all same only space in .formaction .placeholder can you provide image for what you want.
0
 
LVL 7

Author Comment

by:Camillia
Comment Utility
where's the space in this??

.formactions .placeorder {
text-align: right;
padding-top: 20px;
}

This is how it renders. I see the "clear" div but the there's no space. Still looks the same.

<div class="formactions placeorder">
Total: USD 96.21
<button class="imagebutton continuecheckout" type="submit" name="dwfrm_orderSummary_submitOrder" value="Place Order"><span>Place Order</span></button>
<div class="clear"></div>
</div>

Open in new window

0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
Comment Utility
See this two css:
.formactions.placeorder {
text-align: right; /* see above there is no space between formactions.placeorder*/
padding-top: 20px;
}


.formactions.placeorder button {
text-transform: uppercase;
font-size: 14px;
float: right;
}


.clear, .clearBoth {
clear: both;
}

Open in new window


and second one

.formactions .placeorder {
text-align: right;
padding-top: 20px;
}


.formactions .placeorder button {
text-transform: uppercase;
font-size: 14px;
float: right;
}


.clear, .clearBoth {
clear: both;
}
                                            

Open in new window

0
 
LVL 7

Author Comment

by:Camillia
Comment Utility
There's no space so how can I put the space??
Your CSS has an additional ".clear" tag. How can I use it to add the space??
0
 
LVL 7

Author Comment

by:Camillia
Comment Utility
I put the div clear between the text and the button but the text ends up above the button

this is how it renders. Screenshot attached

<div class="formactions placeorder">
Total: USD 96.21
<div class="clear"></div> <button class="imagebutton continuecheckout" type="submit" name="dwfrm_orderSummary_submitOrder" value="Place Order"><span>Place Order</span></button>
</div>

Open in new window

doc8.docx
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Convert a Master Page to HTML 16 59
reposition hamburger icon to top of screen 5 44
jQuery or CSS 9 37
Hovering effect 9 28
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

763 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