www.webdeveloper.com
Results 1 to 4 of 4

Thread: How do I place a button at a specific point on the webpage

  1. #1
    Join Date
    Sep 2011
    Posts
    1

    Question How do I place a button at a specific point on the webpage

    How do I place a button at a specific point on the webpage, somehow type co ordinates of a point on the page and the button will appear there?

  2. #2
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,198
    Use CSS and the position property:

    #button {
    width: XXpx;
    height: YYpx;
    position: absolute;
    top: Y%;
    left: X%;
    }

    Other combinations:

    bottom | left
    bottom | right
    top | right

    I don't much like absolute positioning as you can tweak into position with the margin rules.

  3. #3
    Join Date
    Sep 2011
    Location
    Canada
    Posts
    7
    If I need to control the position of an element on a page (i.e. overlaying a button on an image), I would make sure the parent wrapper is set to position:relative; so the child element (set to position:absolute) will be positioned relevant to the container element.

    HTML Code:
    <div id="container-wrapper" style="position:relative;">
         <div id="child-element" style="position:absolute; top:10px; left:10px;">
              .....
         </div>
    
    </div>
    The above will position the child element relative to the container-wrapper.

  4. #4
    Join Date
    Sep 2011
    Posts
    2

    a JavaScript way

    As an alternative way, you could do it with JavaScript.


    Code:
     
    <html>
     
    <head>
    <script type="text/javascript">
    function setButtonPosition()
    {
    document.getElementById("button1").style.position="absolute";
    document.getElementById("button1").style.left="100px";
    document.getElementById("button1").style.top="400px";
    }
    </script>
    </head>
     
    <body onload=setButtonPosition()>
     
     
    <p>page contents...</p>
    <input type="button" id="button1" value="button caption" />
     
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles