SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,207
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    the green background submit button

    Code:
    <!doctype html>
    <html> 
      <head>
        <meta charset="UTF-8">
        <title>search box1</title>
      </head>
     <body>
    <div style="text-align:center">
    <input type="text" style="width:500px;font-size:13pt;padding:2px; border:3px solid green" value="example text">
    <input type="submit"  value=" submit " style="font-size:7pt;color:white;background-color:green;border:2px solid #336600;padding:3px">
    </div>
    </body>
    </html>
    I have the code above at http://dot.kr/x-test/searchBox1.php (temperal URL) .

    If you click the link above with major browsers, you will see a search box and a green background submit button.
    If you see them carefully, the green background submit button is a little lower than the search box vertically.

    I like to put the vertical position of the submit button a little upper, so it is positioned vertically centered compared with the position of the search box .

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you might have to use position to put the 2 inline elements exactly where you want them

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,207
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    try adding some more bottom margin to the button
    As I try it like the code below, I think it won't work as I expected at http://dot.kr/x-test/searchBox2.php .
    Code:
    <!doctype html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>search box2</title>
      </head> 
    <body>
    <div style="text-align:center">
    <input type="text" style="width:500px;font-size:13pt;padding:2px; border:3px solid green" value="search box">
    <input type="submit"  value=" submit button " style="font-size:7pt;color:white;
    background-color:green;border:2px solid #336600;padding:3px;margin-bottom:30px">
    </div>
    </body>
    </html>

  4. #4
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dotJoon View Post
    As I try it like the code below, I think it won't work as I expected at http://dot.kr/x-test/searchBox2.php .
    Code:
    <!doctype html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>search box2</title>
      </head> 
    <body>
    <div style="text-align:center">
    <input type="text" style="width:500px;font-size:13pt;padding:2px; border:3px solid green" value="search box">
    <input type="submit"  value=" submit button " style="font-size:7pt;color:white;
    background-color:green;border:2px solid #336600;padding:3px;margin-bottom:30px">
    </div>
    </body>
    </html>
    yep, using margin didn't work in all my browsers either, but using position to put the elements where I want did.

  5. #5
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,207
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    you might have to use position to put the 2 inline elements exactly where you want them
    Sorry to say, How can I use position the 2 inline elements in code?

  6. #6
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,207
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The code below seems not to work as I expected at http://dot.kr/x-test/searchBox3.php
    Code:
    <!doctype html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>search box3</title>
      </head> 
    <body>
    <div style="text-align:center">
    <input type="text" style="width:500px;font-size:13pt;padding:2px; border:3px solid green" value="search box">
    <input type="submit"  value=" submit button " style="font-size:7pt;color:white;
    background-color:green;border:2px solid #336600;padding:3px;display:inline">
    </div>
    </body>
    </html>
    How can I fix the code above?

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,725
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    Try this...
    add: " vertical-align:middle;" to the style for text input button...


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
  •