CODEWITHSUNDEEP
htmlcssnavigationsearchbarcenter-align
ArcherDidot
ArcherDidot

Reputation: 1

Search Box within Navigation bar alignment issue

Hey i'm just learning programming and im trying to have my search bar always centered with the nav links to the right of it with-in the fixed navigation bar. I just can't seem to make it work. Here is my html and css. I appreciate the help!

<div id ="nav">
  <div id ="navigation">
    <container id= "search">
      <form class="form-wrapper cf">
        <form action ='./search.php' method='get'>
          <input type="text" placeholder="" required>
            <button type="submit"><img class= "icon" src="images/search-icon.png"></button>
        </form>
      </container>

      <div>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
        <a href="#">Login</a>
      </div>
    </div>  
</div>

And my CSS:

#nav {
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  height: 28px;
  padding: 12px 0px 0px 0px;background: #4c4c4c; /* Old browsers */
  background: #4c4c4c; /* Old browsers */
  background: -moz-linear-gradient(top, #4c4c4c 0%, #1c1c1c 90%, #131313 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(90%,#1c1c1c), color-stop(100%,#131313)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #4c4c4c 0%,#1c1c1c 90%,#131313 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #4c4c4c 0%,#1c1c1c 90%,#131313 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #4c4c4c 0%,#1c1c1c 90%,#131313 100%); /* IE10+ */
  background: linear-gradient(to bottom, #4c4c4c 0%,#1c1c1c 90%,#131313 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */

  /* Adds shadow to the bottom of the bar */
  -webkit-box-shadow: 0px 0px 8px 0px #000000;
  -moz-box-shadow: 0px 0px 8px 0px #000000;
  box-shadow: 0px 0px 8px 0px #000000;

  /* Adds the transparent background */
  background-color: rgba(1, 1, 1, 0.8);
  color: rgba(1, 1, 1, 0.8);
}

#nav a { 
  font-size: 12px;
  padding-right: 60px;
  color: white;
    text-decoration: none;
  }

  #nav a:hover {
    color: grey;
  }

  #navigation { 
    display: inline;
    text-align: center;
  }

  #search {
    position: absolute;
    top: 5px;
  }

Upvotes: 0

Views: 4976

Answers (2)

user2867973
user2867973

Reputation: 49

Firstly I have never heard of a container tag, unless I'm missing something. Secondly you cannot wrap a form onto a form. So take out the wrapping form. Plus the form tag with the action and method attribute does not have a closing tag so include it.

 <div id="navigation">
       <form class="nav-form">
         <input type="text" required>
         <button type="submit">Submit</button>
       </form>
       <nav>
          <ul>
             <li><a href="#">Home</a></li>
             <li><a href="#">Home2</a></li>
             <li><a href="#">Home3</a></li>
             <li><a href="#">Home4</a></li>
         </ul>
       </nav>
    </div>

then include this css

#navigation {
       top:0;
       position:fixed;
       display:block;
       width:100%;
       height:28px;
}
.nav-form{
     margin:0 auto;
     float:left;
}
nav {
float:left;
}
nav ul li {
float:left;
list-style-type:none;
text-decoration:none;
}

Hope this helped. There may be an issue with margin:0 auto in which it won't center. If this happens do this:

margin-left;auto;
margin-right:auto;

or if that doesn't work:

margin-left:50%;

You can add your backgrounds and stuff after and can change the css around for your needs. I just done it the way it should work

Upvotes: 0

DommT
DommT

Reputation: 155

I would move the search form into the middle of the navigation menu. Check out this fiddle: http://jsfiddle.net/DJa25/8/

<div id ="nav">

<div id ="navigation">

<div>
    <a href="#">Home</a>
    <a href="#">About</a>
    <container id= "search">
    <form class="form-wrapper cf">
        <form action ='./search.php' method='get'>
         <input type="text" placeholder="" required>
        <button type="submit"><img class= "icon" src="images/search-icon.png"></button>
    </form>
</container>
    <a href="#">Contact</a>
    <a href="#">Login</a>

</div>

</div>

#search {
  display: inline-block;
 }

Upvotes: 0

Related Questions