Hi I want to position my navigation next to my site name in the header, however its proven to be difficult and I have had to use position:absoutle and margins but I have to go into the minus numbers to get this to appear correctly.
I was wondering if there was an easier way to make these appear side by side?
Click here to view the JSFiddle!
Or view my code below:
index.html
<header>
<h1>iManage</h1>
<nav>
<ul class="maina">
<li><a href="Home">Home</a></li>
<li><a href="Projects">Projects</a></li>
<li><a href="Settings">Settings</a></li>
</ul>
</nav>
</header>
style.css
header {
width:auto;
height:50px;
background-color:#374348;
}
header > h1 {
font-size:16px;
font-weight:bold;
text-align:left;
color:#FFF;
padding:10px;
}
.maina > li {
display:inline;
list-style:none;
}
header > nav {
text-align:center;
width:300px;
height:auto;
border:medium #999;
position:absoulte;
top:0;
margin: -50px 0px 0px 60px;
}