HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
Css horizontal menu list - problem
Post new topic   Reply to topic    HTML Help Forum Index -> CSS
View previous topic :: View next topic  
Author Message
vavroom



Joined: 17 Jul 2005
Posts: 6
Location: New Zealand / Aotearoa

PostPosted: Wed Sep 14, 2005 2:24 am     Css horizontal menu list - problem Reply with quote

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

PostPosted: Thu Sep 15, 2005 4:03 am     Reply with quote



Seems it is answered here: CSS centered horizontal list - trouble
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> CSS All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
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
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial