 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
vavroom
Joined: 17 Jul 2005
Posts: 6
Location: New Zealand / Aotearoa
|
 Posted: Wed Sep 14, 2005 2:24 am Css horizontal menu list - problem |
 |
|
|
I'd love your assistance on this wee horizontal, centered menu. It's working the way I want it to, until I increase/decrease font size.
There has to be a better way, but I can't figure it out. Looked at listamatic, list-o-matic, alistapart, and several others.
I have a fixed width div. In that div, I have an unordered list, which is my navigation system. There will be only 4 items.
What I'd like to be able to do, rather than what I've done, is to say each li is to be 25% of the fixed width div (topnav), and have the a inside the li to be text-aligned in the center.
For what it's worth, I'm apparently unable to assign a width to li, whether % or px. Is this me, or what?
Any assistance and feedback on this would be greatly appreciated.
HTML
| Code: |
<div id="topnav">
<div class="moduletable_top">
<ul id="mainlevel_top">
<li><a href="bla.htm" class="mainlevel_top" >About</a></li>
<li><a href="bla.htm" class="mainlevel_top" >News / Events</a></li>
<li><a href="bla.htm" class="mainlevel_top" >Products</a></li>
<li><a href="bla.htm" class="mainlevel_top" >Contact</a></li>
</ul>
</div>
</div>
|
CSS
| Code: |
#topnav {
background-color:#E1AE3A;
width:770px;
margin-left:auto;
margin-right:auto;
}
ul#mainlevel_top {
height:20px;
padding-top:5px;
margin-left:-31px;
}
#mainlevel_top li
{
display: inline;
list-style-type: none;
width:175px;
}
#mainlevel_top a {
padding:0px 50px 0 50px;
}
#mainlevel_top a:link, #mainlevel_top a:visited
{
color: #fff;
background-color: #E1AE3A;
text-decoration: none;
font-weight:bold;
text-transform:uppercase;
}
#mainlevel_top a:hover
{
color: #fff;
background-color: #AAAAAA;
text-decoration: none;
}
|
|
|
Corey Bryant
Site Admin
Joined: 15 May 2004
Posts: 8267
Location: Castle Rock CO USA
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
