CODEWITHSUNDEEP
htmlcss
Selina Delgado
Selina Delgado

Reputation: 21

How do I make the search bar bigger?

This is the code I have so far and I want to know how to make the search bar fit the navigation bar right. Help, please and sorry i'm not really good at coding this is for a Information Technology class i'm taking.

 <!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #8A1414;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 30px;
    text-decoration: none;
}

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

</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">Movies</a></li>
  <li><a href="#contact">TV</a></li>
  <li><a href="#about">About</a></li>
  <input id="search-bar" name="search" type="text" placeholder="Search...">
  <input id="search-button" name="search_submit" type="submit" value="Search">
</ul>
</body>

Upvotes: 0

Views: 5513

Answers (3)

Rusty
Rusty

Reputation: 4473

If you want to set increase the width put this in the css/ style tag

#search-bar{ width: 300px }

You can tweak the values according to your preferance.

If you want to properly adjust search bar in the layout, I can suggest following properties and you can also tweak their values.

#search-bar{
             width: 300px;
             height: 20px;
             margin-top: 10px;
             margin-left: 600px; 
           }

You should visit w3c school website for better understanding of CSS and HTML.

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115046

Your HTML is invalid. You can only have li as children of a ul

So we need to make some changes.

I'd suggest something like:

We take the search inputs out of the ul where they don't belong. Wrap those in their own div and float that to the right.

Wrap the whole lot (ul and search div) in a nav element.

Set the search input to display:inline-block then apply any width you'd like.

Codepen Demo

nav {
  background-color: #8A1414;
  overflow: hidden;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  float: left;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 30px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
.search {
  float: right;
  padding: 14px 0;
}
.search #search-bar {
  display: inline-block;
  width: 100px;
  /* your width here */
  /* 100px for SO Snippet only */
}
<nav>
  <ul>
    <li><a class="active" href="#home">Home</a>
    </li>
    <li><a href="#news">Movies</a>
    </li>
    <li><a href="#contact">TV</a>
    </li>
    <li><a href="#about">About</a>
    </li>

  </ul>
  <div class="search">
    <input id="search-bar" name="search" type="text" placeholder="Search...">
    <input id="search-button" name="search_submit" type="submit" value="Search">
  </div>
</nav>

Upvotes: 2

Argiris A
Argiris A

Reputation: 156

Is this what you want?Put in your css code this:

input#search-bar {
margin-top: 10px;
}

Upvotes: 0

Related Questions