mountart mountart - 1 month ago 5
CSS Question

Evenly space out horz links and bullets between links across nav bar

I have a horz nav bar at the top of my website that has 7 text links & 6 bullets between the text links. Is there a way to evenly space out the text links & bullets horz across the nav bar. I tired it with the following code, all works well except the bullet spacing is weird and off. Much appreciated for some help on this. Here is the code I have.

Here is a link to my code on fiddle: http://jsfiddle.net/mountart/bdzcv/

<style type="text/css">


div#container{
width:1020px;

}
div#container ul {
display:table;
width: 100%;
margin:0px 0px;
padding-left:0px;
-webkit-padding-start:0px; /* reset chrome default */
}
div#container ul li {
display:table-cell;
height:20px;
line-height:20px;
width:14.285%;
font-family: "Arial Narrow", Arial, sans-serif;
font-weight:bold;
font-size:12px;
padding:0px 0px;
text-align: center;
border-right:none;
}
div#container ul li:last-child {
border-right:none;
}

div#container A:link { COLOR: black; TEXT-DECORATION: none; font-weight: normal }
div#containerA:visited {
COLOR: #666;
TEXT-DECORATION: none;
font-weight: normal
}
div#container A:active {
COLOR: #666;
TEXT-DECORATION: none
}
div#container A:hover {
COLOR: #C00;
TEXT-DECORATION: none;
font-weight: none
}
div#container li.headerbullet
{
float:left;
display:inline-block;
width:auto;
margin-left:5px;
margin-right:0px;
height:20px;
line-height:20px;
}
div#container li.headerbullet img
{
margin-top:10px;
}

</style>


<div class="clear"></div>


<div id="container">
<ul>
<li><a href="<%=BaseURL%>/entertainment">ARTS & ENTERTAINMENT</a></li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>


<li><a href="<%=BaseURL%>/technology">TECHNOLOGY</b></a></li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>


<li><a href="<%=BaseURL%>/auto">AUTO</a></li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>


<li><a href="<%=BaseURL%>/sports">SPORTS</a></li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>


<li><a href="<%=BaseURL%>/news/more-news-briefs.asp">NEWS BRIEFS</a></li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>



<li><a href="<%=BaseURL%>/greentech">GREEN ECONOMY</a></li>
<li class="headerbullet"><img src="http://www.hispanicbusiness.com/_client_common/images/main/2012/footer_bullet.png"/></li>
<li><a rel="nofollow" href="http://www.hirediversity.com" target="_blank">CAREER NEWS</a> </li>
</ul>
</div><hr style="margin-top:4px"/>

Answer

Let's clean up some of that HTML and CSS :)

We can create the bullets using just the li parents for each link. The padding on #container li will space out the bullets evenly, however large of a gap you want.

Updated

The menu is centred by the combination of margin: auto; and a fixed width (in this case - width: 776px;.

Screenshot

Have a fiddle!

HTML

<div id="container">
    <ul>
        <li>
            <a href="%3C%=BaseURL%%3E/entertainment">ARTS &amp; ENTERTAINMENT</a>
        </li>
        <li>
            <a href="%3C%=BaseURL%%3E/technology">TECHNOLOGY</a>
        </li>
        <li>
            <a href="%3C%=BaseURL%%3E/auto">AUTO</a>
        </li>
        <li>
            <a href="%3C%=BaseURL%%3E/sports">SPORTS</a>
        </li>
        <li>
            <a href="%3C%=BaseURL%%3E/news/more-news-briefs.asp">NEWS BRIEFS</a>
        </li>
        <li>
            <a href="%3C%=BaseURL%%3E/greentech">GREEN ECONOMY</a>
        </li>
        <li>
            <a href="http://www.hirediversity.com" rel="nofollow" target="_blank">CAREER NEWS</a>
        </li>
    </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
#container {
    overflow: hidden;
}
#container ul {
    margin: 10px auto;
    width: 776px;
    border-bottom: dotted 1px #CCC;
    overflow: auto;
    padding: 0 0 10px;
}
#container li:first-child {
    list-style: none;
    margin: 0 0 0 18px;
}
#container li {
    float: left;
    font-family:"Arial Narrow", Arial, sans-serif;
    font-size: 0.8em;
    padding: 0 30px 0 2px;
}
#container a:link {
    color: #000;
    text-decoration: none;
}
#container a:hover {
    color: #F00;
    text-decoration: underline;
}