Solved

How to align picture to the right

Posted on 2013-05-23
14
332 Views
Last Modified: 2013-05-28
Hi!

Have the included picture of a login system.
I am using this line, to get the images shown in the textboxes at the picture.

My question is:

How to align pictures to the right

My css-ref:
 background: #96825a url(http://www.softkey.no/webtest/images/login-sprite.png) no-repeat;
LOGIN.png
0
Comment
Question by:team2005
  • 8
  • 6
14 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39190687
Try:
 
background: #96825a url(http://www.softkey.no/webtest/images/login-sprite.png) no-repeat right top; 

Open in new window

0
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 500 total points
ID: 39190719
Oh sorry as your image It's left align see my example below:

<style>
.username,.password{
	  height:20px;
	 padding:10px 25px;
}
.username{
	 background: #96825a url(login-sprite.png) no-repeat left -10px; 
}
.password{
	 background: #96825a url(login-sprite.png) no-repeat left -62px; 
}
</style>

Open in new window

I have assumed your input username and password will be almost 40px height and in background the left will position background image in left and the -10px and -62px will move the image upwards that value you can manage in your style see the html code for my example :
<form name="form" id="login">
	<input type="text" name="username" class="username">
    <input type="password" name="password" class="password">
</form>

Open in new window

0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39190721
Again manage your background image url as you have provided url(http://www.softkey.no/webtest/images/login-sprite.png)  but i have used it in relative path.
0
 
LVL 2

Author Comment

by:team2005
ID: 39190783
Hi!

This dosent work ?

background: #96825a url(http://www.softkey.no/webtest/images/login-sprite.png) no-repeat right top;
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39190809
See the latest comments
0
 
LVL 2

Author Comment

by:team2005
ID: 39190969
Hi!

Please show me what to fix
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39191069
Can you post your code or url??  Or add this line

 background: #96825a url(http://www.softkey.no/webtest/images/login-sprite.png) no-repeat left -10px;
padding-left: 25px;

Open in new window

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 2

Author Comment

by:team2005
ID: 39191090
Hi!

Tryed your code, but still dosent work ?

URL:
http://www.softkey.no/webtest/test1.html
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39191150
If you are posting the right image login.png  than I am sure it's right in your design you are asking for the background image position and I write for the same if not write or clear what do you need????
0
 
LVL 2

Author Comment

by:team2005
ID: 39191179
Hi!

I want it to be like the included picture (included now)

Want the text to be centered to
login2.png
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39191209
Just change the background position see below:
background: #96825a url(http://www.softkey.no/webtest/images/login-sprite.png) no-repeat right -10px;

Open in new window

0
 
LVL 2

Author Comment

by:team2005
ID: 39191239
Hi!

Sorry, diden work
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39191352
That's why I was asking for the url, I am testing in your url : http://www.softkey.no/webtest/test1.html and you have added #username and #password to position background image .

Now replace your css :

/*--------------------*/

#inputs input {
    background: #96825a url(http://www.softkey.no/webtest/images/login-sprite.png)no-repeat;
    border: medium none !important;
    box-shadow: none !important;
    color: #FFFFFF;
    font: bold 20px Arial;
    margin: 0 0 10px;
    outline: medium none !important;
    padding: 15px 30px 15px 15px ;
    width: 353px;
}
#username {
    background-position: 364px  -4px !important; /* Here 364px is for left position and -4px for top */
}
#password {
    background-position: 364px -52px !important;
}

Open in new window

0
 
LVL 2

Author Closing Comment

by:team2005
ID: 39201109
thanks
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

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
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 …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

747 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

12 Experts available now in Live!

Get 1:1 Help Now