0

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;
  }
sethvargo
  • 26,739
  • 10
  • 86
  • 156
ArcherDidot
  • 1
  • 1
  • 3

2 Answers2

0

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;
 }
DommT
  • 155
  • 1
  • 12
  • I tried this, but now it seems that the elements are hanging a little below outside the navigation bar. I really want the search bar to be center while the links be to the right of it, kinda like the twitter nav bar. Im still tinkering with it, hopefully I can get it to work. Thanks for the insight though! – ArcherDidot Dec 28 '13 at 22:02
0

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

user2867973
  • 49
  • 6