3

I'm not a CSS expert. I'm trying to place an <input type="button"> in the center of an <img> and I'm having some trouble doing so. Here's a fiddle and here is my HTML:

<div id="avatar">
    <img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar" />
    <input id="btnAvatar" class="button" type="button" name="Button" value="Change">
    <p>Text</p>
</div>

I want the input to be displayed over the image, also, the text need to be at the right. I tried using:

img { width: 300px; height: 300px; float: left; }
input { position: absolute; margin:140px 0px 0px 130px;}

But it only works on chrome / safari, on other browsers, the button is placed after the image and not in front of it.

What is the best way to do this?

Obs.: The space where the button is, needs to be empty, or else, the text will move up.


This is how it's displayed on chrome:

enter image description here

This is how it's displayed on firefox:

enter image description here

5 Answers 5

4

You need to specify the x and y positions on an absolute position. Change the css for input to this:

input { position: absolute; top:0; left:0; margin:140px 0px 0px 130px;}
1
  • I see, so I think chrome / safari assumes 0 as default top and left. Thanks. Dec 14, 2012 at 14:36
4

There is a simple and clean method for doing this code. The trick is to use the DIV tag to contain and position everything in place.

  1. Use a main DIV to contain everything and give it the position:relative property.
  2. Place the img and input tags in a single DIV and assign this DIV the float:left property.
  3. Using CSS to select the P tag and float it to the left. This will position the text beside the DIV containing the img and input.
  4. Now assign the input tag the position:absolute property while using the properties TOP & LEFT to postion it into place.

Here's an example:

<div id="avatar-container">
     <div id="avatar-image-btn">
          <img src="http://www.averageadjustersusca.org/aaa/images/profileholder.gif" alt="My avatar"  />
          <input id="btnAvatar" class="button" type="button" name="Button" value="Change">
     </div>
     <p>Text</p>
</div>

<style> 
    #avatar-container { position: relative; }
    #avatar-container p { float: left; }
    #avatar-image-btn { float: left; }
    #avatar-image-btn img { }
    #avatar-image-btn input { position: absolute; top: 135px; left: 120px; cursor: pointer; }
</style>

See, clean and simple, works every time and is multi-browser compatible.

*The margin property can cause a mess when used without caution. Best practice is to use it for stacking tags in divs and not for positioning with large gapping margins.

0
2

use z-index

input { position: absolute; margin:140px 0px 0px 130px; z-index:2}

this is pushing your button one layer up

after understanding the question correctly here is a solution

img { width: 300px; height: 300px; float: left; border:1px solid black; position:absolute}
input { position: absolute; margin:140px 0px 0px 130px;}

as mentioned bellow in comments the problem was in positioning

3
  • The problem is not the index of the input, it's where the button is located. On chrome, it appears right, but on firefox, it's placed after the image. Dec 14, 2012 at 14:32
  • 1
    I got your solution :)) the img you have is positioned relative cause you don't specify the position option and default is relative that's the problem you are facing and this is your solution img { width: 300px; height: 300px; float: left; border:1px solid black; position:absolute} input { position: absolute; margin:140px 0px 0px 130px;} Dec 14, 2012 at 14:47
  • 1
    Having the image set to position:absolute causes the text to overlap/underlap the image. I recommend changing this to position:relative Dec 14, 2012 at 14:52
1

You may add position:relative for #avatar and give #btnAvatar top:0; left:0;

1

This should do it: http://jsfiddle.net/a6tA7/9/

I would recommend you use top: and left: to position the input element rather than margin:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.