CODEWITHSUNDEEP
html
noobling
noobling

Reputation: 21

Formatting header search bar in HTML/CSS

[05/Jan/2009:02:27:22 -0500] slapi_ldap_bind - Error: could not send bind request for id [cn=repl manager,cn=config] mech [SIMPLE]: error 91 (Can't connect to the LDAP server)
[06/Jan/2009:17:52:04 -0500] schemareload - Schema reload task starts (schema dir: default) ...
[06/Jan/2009:17:52:04 -0500] schemareload - Schema validation passed.
[06/Jan/2009:17:52:04 -0500] schemareload - Schema reload task finished.
[07/Jan/2009:15:54:08 -0500] - libdb: write: 0xb75646e5, 508: No space left on device
[07/Jan/2009:15:54:08 -0500] - libdb: txn_checkpoint: log failed at LSN [22 7649039] No space left on device
[07/Jan/2009:15:54:08 -0500] - Serious Error- - - Failed to checkpoint database, err=28 (No space left on device)
[07/Jan/2009:15:54:08 -0500] - *** DISK FULL ***
[07/Jan/2009:15:54:08 -0500] - Attempting to shut down gracefully.
[07/Jan/2009:15:54:08 -0500] - slapd shutting down - signaling operation threads
[07/Jan/2009:15:54:08 -0500] - slapd shutting down - closing down internal subsystems and plugins
[07/Jan/2009:15:54:11 -0500] - Waiting for 3 database threads to stop
[07/Jan/2009:15:54:11 -0500] - All database threads now stopped
[07/Jan/2009:15:54:12 -0500] - slapd stopped.
        Red Hat-Directory/8.1.4 B2008.310.1012
        server.example.com:389 (/etc/dirsrv/slapd-example)

[07/Jan/2009:22:18:41 -0500] - Red Hat-Directory/8.1.4 B2008.310.1012 starting up [07/Jan/2009:22:18:44 -0500] memory allocator - cannot calloc 0 elements; trying to allocate 0 or a negative number of elements is not portable and gives different results on different platforms. [07/Jan/2009:22:18:44 -0500] - slapd started. Listening on All Interfaces port 389 for LDAP requests

Upvotes: 1

Views: 469

Answers (2)

omukiguy
omukiguy

Reputation: 1437

Try this in flexbox. Kindly reformat your html. It is broken

/*Simple CSS Reset*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  min-width: 100%;
}

body{
  display: flex;
}

header {
  padding: 10px;
  flex: 1;
  display: flex;
  background-color: #333;
  /*Use flexbox to push content from right as default direction so everything moves from right to left*/
  justify-content: flex-end;
}

/*CSS for navigation bar*/
ul {
  display: flex;
  list-style-type: none;
  text-align: center;
  /*use flexbox to take up the remaining space and push the content to the left. while leaving the space for the search box*/
  flex: 1;
}

/*Text for navigation bar*/
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;    
}

li a:hover {
  background-color: #111;
}

form {
  display: inline-block;
}

input[type=text] {
  display: inline-block;
  width: 180px;
  border: 0px solid #ccc;
  border-radius: 2px;
  font-size: 16px;
  padding: 12px 10px 10px 10px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
  /*Restrict width of growth*/
  width: 270px;
}

button {
  display: inline-block;
  padding: 10px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <header>
    <ul>
      <li><a class="active" href="/home">Home</a></li>
      <li><a href="/users">Users</a></li>
      <li><a href="/logout">Logout</a></li>
    </ul>

    <form class="example" action="/action_page.php" class="search">
        <input type="text" name="search" placeholder="Search Database">
        <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </header>
</body>
</html>

Upvotes: 1

iceveda06
iceveda06

Reputation: 619

Chen, You have several mistakes in your program. After your body closes, there is another div closing. Your list are at the top, it should be inside the body. Anyways, i'm close to getting what you are looking for. Take a look at this and run with it to get what you want. I fixe the errors and put search to the right side like you wanted.

<html>
<head>


<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

html{
    display: table;
    margin: auto;
}

body{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
/*   * {
    border: 1px solid red;
  } */
/*CSS for navigation bar*/
ul {
    list-style-type: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    text-align: center;
    margin-top:0;
}
/*Text for navigation bar*/
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;    
}
li a:hover {
    background-color: #111;
}
input[type=text] {
    width: 180px;
    box-sizing: border-box;
    border: 0px solid #ccc;
    border-radius: 2px;
    font-size: 16px;
    padding: 12px 10px 10px 10px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
    width: 150%;
}
#page-wrap{
    text-align:left;
    /* width:900px; */
    margin: 0 auto;
}

#search {
  text-align: right;
  /* position: absolute; */
    margin: 10 auto;
  float: right;
  }
  #top-bar {
    width: 900px;
  }
  
</style>
</head>
<body>
  <div id="top-bar">
    <div id="page-wrap">
      <ul>
        <li><a class="active" href="/home">Home</a></li>
        <li><a href="/users">Users</a></li>
        <li><a href="/logout">Logout</a></li>
        <div id="search">
          <li>
            <form class="example" action="/action_page.php" style="margin:auto;max-width:300px">
              <input type="text" name="search" placeholder="Search Database">
              <button type="submit"><i class="fa fa-search"></i></button>
            </form>
        </li>
        </div>
      </ul>
    </div>
   </div>
  </div>
</body>
</html>

Upvotes: 2

Related Questions