0

I have an image and a div of submit form which contain 2 button.

I want to position the 2 buttons on the image, bottom right corner. But the image might be horizontal and vertical, so it have to always at the bottom right corner.

I tried to search some and test,but seems not working for me. Anyway of achieving this?

my image have a specific ID. and I made my form into a DIV.

one of the link

<img src='' id:'photo_img'/>

<div id='buttons'>
</div>

http://jsfiddle.net/rgmCc/

Nich
  • 1,112
  • 1
  • 14
  • 29

1 Answers1

1

is this what you are looking for ?

CSS

#directions{
    height: 50px;
    width: 50px;
    position: relative;
}
#directions a{
    position: absolute;
    bottom: 0px;
    right: 0px;
}

HTML

<div id="directions">
    <a href="#">Maps</a>
</div>

>> WORKING EXAMPLE <<

I Think you need to wrap the a inside a div (you already have this case) and give the background to the wrapping div plus width and height, in order to move it on the bottom right of its container.

Hope it helps

EDIT

ANOTHER EXAMPLE

BeNdErR
  • 17,471
  • 21
  • 72
  • 103
  • hmm, but if in a div with height and width then it is fixed already. Can it adjusted with the image height and size? because the position of the buttons may be vary if the image is horizontal or vertical. – Nich Jun 13 '13 at 06:38
  • you mean something like this ? -> http://jsfiddle.net/rgmCc/13/ you can't set a div width/height based on a background.. you need to use an img instead, I think. Have also a look here: http://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size – BeNdErR Jun 13 '13 at 06:43
  • to get what you need, I think you need to move each button near to the corresponding image, inside the same div.. otherwise I don't know if there's a way for a button to know dinamically where's the bottom/right part of an image/container, without being part of it and without manually specifying it for each button. – BeNdErR Jun 13 '13 at 06:56
  • hmm, i think about that.. but this is due to actually that was two different form.. so they cannot stack together, thats why I'm asking this >.< tot CSS can achieve that – Nich Jun 13 '13 at 07:00
  • http://jsfiddle.net/rgmCc/15/ <- can you wrap both img and buttons inside a wrapping div? – BeNdErR Jun 13 '13 at 07:03
  • will it possible to adjust to the image ?? see this link http://jsfiddle.net/rgmCc/19/ because the link was gone down – Nich Jun 13 '13 at 07:08
  • if you can find out how it actually can be done, post to me :) I accepted your answer because you help me a lot... – Nich Jun 13 '13 at 07:19
  • as far as I know you can't do that without wrapping the link and the image inside the same container, or without using js to edit the link position.. – BeNdErR Jun 13 '13 at 12:06
  • so JS can actually edit the link position to attach on the image? do you know how ? or any reference ? – Nich Jun 13 '13 at 14:05