> 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? > > <style type="text/css"> > #nav { > margin: 0 auto 3em auto; float: left; padding: 0; > list-style: none; > background-color: #f2f2f2; > border-bottom: 2px solid #ccc; border-top: 2px solid #ccc; } > #nav li { float: left; } > #nav li a { > display: block; > padding: 8px 9px; > text-decoration: none; > font-weight: bold; > color: #069; > border-right: 2px solid #ccc; } > #nav li a:hover { > color: #c00; > background-color: #fff; } > .bl { border-left: 2px solid #ccc; } > </style> > </head> > <body> > <ul id="nav"> > <li class="bl"><a href="index.html">Home</a></li> > <li><a href="History.html">History and 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> >
hi Peter, I got this working by adding a container div to do the centring. good luck! Sandy <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style type="text/css"> #container { width : 800px; margin-left : auto; margin-right : auto; border : solid 1px red } #nav { float: left; padding: 0; list-style: none; background-color: #f2f2f2; border-bottom: 2px solid #ccc; border-top: 2px solid #ccc; } #nav li { float: left; } #nav li a { display: block; padding: 8px 9px; text-decoration: none; font-weight: bold; color: #069; border-right: 2px solid #ccc; } #nav li a:hover { color: #c00; background-color: #fff; } .bl { border-left: 2px solid #ccc; } </style> </head> <body> <div id="container"> <ul id="nav"> <li class="bl"><a href="index.html">Home</a></li> <li><a href="History.html">History and 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> </body> </html> ______________________________________________________________________ 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/