Matthew Stoneback wrote:
> I have a navigation on this page: http://www.eddysound.com/dev/adr/ that I
> would like to center. It is a floated list. I cannot seam to get the list
> to center within the blue navigation area. What am I doing wrong? I have
> been able to do this before but I am currently stumped. Here is the CSS for
> the page: http://www.eddysound.com/dev/adr/main.css
>
Centering a float isn't really possible. The simplest solution to your
problem (that I can see) is to change the list items to inline and
remove the block from the link. The following CSS should get you close
to what you want. Tweak as you see fit.
/* Navigation */
#nav {
/*remove the following two declarations as they only serve to limit
the design
width: 850px;
height: 40px;
*/
margin: 0;
padding: 0;
background: #004084;
border-bottom: 2px solid #444;
}
#nav ul {
/* remove unnecessary width - see above comment
width: 850px; */
list-style: none;
margin: 0 auto;
padding: 0;
text-align: center;/*add to center the menu*/
}
#nav ul li {
display: inline;/*change this from float: left;*/
margin: 0;
padding: 10px 5px 5px; /*alter padding*/
line-height: 1.7;/*add this for vertical spacing*/
}
#nav ul li a {
/* remove float and block
display: block;
float: left; */
margin: 0;
padding: 5px 20px;/*alter padding*/
color: #FFF;
font-size: 21px;
text-decoration: none;
}
Caveat - only tested in Firefox, but there are plenty examples of this
method at Listamatic so it should be fine.
http://css.maxdesign.com.au/listamatic/horizontal16.htm
HTH
Mark
______________________________________________________________________
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/
