|
Centered Horizontal Navigation
centering a floated navigation isn't easy, until you suddenly find the way to do it. Life would be so much easier
if there was a float:center, but there isn't unfortunately.
Here's what you need to have the nav shown above. In your css file (or head section of the page if you prefer)
Obviously, you wont have the style tags if you use an external css file.
<![CDATA[
<style type="text/css">
#center-nav {
display:table;
padding:0;
margin:0 auto;
list-style-type:none;
white-space:nowrap;
text-align:center;
}
#center-nav li {
display:table-cell;
}
* html #center-nav li {
float:left;
}
#center-nav a {
width:auto;
display:block;
padding:4px 16px;
color:#fff;
background:#08c;
border:1px solid #fff;
text-decoration:none;
}
* html #center-nav a {
float:left;
}
#center-nav a:hover {
color:#000;
background:#d4d4d4;
}
.container {clear:both; text-decoration:none;}
* html .container {display:inline-block;}
</style>
]]>
I will assume you have a row ready to place the nav into(don't forget to give the table data tag a class, so you have some background color to it). Here is the code I used to get the nav you can see above.
<![CDATA[
<del class="container">
<ul id="center-nav">
<li><a href="index.html">sbi-help homepage</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
<li><a href="#">link 4</a></li>
</ul>
</del>
]]>
Now all you need to do, is play around with colors and fonts in the css, to get the nav looking the way you want it. Have fun with it!
|
