> 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 [[email protected]]
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/
