Hey there, I'm having an issue with my header design. I have a horizontal list of links in my header, and next to them, I wanted to add a search bar. Unfortunately, when I added the search bar next to the links, they all ended up appearing behind my body div.
Here's the HTML code snippet:
<ul id="unordered">
<li><a href="#">LInk1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><input type="text"></li>
</ul>
And here's the CSS styling:
#unordered {
display:inline-block;
height:0px;
padding-bottom:5px;
margin-left:400px;
}
#unordered li a{
text-align:center;
color:white;
text-decoration:none;
font-size:18px;
list-style-type:none;
}
#unordered li {
list-style-type:none;
display:inline;
padding-left: 0px;
padding-right: 55px;
padding-bottom: 15px;
}
#unordered li link {
list-style-type:none;
margin-bottom: 10px;
}
I've attached screenshots of how it looked before and after making changes...
Before: http://prntscr.com/2jfi8i After: http://prntscr.com/2jfhxz
Thank you for any help or suggestions you can provide!
Edit: Just realized that I forgot to include form tags. After adding them, the search bar is no longer hidden behind the body div, but now the links appear above the text box. Any ideas on how to fix this?