Looking for some help with my navigation bar layout. You can also check out the code on fiddle http://jsfiddle.net/SgtRx/ (should have done this earlier, sorry).
I'm a beginner when it comes to coding, so please bear with me if I make any mistakes.
The issue I'm facing is that when I add borders to separate each block in the navigation bar, it creates a small whitespace at the end of the nav bar on the right-hand side.
The wrapper Div is set at 1000px width and there are 5 buttons, each 200px wide. Without borders, they fit perfectly, but adding borders messes up the alignment. If I keep the width at 200px, the nav bar shifts down. And when I reduce the width, it leaves white space on the right. I've been trying to fix this for 2 days now and I need some help. Thanks.
<body>
<div id="wrapper">
header id="top">
<div id="test">
<img src="images/vintage.jpg" width="1000" height="605" table width="780" order="0" align="center" cellpadding="0" cellspacing="0"/>
<nav id="mainnav">
<ul>
<li><a href="index.html" class="noBorder" >Home</a></li>
<li><a href="sightseeing.html">Sightseeing</a></li>
<li><a href="#">Eating Out</a></li>
<li><a href="#">What's On</a></li>
<li><a href="#">Test</a></li>
<li><a href="#">Test1</a></li>
<li><a href="#" class="noBorder1">Where to Stay</a></li>
</ul>
</nav></div>
</header>And here's the CSS:
#mainnav ul {
margin-top: auto;
margin-bottom: auto;
padding: 0;
display: block;
float: left;
width: 1000px;
list-style-type: none;
position: relative;
}
/* Styling links inside navigation */
#mainnav a {
width: 197px;
display: block;
float: left;
text-align: center;
background-color: #020202;
color: #FCFCFC;
text-transform: uppercase;
line-height: 290%;
border-radius: 0;
font-style: oblique;
font-weight: normal;
font-size: medium;
text-indent: 0;
text-shadow: 0;
position: relative;
margin: auto;
border: thin solid #FFFFFF;
opacity: 1;
}
.noBorder {
border-left-style: none !important;
}