First change your code to this:
<div id="centeredmenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="consulting">Consulting</a></li>
<li><a href="ica-atom">ICA-AtoM</a></li>
<li><a href="clients">Clients</a></li>
<li><a href="about">About</a></li>
<li><a href="contact">Contact</a></li>
</ul>
<div>
Then change your css to this:
#centeredmenu {
float:left;
width:100%;
background:#fff;
border-bottom:4px solid #000;
overflow:hidden;
position:relative;
}
#centeredmenu ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#centeredmenu ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
}
#centeredmenu ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
background:#ddd;
color:#000;
text-decoration:none;
line-height:1.3em;
}
#centeredmenu ul li a:hover {
background:#369;
color:#fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
It should now work.
--- On Tue, 11/17/09, Jack Bates <[email protected]> wrote:
> I want to style an <ol> so it
> looks similar to the main links on this
> page, http://artefactual.com/
>
> - horizontal
> - right justified
> - fixed width
>
______________________________________________________________________
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/
