Previous Message
Next Message

Simple menu bar

Sent by John D on 30 July 2010 23:11


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 [EMAIL-REMOVED]]
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/
Previous Message
Next Message

Message thread:

Possibly related: