/    Sign up×
Community /Pin to ProfileBookmark

How to do button aligned to input?

Copy linkTweet thisAlerts:
Mar 12.2010

I have button to execute task and code like:

[code=php]
<input type=”image” src=”Go.png”>
[/code]

As I have to move this Go button as search input box I like to know how to do with CSS as this is [B]input with type image[/B] not pure image to be moved like:
#input img {
margin: 0.9em 0 0 0;
}

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@mordaukMar 13.2010 — It's not very clear exactly what you are asking, but I think what you mean is "how do I position the image that I would like to act as the input button." Correct?

If so, it's easy. Use code like this:

[CODE]
#input {
background: url('images/Go.png') 10px 5px no-repeat;
}
[/CODE]

This will apply your Go.png as a background image to your input field, position 10px from the left and 5 px down from the top.
Copy linkTweet thisAlerts:
@toplisekauthorMar 13.2010 — As you posted I like to do this.

Issue is that image as type in input did not move.

What can be other solved solution?
Copy linkTweet thisAlerts:
@mordaukMar 13.2010 — Give a width and height to your input field that is the same (or larger) as your background image.
Copy linkTweet thisAlerts:
@toplisekauthorMar 15.2010 — Hi,

I try to fix top button with code like:

#inputarea .img {

margin: 2px 0 0 6px;

}

Why is in IE not see result but mozilla is padding at the top 2px?
×

Success!

Help @toplisek spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.14,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...