I'm in the beginning stages of designing a new site, and my navigation bar is ticking me off.
I want a horizontal navigation bar with the links centered vertically on the bar, but I'm struggling. I've tried both unordered lists, and links. Any thoughts would be appreciated.
you can either check out <!-- w --><a class="postlink" href="http://www.operationtruth.net/index2.php">www.operationtruth.net/index2.php</a><!-- w -->
or
<<div id="wrapper">
<div id="header">
<img class="header_logo" src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo.gif" alt="Operation Truth .Net" />
<div id="nav_bar">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index2.php">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Forum</a></li></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">About</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Links</a></li>
</ul>
</div>
<div id="cleaner"></div>
</div>
#nav_bar{
background-image: url(/images/nav_background.png);
height: 30px;
}
#nav_bar ul{
padding: 0px;
margin: 0px;
list-style: none;
height: 30px;
float: right;
}
#nav_bar li{
display: inline;
height: 30px;
}
#nav_bar a{
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
font-weight: bold;
text-decoration: none;
color: #666666;
}
#nav_bar a:hover{
color: #999999;
}i figured out my own problem.... i just changed the line height of the links to match the line height of my background. works for me
I want a horizontal navigation bar with the links centered vertically on the bar, but I'm struggling. I've tried both unordered lists, and links. Any thoughts would be appreciated.
you can either check out <!-- w --><a class="postlink" href="http://www.operationtruth.net/index2.php">www.operationtruth.net/index2.php</a><!-- w -->
or
<<div id="wrapper">
<div id="header">
<img class="header_logo" src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo.gif" alt="Operation Truth .Net" />
<div id="nav_bar">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index2.php">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Forum</a></li></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">About</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"">Links</a></li>
</ul>
</div>
<div id="cleaner"></div>
</div>
#nav_bar{
background-image: url(/images/nav_background.png);
height: 30px;
}
#nav_bar ul{
padding: 0px;
margin: 0px;
list-style: none;
height: 30px;
float: right;
}
#nav_bar li{
display: inline;
height: 30px;
}
#nav_bar a{
padding-left: 10px;
padding-right: 10px;
vertical-align: middle;
font-weight: bold;
text-decoration: none;
color: #666666;
}
#nav_bar a:hover{
color: #999999;
}i figured out my own problem.... i just changed the line height of the links to match the line height of my background. works for me