Styling navigation through CSS - html

Question

I'm having troubles coming up with a solution to styling my navigation. This is what I want:
And this is a link to what I have so far.
This is supposed to be two separate classes of links on one navigation bar. One set on the left for the logo and other default links, and on the right is for social. I'm just going to need help with the left side for now but I thought I'd explain even further.
On the left side, each link should be centered in their own little block with a border on the left and right being 1px white. On their hover state, the background of their "box" should be white. The logo should be first on the left.
I'm sorry that I'm not able to explain better, but I've done my best. The picture and the link to what I have so far should explain the most.
I think it would be better if the logo was in the CSS instead of the HTML??
CSS:
/* Navigation bar */
#navi {
font-family: Helvetica Neue: Condensed Bold;
font-size: 14px;
color: white;
text-transform: uppercase;
background-color: #1e416f;
height: 30px;
margin: 0 0 20px 0;
padding: 20px 0 0 0;
}
#navi a {
color: white;
margin: 0 0 0 20px;
height: 30px;
}
#navi a:hover {
background: white;
color: #1e416f;
}
HTML:
<!-- NAVIGATION -->
<div id="navi">
<img src="/imgs/navi/caul_white_nav.png">
Directories
Committees
Resources
About
</div>

Answer 1

You can try something like:
#navi img, #navi a {
float: left; /* float next to each other on the left hand side */
}
#navi a { /* use some padding to have some empty space */
padding: 5px;
border-right: 1px solid #ffffff;
}
#navi a:hover { /* on hover, background white on A tags */
background: #ffffff;
}
And than play untill it fits, with the right side you could do the same, inside the nav you can float it to the right. If you want to have a seperate DIV you should also float this #navi to the left and the #social to the right.
If you only use padding on an element (which is blocked) the text will always be centered because the padding left / right are the same.
TIP: If you use floats like this and you want an item to be on a new line. Normally it would be set next to the float. If you use a DIV after the item and do a clear: both; it will be on a new line.

Answer 2

I've written this using your design: http://jsfiddle.net/ninty9notout/v3658/
Just information on what is what here:
On the homepage, use: <h1 class="logo">...</h1> and on all other pages: <div class="logo">...</div>
.logo and #primary-nav are floated left to make them stick to the left side.
All the li and a tags are also floated to the left. Block elements are easier to style than inline elements.
#tools-nav is floated to the right so it sticks to the right side.
I've used text-indent: -9999px; to hide the text for the logo and the would-be icons in the #tools-nav - feel free to add the icons via background property. Set the widths for the icon anchors to whatever width your icons are + 20 (+10px on either side).
And that is that.
The HTML:
<div id="navi">
<h1 class="logo">Name of Site</h1>
<ul id="primary-nav">
<li>Directories</li>
<li>Committees</li>
<li>Resources</li>
<li>About</li>
</ul>
<ul id="tools-nav">
<li class="login">Log In</li>
<li class="email icon">Email</li>
<li class="twitter icon">Twitter</li>
<li class="search icon">Search</li>
</ul>
</div>
The CSS:
#navi {
height: 30px;
background: #1e416f;
font-size: 14px;
color: white;
text-transform: uppercase;
}
.logo {
margin: 0;
padding: 0;
float: left;
}
.logo a {
float: left;
margin: 2px 10px;
width: 36px;
height: 26px;
background: url(http://redsky.incredifull.com/imgs/navi/caul_white_nav.png) left top no-repeat;
text-indent: -9999px;
}
#primary-nav, #tools-nav {
list-style: none;
margin: 0;
padding: 0;
}
#primary-nav li, #primary-nav a,
#tools-nav li, #tools-nav a { float: left; }
#primary-nav a,
#tools-nav a {
color: white;
text-decoration: none;
padding: 0 10px;
border-right: 1px solid white;
line-height: 30px;
}
#primary-nav li:first-child a,
#tools-nav li:first-child a{ border-left: 1px solid white; }
#tools-nav { float: right; }
#tools-nav .icon a {
text-indent: -9999px;
}
#tools-nav .email a { /* image */ }
#tools-nav .twitter a { /* image */ }
#tools-nav .search a { /* image */ }
I think it's what you wanted. Enjoy :)

Answer 3

Use
<img src="/imgs/navi/caul_white_nav.png" style="float: left;">