Fabio Viola Fabio Viola - 8 days ago 5
CSS Question

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

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>

Answer

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

Comments