DynamicsHi, I've been trying to center my nav bar using the following tutorial:
http://css.maxdesign.com.au/listamatic/horizontal16.htm
This is my code:
#nav {
position: absolute;
bottom: 0px;
left: 0px;
margin: 0px;
padding: 0px;
background: url(img/bg-menu.gif) repeat-x left top;
}
#nav a{
display: block;
text-decoration: none;
}
#nav a:hover {
display: block;
background: #6e7073;
text-decoration: none;
}
#nav {
width: 100%;
list-style: none;
line-height: 30px;
background: #4a4f54;
}
#nav ul {
width: 100%;
list-style: none;
line-height: 30px;
background: #4a4f54
text-align:center;
}
#nav li {
float: left;
text-align: center;
list-style: none;
border-left: 1px solid #6e7073;
border-right: 1px solid #6e7073;
margin-right: -1px;
}
#nav a, #nav a:visited {
display: block;
color: #fff;
padding: 0 20px;
}
#nav a:hover, #nav a:active, .current_page_item a, #home .on {
text-decoration: none;
}That is the code without editing in the necessary (to my knowledge) display: inline;and text-align center codes. Display inline and text-align don't seem to work. And removing the float: left in #nav li turns it into a vertical menu. Is this normal behaviour? What am I doing wrong? =[
How would one go about centering my nav menu, for the provided code particularly?
mojorob