I used ukgeoff's tutorial to make the menu system, and found it to be extremely helpful for menu systems, but I want to know how to center the text inside of the li values. Let me show you the code I am working with here, if your not familiar with his tutorial...
- Code: Select all
div#nav ul
{
position: absolute;
list-style: none;
list-image: none;
margin: 0;
padding: 0;
background-color: #ffbbbb;
width: 80px;
height: 20px;
font-size: 10px;
}
div#nav li
{
position: relative;
}
div#nav ul.level1
{
height: 20px;
width: auto;
}
div#nav ul.level1 li
{
float: left;
margin: auto;
}
div#nav li a {
display: block;
padding: 3px 0 3px 3px;
text-decoration: none;
}
div#nav ul.level1 a
{
width: 77px;
}
div#nav li a:hover
{
color: #000000;
background-color: #005fa4;
}
and... the
html!
- Code: Select all
<body>
<div id='main'>
<div id='head'>
</div>
<div id='nav'>
<ul class='level1'>
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>
</div>
<div id='subnav'>
</div>
<div id='content'>
</div>
</div>
</body>
I hope this isnt too confusing. Let me know if you dont understand what I am aiming for.