Align text and search box in the middle of the page and at the same time eliminate the search button

Question

Hello everyone and happy Friday,

I would like to align to the center of the page, the title (top) and right below the search box (below the title), possibly without the search button.

Right now, I have two issues.

The first one, the search box is not align to the center.

The second one, if I eliminate the search button, the query does not work after I press Return.

How can I achieve those two challenges?

Thank you so much in advance for your help.

Below is my code:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>CLIHELP - Help for Command Line Interface</title>
  <meta name="description" content="Help for Command Line Interface">
  <meta name="author" content="clihelp.org">

  <style>

    .site-title {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-180px; 
    margin-left:-280px;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 26px;
    }

    .search {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-50px;  
    margin-left:-100px;
    }

    .search input {
        height: 40px;
        width: 487px;
    }

  </style>

</head>
<body>
    <div class="site-title">
        <h1>CLIHELP - Help for Command Line Interface</h1>
    </div>
    <div class="search">
        <form action='q.php' method='GET'>
            <input type='text' size='25' name='search'>
            <input type='submit' name='submit' value='Search' >
        </form>
    </div>
</body>
</html>

Almost done, this is my code now. It works but the query still does not work after I press the Enter key.

This is again my code with the suggested modifications:

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>CLIHELP - Help for Command Line Interface</title>
  <meta name="description" content="Help for Command Line Interface">
  <meta name="author" content="clihelp.org">

  <style>

    .content {
    text-align: center;
    padding-top: 50px;
    }

    .site-title h1 {
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        font-size: 15px;
        font-style: normal;
        font-variant: normal;
        font-weight: 500;
        line-height: 26px;
        }

    .search {
        display: inline-block;
        width: 487px;
    }

    .search input {
        height: 40px;
        width: 100%;
    }

  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">

    $(document).ready(function() {
    $('.submit_on_enter').keydown(function(event) {
        if (event.keyCode == 13) {
        this.form.submit();
        return false;
        }
    });
    });

  </script>
</head>
<body>

    <div class="content">
        <div class="site-title">
            <h1>CLIHELP - Help for Command Line Interface</h1>
        </div>
        <div class="search">
            <form action='q.php' method='GET'>
            <input type='text' size='25' class="submit_on_enter" name='search'>
        </form>
    </div>
</div>
</body>
</html>

score 0 · Accepted Answer · edited May 23 '17 at 11:59

Here is an example of how it might work for you:

$(document).ready(function() {
  $('.submit_on_enter').keydown(function(event) {
    if (event.keyCode == 13) {
      this.form.submit();
      return false;
    }
  });
});

 .content {
   text-align: center;
   padding-top: 50px;
 }
 
 .site-title h1 {
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    line-height: 26px;
    }

 .search {
    display: inline-block;
    width: 487px;
 }

.search input {
    height: 40px;
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
   <div class="site-title">
        <h1>CLIHELP - Help for Command Line Interface</h1>
    </div>
    <div class="search">
        <form action='q.php' method='GET'>
            <input type='text' size='25' class="submit_on_enter" name='search'>
        </form>
    </div>
</div>

There are many alternative to how to send a form 'without' a submit button. The one I picked here comes from Submitting a form by pressing enter without a submit button. You can look there for more options and details about this.

Also you might want to checkout something like bootstrap and it's templates. For this purpose this one could bee easy to modify https://getbootstrap.com/examples/signin/.

Tony thank you so much, almost done. Question, where do I insert the first block of quote you put? Sorry I really do not have any experience. — Fabio, Nov 26 '16 at 01:55
Thanks Tony, I was able to insert the first block of code in the right location. Now the only issue left is the query, still does not work when I press the Enter button on the keyboard. It does not connect to my DB. — Fabio, Nov 26 '16 at 02:08

Align text and search box in the middle of the page and at the same time eliminate the search button

1 Answers1