SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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.

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2004
    Posts
    1,647
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    style="margin-top:-20px"
    cheers

  3. #3
    SitePoint Member GreboGuru's Avatar
    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>
    Just change the height and width of backgrounddiv to match your image.

    Hope this helps

    Scott

  4. #4
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    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.

    Quote Originally Posted by GreboGuru
    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>
    Just change the height and width of backgrounddiv to match your image.

    Hope this helps

    Scott

  5. #5
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    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.

    Quote Originally Posted by reminder
    style="margin-top:-20px"
    cheers

  6. #6
    SitePoint Wizard
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •