CODEWITHSUNDEEP
htmlcss
elroyz
elroyz

Reputation: 113

Can't center nav menu and can't get separator line in between items

I'm having some trouble centering nav menu under everything else and also the separator line isn't sitting centered either between the two menu items.

CSS

    .center{
    width: 450px;
    height: 500px;
    /*margin: 0 auto;
    display: block;
    position:relative;*/
    position:absolute;
    left:50%;
    top:50%;
margin-left:-225px;
margin-top:-250px;}



#navbar {

    padding:0;
    margin-left: 0 auto;
    margin-right: 0 auto;}

#navbar li {
    float: left;
    list-style:none;
    width: 100px;}

#navbar a{
    text-decoration:none;
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    padding: 0;}

#navbar li + li {
    background: url('separator.gif') no-repeat top left;
}

Here is the http://jsfiddle.net/elroyz/GPgPF/

Upvotes: 1

Views: 165

Answers (2)

Pete
Pete

Reputation: 58462

Instead of floating your navbar li make them display:inline-block:

#navbar li {
    display:inline-block;
    list-style:none;
    width: 100px;
}

http://jsfiddle.net/GPgPF/3/

Upvotes: 1

henser
henser

Reputation: 3327

change you css to this:

#navbar {
    width: 100%;
    padding:0;
}

#navbar li {
    display:inline-block;
    list-style:none;
    width: 100px;
}

Upvotes: 1

Related Questions