Welcome to WebmasterWorld Guest from 54.211.238.44

Forum Moderators: not2easy

Message Too Old, No Replies

How to center my UL navigation list?

Centering my UL navigation list... Help!

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

New User

5+ Year Member

joined:Feb 3, 2010
posts: 7
votes: 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]

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

New User

5+ Year Member

joined:Apr 16, 2010
posts: 19
votes: 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.
11:15 am on Apr 18, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 4, 2002
posts:2204
votes: 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...
6:13 pm on Apr 19, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 18, 2007
posts:671
votes: 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.