Re: [css-d] Simple menu bar

[John D]

Use this code.  It works in IE8

<style type="text/css" media="all">

#nav {
        background: #f2f2f2;
        border-bottom: 4px solid #ccc; 
        border-top: 4px solid #ccc;
        float: left;
        width: 100%;
        overflow: hidden;
        position: relative;
}
#nav ul {
        clear:left;
        float:left;
        list-style:none;
        margin:0;
        padding:0;
        position:relative;
        left:50%;
        text-align:center;
}
#nav ul li {
   display:block;
   float:left;
   list-style:none;
   margin: 5px;
   padding:5px;
   position:relative;
   right:50%;
}


#nav li a {
        display: block;
        padding: 8px 9px;
        margin: 0 0 0 1px;
        text-decoration: none;
        font-weight: bold;
        color: #069;
        border-right: 2px solid #ccc;
        line-height:1.3em;
}

#nav li a:hover {
        color: #c00;
        background-color: #fff; }
        
.bl { border-left: 2px solid #ccc; }

</style>

<div id="nav">
        <ul>
      <li><a href="index.html" class="b1">Home</a></li>
      <li><a href="history.html">History & Structure</a></li>
      <li><a href="groups.html">Groups</a></li>
      <li><a href="constitutions.html">Constitutions</a></li>
      <li><a href="concessions.html">Concessions</a></li>
      <li><a href="opportunities.html">Opportunities</a></li>
      <li><a href="magazines.html">Magazines</a></li>
      <li><a href="links.html">Links</a></li>
</ul>
</div>


> I doubt you get questions more basic than this :-[
> 
> How do I get this menu bar to centre itself on the page?
> And show its background colour?
> 
 
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/