SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
-
Aug 20, 2006, 22:56 #1
- Join Date
- Aug 2006
- Posts
- 11
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How to Place Button at Bottom Right Corner of Image?
Hi all,
I want to find a way to place a button at the bottom right corner of an image. The button should still be inside the image, not under the image. How? I know how to create a link button using FORM and INPUT tag, but can I use innerHtml to insert the button into the IMG tag? If not, how to do it? I tried, but the button is always outside the image.
Many thanks.
-
Aug 21, 2006, 00:36 #2
- Join Date
- Mar 2004
- Posts
- 1,647
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
style="margin-top:-20px"
cheers
-
Aug 21, 2006, 01:02 #3
- Join Date
- Jun 2006
- Location
- Wensleydale, UK
- Posts
- 20
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi,
Not sure if this is the best way, but you could set your image to be the backgound of a DIV and place the button accordingly eg.
Code:<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /> <title>A page</title> <style type="text/css"> #backgrounddiv { margin: 0; padding: 0; background: blue url('Data/My Pictures/bluefish.jpg'); width: 200px; height: 200px; } #backgrounddiv #mybutton { padding: 0; float: right; margin: 180px 0 0 0; } </style> </head> <body> <div id="backgrounddiv"> <input id="mybutton" type="button" value="test"/> </div> </body> </html>
Hope this helps
Scott
-
Aug 24, 2006, 00:05 #4
- Join Date
- Aug 2006
- Posts
- 11
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks, but I cannot set image as background because I am not allowed to change the existing image format. Need another way to do this.
Originally Posted by GreboGuru
-
Aug 24, 2006, 00:09 #5
- Join Date
- Aug 2006
- Posts
- 11
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks, so I need to know the height of my button. What about horizontial? I need to put the button to the lower right corner of the image. I want to use the same code for all image. How do I do it?
Thanks.
Originally Posted by reminder
-
Aug 24, 2006, 01:31 #6
- Join Date
- Mar 2004
- Posts
- 1,647
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
just set the position relative and the z index
thats it
cheers
Bookmarks