homepage Welcome to WebmasterWorld Guest from 54.226.191.80
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
How to center my UL navigation list?
Centering my UL navigation list... Help!
justachild20




msg:4097196
 1:15 am on Mar 14, 2010 (gmt 0)

All the menus on my navigation list are aligning left and I want them to be centered on the page, with automatic space between them. Is this possible? Below is the HTML and the CSS code for the site:


<div class="mainmenu">

<ul>
<li class="li_nc"><a href="http://www.example.com/" target="_self" >Home</a></li>
<li class="li_hc"><a href="http://www.example.com/about-example-example.html" >About</a>

<ul class="ul_ch">
<li class="li_nc"><a href="http://www.example.com/example-example-example.html" target="_self" >History</a></li>
<li class="li_nc"><a href="http://www.example.com/example-example-example.html" target="_self" >Our example</a></li>
<li class="li_nc"><a href="http://www.example.com/example-example-history.html" target="_self" >example</a></li>
</ul></li>
<li class="li_hc"><a href="http://www.example.com/example-example-courses.html" target="_self" >example</a><ul class="ul_ch">
<li class="li_nc"><a href="http://www.example.com/example-example-example-training-example.html" target="_self" >example</a></li>
<li class="li_nc"><a href="http://www.example.com/example-example-example-training.html" target="_self" >example example Responder</a></li>
<li class="li_nc"><a href="http://www.example.com/example-example-example-courses.html" target="_self" >example example example</a></li>
<li class="li_nc"><a href="http://www.example.com/example-example.html" target="_self" >example + example example</a></li>
<li class="li_nc"><a href="http://www.example.com/example-example-i-training.html" target="_self" >example EMT-I</a></li>
<li class="li_nc"><a href="http://www.example.com/customized-example-training-courses.html" target="_self" >Customized Courses</a></li>
<li class="li_nc"><a href="http://www.example.com/example-training-example-example.html" target="_self" >Class Schedule</a></li>
</ul></li>
<li class="li_nc"><a href="http://www.example.com/sponsoring-example-example-example-training.html" target="_self" >Sponsors</a></li>
<li class="li_nc"><a href="http://www.example.com/example-example-students.html" target="_self" >Students</a></li>
<li class="li_hc"><a href="http://www.example.com/register-example-example.html" target="_self" >Register</a><ul class="ul_ch">
<li class="li_nc"><a href="http://www.example.com/example-form.html" target="_self" >Step 1: Registration Form</a></li>
<li class="li_nc"><a href="http://www.example.com/payment-options.html" target="_self" >Step 2: Payment Options</a></li>
</ul></li>
<li class="li_nc"><a href="http://www.example.com/contact-us.html" target="_self" >Contact</a></li>
</ul>


</div>





And the CSS:


body{
behavior: url(script/csshover2.htc);<!--hack per ie6-->
}


.mainmenu{
float: left;
width: 950px;
padding: 0;
}
.mainmenu ul {
float: left;
width: 950px;
list-style: none;
line-height: 1;
color:#FFFFFF;
background: #00006C;
padding: 0;
border: solid #FFFFFF;
border-width: 1px 0;
margin: 0 0 1em 0;
}

.mainmenu a, .mainmenu a:visited {
display: block;
font-family:Arial, Helvetica, sans-serif;font-size:0.8em;font-weight:bold;font-style:normal;text-decoration:underline;
color: #FFFFFF;
text-decoration: none;
padding: 1em 1em;
}
.mainmenu ul ul a{
width:100%;
height:100%;
}
.mainmenu ul a{
width:1%;
}


.mainmenu li {
float: left;
margin:0;
padding:0;
}

.mainmenu ul li {float:left; position:relative; }
.mainmenu ul li a {white-space:nowrap;}

.mainmenu li ul {
position: absolute;
left: -999em;
height: auto;
width:15em;

background: #005900;
font-weight: normal;
border-width: 1px;
margin: 0;
}

.mainmenu li li {
width:15em ;
}

.mainmenu li li a{
width:13em ;
}

.mainmenu li ul {
margin: 0;
}
.mainmenu li ul ul {
margin: -2.8em 0 0 13.5em;
}
.ul_ch,
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
left: auto;
}
.mainmenu li:hover>ul.ul_ch
{
left: auto;
}

.mainmenu li:hover{
background: #CF1216;
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
color:#FFFFFF;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a,
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited,
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
color:#FFFFFF;
}
.mainmenu li li:hover, .mainmenu li li li:hover,
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover
{
background: #CF1216;
z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a,
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
color: #FFFFFF;
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
color: #FFFFFF;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
color: #FFFFFF;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
color: #FFFFFF;
}

[edited by: limbo at 11:11 am (utc) on Apr 18, 2010]
[edit reason] Examplified [/edit]

 

webeno




msg:4117584
 7:30 am on Apr 18, 2010 (gmt 0)

don't be surprised, you float:left the mainmenu, of course it's not going to center. is there a specific reason you use it? if not, set instead margin: 0 auto or setup a wrapper div (include all your content into another main div) that has this margin: 0 auto property - it should work even if float:left is used in the child divs.

limbo




msg:4117627
 11:15 am on Apr 18, 2010 (gmt 0)

Hi justachild20. Welcome to WebmasterWorld :)

Your CSS and HTML needs to be simplified and validated. There's a lot of child properties called when just one will do.

Can you describe how you want them centred? Is the whole list from left to right, or the text centred in each list item?

It's a pain that you can't simply float:center; on block level elements so you're going to have to use a couple of tricks if you want to center every li element within the UL and still have block level control...

Xapti




msg:4118262
 6:13 pm on Apr 19, 2010 (gmt 0)

My guess is he wants the anchor elements centered in the LIs. I believe setting text-align would work as long as he removed the float from the LI

First off.... what's with all the messed up CSS declarations. I see all these li li{}s, and even li li ul{}s. where the most nesting you have is ul ul li.

you will not be centering things when you have float:left on. you can use margin: (0 (or x) auto;" on block elements to center them, or text-align:center; on the container of inline content, which would make more sense in this case.

The main difference would be if you wanted the links to be clickable on the whole LI, so some extra padding around the text will be clickable - or just on the text, which is more straightforward, but users may miss the link-click if the padding is too much and/or font is too small.

to make the whole LI clickable, you want to make the anchor element block (by setting a CSS style display:block), and then doing the automatic margin style (centering) that I mentioned earlier.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved