Here is my code: http://jsfiddle.net/DFN5y/
As you can see the list items on the right are on the line below. Can anyone please tell me how to remedy this? This is my code:
<ul id="nav">
<li>Features</li>
<li>Pricing</li>
</ul>
<ul id="nav" style="float:right;">
<li>Sign up</li>
<li>Login</li>
</ul>
You could set them inline by making ul as inline-block element
ul {
display: inline-block;
}
but you have two nav's and duplicate id's so look at the example below and try to follow that style in future coding
<ul id="nav">
<li>Features</li>
<li>Pricing</li>
<li class="right">Sign up</li>
<li class="right">Login</li>
</ul>
#nav li {
display: inline-block;
padding-left: 40px;
}
.right{
float: right;
}
or you could float them without class e.g.
#nav li:nth-child(3),
#nav li:nth-child(4) {
float: right;
}
or even simpler by moving just third element e.g.
#nav li:nth-child(n+3) {
float: right;
}
FIDDLE
your #nav is having 100% width and does not have float, thats why its taking complete space till right edge.
#nav {
float: left;
padding-left: 100px;
}
Fiddle
Try:
ul li {
display: block;
float:left;
padding-left: 40px;
}
Just add this to your CSS :
ul{ display : inline-block;}
And please change the id's of your ùl`tags so that they are different ! Id's should be unique on the page.
Have a look at this fiddle.
Basically i have changed the original in 4 ways:
replaced the id nav, which had been issued twice, by a class of the same name
distinguished between the first and the second nav-ul in css formatting
moved the style dfinitions from the element attribute to the css (somehow the float rule messed up teh alignment)
all nav-ul being displayed as inline-block to assue verticla alignment.
You'd be better off adding them all to the same ul element and then using the :nth-child pseudo-selector to add additional padding to the middle elements to create the separation you want.
http://jsfiddle.net/DFN5y/17/
ul li:nth-child(3){
padding-left: 20%;
background: red;
}
Related
I have placed one div inside of another, but it keeps appearing below the div it is nested inside. What I want is to get the login div to appear inside the navdiv but push it over to the right of the page.
I can get it over there by adding position absolute, (which I'm also unsure about) but it then behaves in ways I don't want when I resize the page.
Please try to explain what is happening here as simply as possible. Thanks!
http://jsfiddle.net/viggie/5we2wxug/
#navdiv {
display: block;
background-color: blue;
height: 20px;
margin-bottom: 7px;
}
ul {
text-align: center;
}
#navdiv li {
background-color: red;
display :inline;
font-size: 1.3em;
padding-left: 25px;
padding-right: 25px;
vertical-align: middle;
margin-left:35px;
margin-right:35px;
margin-bottom:4px;
}
#navdiv li a:visited {
color: yellow;
}
#navdiv li:hover {
background-color: green;
}
#login {
padding-right: 10px;
padding-left: 10px;
background-color: yellow;
top: 0;
right: 0;
}
#login li {
verticle-align: middle;
}
HTML
<div id="navdiv">
<ul>
<li>Home</li>
<li>Members</li>
<li>Articles</li>
<li>Videos</li>
<li>Join</li>
</ul>
<div id="login">
<ul>
<li>Log out</li>
<li>Log in</li>
</ul>
</div>
</div>
While your #login div is technically inside of #navdiv, #navdiv has a height set which is stopping the background from extending to cover the #login as well - The #login is inside it structurally, but visually it's overflowing the #navdiv area.
So, to stop that bit, simply remove the height from #navdiv.
To align the login to the right, I'd recommend making the #login ul an inline-block that's simply aligned right. You lose the absolute andfloat issues, and it's easy to make responsive.
#login {
text-align: right;
}
#login ul {
padding-right: 10px;
padding-left: 10px;
background-color: yellow;
display: inline-block;
}
Note, I also put the background color on the ul since it's more accurate to the #login area - probably you'll want to modify the styling some yet anyways.
http://jsfiddle.net/daCrosby/5we2wxug/1/
Put this code in your css
.left_part { float:left;width:72%;}
.right_part { float:right;width:28%;}
.right_part ul { padding-left:0px;}
and add this in body part
<div id="navdiv">
<div class="left_part">
<ul>
<li>Home</li>
<li>Members</li>
<li>Articles</li>
<li>Videos</li>
<li>Join</li>
</ul>
</div>
<div class="right_part">
<ul>
<li>Log out</li>
<li>Log in</li>
</ul>
</div>
</div>
i just gave you normal idea and now i hope you can manage your own css with this way...hope it helps..
Updated
according to you...just use Float in ul and in login div as login div will not go with ul until you are not using float left or right properties..they have their own css and you have to use float for this...there can be more option but float will help you in your case if you don't want more div..
I have created a menu using ul and li, but it shows me in reverse order. For example:
FAQ PRICING TOUR HOME instead of the expected HOME TOUR PRICING FAQ
.header ul {
}
.header li {
list-style-type: none;
margin-left: 40px;
float: right;
}
<div class="header">
<ul>
<li>HOME</li>
<li>TOUR</li>
<li>PRICING</li>
<li>FAQ</li>
</ul>
</div>
What's wrong in my code?
You should float only the ul right. The list items should be floated left in the correct (expected) order:
.header ul {
float:right;
}
// expected order. It's the default value if not overriden,
// therefore it is not realy needed
.header li
{
float:left;
}
Instead of taking float right take it as left then you will get the result HOME TOUR PRICING FAQ
To understand it let us see :
Here you are trying to print HOME TOUR PRICING FAQ and if you will float this to the right it means you are telling to print from right and that's why it gives you the output as
FAQ PRICING TOUR HOME so that's why we use float: left;
.header ul
{
}
.header li
{
list-style-type: none;
margin-left: 40px;
float: left;
}
<div class="header">
<ul>
<li>HOME</li>
<li>TOUR</li>
<li>PRICING</li>
<li>FAQ</li>
</ul>
</div>
DEMO
It's because you're floating each list element right.
Set float: right on the parent element instead.
.header ul {
float: right;
}
There are various other solutions, see here
Here's a demo
The reasons seems to be the float element. When you give float:right, it takes the first element to the right most side and rest of the items after that. However if you give float:left, the items seems to come in correct order with positioning the first item in the left and rest of the items after that.
try something like this
.header ul {
float: right;
}
.header li {
list-style-type: none;
margin-left: 40px;
float: left;
}
Reason
you are floating li element to right so instead float it to left.
float li parent element ie ul to left.
I have these nested ul and li . When i fill background color, nested li leaves indented portion white. I have a number of li like this that gets filled from database so i cannot give margin left to individual text in li . How can i do this so that background fills whole line along with the indentation?
Right now it looks like this
I want it like this
Any suggestions how can do this? Thanks in advance. I cannot change the html markup as i'll have to change a lot of code. Is there a way to do this using this markup. these li are coming from db query so i dont have exact number of li in this case.
Demo http://jsbin.com/uReBEVe/1/
By default, <ul> has padding-left to accomodate the bullet point.
If you add this to your CSS:
ul {padding-left:0}
ul>li {padding-left:40px}
You should get the effect you want.
EDIT: Also you need to correct your HTML :p <ul> can ONLY have <li> as children.
Best thing to do is to use a structure which makes it easy for database management , html and styling(CSS) .
HTML:
<body>
<ul class="main">
<li>1.</li>
<li><ul>2</ul></li>
<li><ul><li><ul>3.</ul></li></ul></li>
</ul>
</body>
CSS:
.main{
position:relative;
right:40px;
}
li{
list-style:none;
background:red;
margin-top:1px;
}
Fiddle 1.
I dont know if ul not containing li is valid or invalid.If its invalid then you can use:
<body>
<ul class="main">
<li>1.</li>
<li><ul><li>2</li></ul></li>
<li><ul><li><ul><li>3.</li></ul></li></ul></li>
</ul>
</body>
Fiddle 2
Flexible, Multi-Level Nesting Solution
This is very similar to another question I answered here, and I've composed a similar solution for you below. You will want valid html by having all nested li elements inside their own ul (as others have noted here), and it would be best to control all this by some class on the outermost ul (though that is not required, but makes targeting this list a whole lot easier).
The key here is supplying the background through the :before pseudo-element, which is made to span the whole width of the outermost ul.
Here is my demo jsbin.
HTML
<ul class="full-width-list">
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>B</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.full-width-list {
position: relative;
padding: 0 0 0 4px;
}
.full-width-list ul {
margin: 0;
padding: 0
}
.full-width-list li {
list-style:none;
padding: 0;
margin: 0;
height: 1.2em;
line-height: 1.2em;
}
.full-width-list ul > li {
margin-top: 4px;
padding: 0 0 0 36px;
}
.full-width-list li:first-child:before {
content: '';
height: 1.2em;
position: absolute;
left: 0;
right: 0;
z-index: -1;
background:red;
}
.full-width-list li:first-child:hover:before {
background:green
}
Limitations
This solution has two main limitations:
None of the ul or li elements can have a position other than the default static set on them, as the :before pseudo-element of the li elements needs to have its only positioned parent be the .full-width-list element.
There has to be a set height on the li items. In my example I use 1.2em, but whatever height you set, it means that the li elements cannot go to two or more lines of text (so this solution only works with a single line of text).
You can do this with :before hack as you have no access to the code
Working jsBin Demo
CSS
li{list-style:none;background:red;margin-top:4px; }
li:hover{background:green}
li:hover:before {background:green}
li:before {background:red; width:100%; content:'.'; position:absolute; left:0; z-index: -1;}
This works at arbitrary depths without hacks or nonsense.
The people saying "can't" and "impossible" in this thread really need to learn what those words mean with respect to CSS (generally, "haven't figured out how yet.") :)
The idea is simple: set a :before selector which fits the left and right edges by absolute positioning and paints a background color. You need to set a z-index: to put it behind its content, a content: '\0020' to force it to paint (that's a non-breaking space,) and you're good.
You can bound this by setting it inside a position: relative container.
<!doctype html>
<html>
<head>
<style>
li {
list-style-type : none;
margin-bottom : 0.25em;
}
li:before {
position : absolute;
left : 0;
right : 0;
background-color : #eef;
content : "\00a0";
z-index : -1;
}
</style>
</head>
<body>
<ul>
<li>Test</li>
<li><ul>
<li>Test</li>
<li><ul>
<li>Test</li>
</ul></li>
</ul></li>
</ul>
</body>
</html>
Your markup is broken, you should nest li in a single ul like this:
<ul>
<li>Text</li>
<li>Text 1</li>
</ul>
This was your markup
<ul>
<li>A</li>
<ul>
<li>B</li>
<ul>
<li>B</li>
</ul>
</ul>
<ul>
I assume you see why this is wrong.
I've fixed the JSBin for you and it has the correct effect.
EDIT: You could of course add the padding-left by looping over all lis using javascript.
You could not be sure enough about browser consistency until markup cleanup and consistency, sad but true. All the suggestions from above looks good, there is bit of alternative from my practical view.
The markup:
<ul>
<li>A</li>
<li><p>B</li>
<li><p><p>B</li>
<li><p><p><p>B</li>
....
</ul>
And CSS:
li p {
padding-left: 1em;
display: inline;
}
JSbin
p tag is optional to close in HTML subset, and generally should works in every browser anyway no matter of doctype. In case you are on xHTML and worry about validation an option could be using closing tags like:
<ul>
<li>A</li>
<li><p></p>B</li>
<li><p></p><p></p>B</li>
....
</ul>
Try this:
<ul class="lvl1">
<li>A</li>
<ul class="lvl2"><li>B</li>
<ul class="lvl3"><li>B</li></ul>
</ul>
</ul>
li {
background: none repeat scroll 0 0 #FF0000;
list-style: none outside none;
margin-top: 4px;
}
ul { padding:0px;}
ul.lvl1>li {padding-left:30px;}
ul.lvl2>li {padding-left:60px;}
ul.lvl3>li {padding-left:90px;}
See here: http://jsfiddle.net/x5K4a/
1) Your HTML is invalid (missing <li> around <ul>)
2) The only way to make indentation work as you expected is a CSS rule for each level.
ul ul li.line { padding-left: 20px !important }
ul ul ul li.line { padding-left: 40px !important; }
...
http://jsbin.com/uReBEVe/12/edit
if it is just a matter of background-color, you can use a shadow of same color.
http://codepen.io/gc-nomade/pen/fxBAl (html structure fixed)
<ul class="ulparent">
<li>
<p>A</p>
<ul>
<li>
<p>B</p>
<ul>
<li>
<p>B</p></li>
</ul>
</li>
</ul>
</li>
</ul>
.ulparent {overflow:hidden;}
li p {background:green;box-shadow:-200px 0 0 green;/* -200px for instance or whatever suits your need */margin:4px 0;}
li p:hover {background:red;box-shadow:-200px 0 0 red;}
Else, if it is a background-image, i would use pseudo-element and background-attachment:fixed;(demo included in codepen , using a linear-gradient as image )
I am going to give you the proper idea how to apply css rules over the HTML contents.Below the css rules I have created just copy it and see the answer.It is the child combinator which I used!I inspect whole the answers provided by the different users which is not followed the css rules at all. Just let me know! Hope the answer!
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
li{
list-style:none;
background:red;
margin-top:4px;
}
body>ul>ul>li{
margin: 4px 0 0 -40px;
}
body>ul>ul>ul>li{
margin: 4px 0 0 -80px;
}
body>ul>ul>li {
padding:0px 0px 0px 40px;
}
body>ul>ul>ul>li{
padding:0px 0px 0px 80px;
}
li:hover{
background:green;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>C</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Save the image at first to your local drive or drag and drop this image into the new tab browser to see more visible.
Here is the proper HTML structure that you should follow, with each UL element having two LI elements. One for the value of each line and one as the parent for the next indented value.
<ul>
<li>A</li>
<li>
<ul>
<li>B</li>
<li>
<ul>
<li>C</li>
</ul>
</li>
</ul>
<li>
</ul>
For the CSS, this solution requires you to have a max number of 'levels' in your list hierarchy (see code comment)
li {
list-style:none;
padding-left:0px;
box-sizing:border-box;
}
ul {
padding-left:0
}
ul > li:nth-of-type(1):hover {
background:green
}
ul li:nth-of-type(1) {
padding-left:50px;
background:red;
margin-top:4px
}
ul li li:nth-of-type(1) {
padding-left:100px;
}
ul li li li:nth-of-type(1) {
padding-left:150px;
}
/*
Continue incrementing the padding for the li
children for however many levels you want
*/
Make note, the nth-of-type selector is supported by all browsers EXCEPT for IE8 and below.
See JSBin for working example: http://jsbin.com/uReBEVe/51
Good luck!
Both UL and OL inherit margins. Your fix would be to zero out the margin:
ul, ol
{
margin:0;
}
You can add this CSS in your code to get your desired results:
li {
list-style: none;
background: red;
margin-top: 4px;
}
ul {
padding: initial !important;
}
ul ul li {
padding-left: 40px;
}
ul ul ul li {
padding-left: 80px;
}
li:hover {
background: green;
}
Result on jsbin is here: http://jsbin.com/uReBEVe/33/edit
#AsrafulHaque has the correct idea about using padding to extend the background width without changing nesting indents.
However, because you don't know how many < li> there will be, you can't expect this to be a pure CSS solution.
You're attempting to do a pretty awkward thing but it would be possible to loop over them and inject dynamic padding using javascript/jquery or something:
i = 40;
$('img.yourImageClass').each(function() {
$(this).css('padding-left', i+'px');
i = i + 40;
});
You could also do this type of injection with pre-processing on the server side I am sure, but definitely not with CSS alone. You need a dynamic solution (i.e. the ability to use variables) to support your dynamic output.
A very very fiddly jsfiddle but it works with a little nudge in the right direction from jQuery. Not a great resolve but a resolve none the less.
HTML
<ul>
<li>A</li>
<ul>
<li>B</li>
<ul>
<li>B</li>
</ul>
</ul>
</ul>
CSS
ul {
list-style-type:none;
margin-top:5px;
padding-left:40px;
float:left;
width:400px;
overflow:hidden;
background:#ff0000;
}
li {
padding-top:5px;
}
ul div {
position:absolute;
left:0;
width:100%;
border-top:3px solid #fff;
}
jQuery
$(document).ready(function(){
$('ul').prepend('<div></div>');
});
jsFiddle here. Hopefully this works for you!
You can do like this
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul class="mainUL">
<li>A</li>
<ul><li>B</li>
<ul><li>C</li></ul>
</ul>
</ul>
</body>
</html>
CSS Code
li{list-style:none;background:red;margin-top:4px; }
li:hover{background:green}
li:hover:before {background:green}
li:before {background:red; width:100%; content:'.'; position:absolute;left:0; z-index: -1;color:red;}
.mainUL {padding-left: 0px;}
You can see the working demo : http://jsbin.com/uReBEVe/71/edit
from your demo:
if you apply
ul{
padding:0;
margin:0;
}
everything sits flush to the wall like you want.
if you want text indents
ul ul li{
text-ident:20px;
}
which is nesting. will only targets li's that are in ul's that are nested in ul's. then what you want works and you don't need to change your code
you can also keep nesting that code
add more ul's and li's depending on the depth of your structure, but this should give you a very good base
So what I need help with, is how do I remove the newline after a <li> and or <ul>
This is my css:
#ranks li {
background: url(/img.png) no-repeat top left;
}
#ranks .sprite-admin{ background-position: 0 0; width: 157px; height: 44px; }
#ranks .sprite-banned{ background-position: -207px 0; width: 157px; height: 44px; }
and this is the html:
<ul id="ranks"><li class="sprite-admin"></li></ul>
It all works well while only one of the <ul id ="etc"> is there, but if there are multiple, it will make a new line and 'stack' them.. is it possible to make them not stack, and just go left to right?
Thanks
EDIT:
Demo : /removed/
You have a few options:
#ranks li {
float: left;
}
This will float all of your list items to the left, without wrapping, until horizontal screen space is no longer available. Alternatively,
#ranks li {
display: inline-block;
}
Which will also put your elements side-by-side, but handle them as bock level elements. If you don't care about block-level styling, you could go with straight inline-display:
#ranks li {
display: inline;
}
Which will treat the list items like any other inline element (such as <span> or <a>).
There are some other inherent styles that exist on list items, as well as their list parent, that you may need to do away with. Be sure to check out margin, and padding.
Demo: http://jsbin.com/iconud/edit#html,live
Look Out Ahead!
You may find that there is an unsightly gap between your list items when they're positioned side-by-side. This is a common problem with inline-lists. One solution is to remove the newline space between closing and opening list item tags:
<ul id="ranks"><li>
Index</li><li>
Contact</li><li>
Portfolio</li>
</ul>
Or have them all inline, a little less discernible:
<ul id="ranks">
<li>Index</li><li>Contact</li><li>Portfolio</li>
</ul>
This is a little tough on the eyes. With HTML, since closing tags aren't always required, you can also leave off the closing tag (though this makes me a bit nervous):
<ul id="ranks">
<li>Index
<li>Contact
<li>Portfolio
</ul>
Multiple Lists Inline Too!
From some of the OP's comments, it appears they might be trying to get not only list items inline, but lists themselves. If that's the case, apply the same aforementioned rules to the lists themselves:
#ranks,
#specs {
margin: 0;
padding: 0;
display: inline-block;
}
#ranks li,
#specs li {
display: inline-block;
border: 1px solid #CCC;
padding: 5px 10px;
}
Here were have identified two sets of rules using selectors that search for id's, and then tags. You could simplify this by apply a common class to the lists, or by basing the selectors off of a common parent element. Next is the markup:
<ul id="ranks">
<li>Index</li>
<li>Contact</li>
<li>Portfolio</li>
</ul>
<ul id="specs">
<li>Foo</li>
<li>Bar</li>
</ul>
This results in both lists, and their items, being displayed in a horizontal fashion.
Demo: http://jsbin.com/iconud/2/edit
with some css
<style type="text/css">
#ranks li { display:block; float:left; }
</style>
updated as comments: with display:block
ul li{ display:inline;} do the trick?
<li> by default is display:block;
if you give it display:inline; or diplay:inline-block; that should remove the linebreak
This is a basic example of horizontal UL's
HTML
<ul id="list">
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
<span class="clearFloats">
CSS
.item {
float: left;
}
.clearFloats {
clear: both;
}
JSFiddle Example: http://jsfiddle.net/peterf/DEUBf/
Another option is to set font-size: 0 in the ul, then restore the desired font-size in the li tags. I prefer this as it's contained within the ul tag, doesn't need further hacks like clear:both, and explains better what the styling is meant to do (hide anything not inside a list item).
ul {
list-style-type: none;
font-size: 0;
}
li {
display: inline-block; /* Or inline, as you like */
font-size: 16px;
}
I am trying to center my navigation links inside the div but no matter what I've tried it won't work. I've tried margin-left:auto, margin-right:auto, but nothing...
Here is the section of CSS code:
#nav {
display:block;
background-color:#505050;
height:17.5px;
box-shadow: 0px 0px 15px 5px #CCCCCC inset;
border:1px solid #EEEEEE;
border-radius:20px;
padding:1.5%;
}
#nav li {
padding:0px 20px 0px 20px;
display:inline;
/*float:left;*/
list-style:none;
position:relative;
}
#nav li a {
padding:0px 0px 20px 0px;
color:#FFFFFF;
text-decoration:none;
}
and here is my ul code:
<ul id="nav">
<li>Home</li>
<li>About Us</li>
<li>Current Litters</li>
<li>Gallery
<ul>
<li>Bandi</li>
<li>Studs Used</li>
<li>Test Dog2</li>
<li>Test Dog3</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
Here is the rest of my code
actually without it i noticed that my drop down menu under (gallery) doesn't display correctly, ...here is the rest of that css file...that shows what happens to the drop down...maybe you can tell me why the float screws it all up...
...and the text align did great....but only after removing the float...
#nav li a:hover {
text-decoration:underline;
}
#nav li ul{
padding:10px;
font-size:medium;
display:none;
position:absolute;
left:0px;
top:30px;
background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
display:block;
border-radius:20px;
border:1px solid;
width:150px;
}
This is actually quite simple, since your list items are display:inline. Add this style:
#nav {
text-align:center;
}
Demo: http://jsfiddle.net/fH6f5/
There are many other ways to do it, but this appears to be all you need. Just make sure not to float the <li>s (I see you have it commented out).
Adding text-align: center to the nav unordered list seems to work for me in chrome
#nav {
text-align: center;
}
To center a block element, you also need to explicitly set the width to some value, like this:
#nav {
width: 50%;
margin: 0 auto;
}
There are quite a few changes you're going to need to make to your code in order for it to display properly. Your list elements are currently inline elements. inline elements have a lot of restrictions, including not being able to explicitly set their width, height, and their top and bottom margin. Keep in mind that per the W3 spec:
Generally, inline elements may contain only data and other inline elements.
That being said, you can use display: inline-block with no problems for your current code. There is one very important thing to keep in mind about using inline-block elements: whitespace. Any space between inline-block elements in your code will be shown as a space on your browser. So, if you want the elements to be touching, their tags must be touching also:
<!-- Version A: This will produce a gap between the two elements -->
<li>Home</li>
<li>About Us</li>
<!-- Version B: This will not produce a gap between the two elements -->
<li>
Home
</li><li>
About Us
</li>
If you choose Version A from the code above, I'd recommend you float the elements rather than relying on inline-block for positioning. Centering a floated list is a bit more difficult than centering an inline list. Here's a way that I like to center floated elements:
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
</ul>
</nav>
CSS:
nav { overflow: hidden; }
nav ul {
position: relative;
float: left;
left: 50%;
list-style: none;
padding: 0; }
nav ul li {
position: relative;
float: left;
right: 50%;
margin: 0 5px; }
nav ul li a { display: block; }
Preview: http://jsfiddle.net/Wexcode/rsDbY/
You should post the design that you want for your dropdown menu, I don't really know what you want your final result to look like so I can't really help you with that.
You need to set a fixed width on your ul for margin-right:auto and margin-left:auto
Have you tried to add margin: 0 auto; to #nav style? You also have to set the ul width to get this working.
It's a bit more complicated then simply "text-align" as you have the text inside of a . You need to add "margin: 0px auto;" to your element in your css file. This will then center the divider on the screen first, then center the next element within the divider and so on.