CODEWITHSUNDEEP
htmlcss
BigJobbies
BigJobbies

Reputation: 4033

HTML / CSS - Center align a UL navigation menu

Im trying to centre align a image based navigation menu, i have read a few different posts, but none of them seem to be working.

My HTML is as follows:

<ul id="nav">
    <li id="films"><a href="#">Films</a></li>
    <li id="music"><a href="#">Music</a></li>
    <li id="contact"><a href="#">Contact</a></li>
    <br class="clear">
</ul>

and my CSS is as follows:

#nav {
    width: 566px;
    list-style: none;
    margin: 0;
    padding: 0;
    margin: 0 auto;
}
#nav li {
    float: left;
    margin: 0 10px;
}
#nav li a {
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    height: 16px;
}

#nav li#films a {
    background: url(images/FILMS.png) no-repeat;
    width: 59px;
}
#nav li#music a {
    background: url(images/MUSIC.png) no-repeat;
    width: 70px;
}
#nav li#contact a {
    background: url(images/CONTACT.png) no-repeat;
    width: 107px;
}
.clear {
    clear: both;
}

Any help would be greatly appreciated.

Thank you

Upvotes: 1

Views: 108

Answers (2)

misterManSam
misterManSam

Reputation: 24692

li a needs to be display: block or inline-block to remove the text with text-indent: -9999px;.

The display: inline-block on #nav li places each link next to each other.

Have a fiddle!

HTML

<ul id="nav">
    <li id="films"><a href="#">Films</a>

    </li>
    <li id="music"><a href="#">Music</a>

    </li>
    <li id="contact"><a href="#">Contact</a>

    </li>
</ul>

CSS

#nav {
    width: 306px;
    /* Wide enough for all links */
    list-style: none;
    padding: 0;
    margin: 0 auto;
    text-align: center;
}
#nav li {
    margin: 0 10px;
    display: inline-block;
}
#nav li a {
    text-indent: -9999px;
    display: block;
    height: 16px;
}
#nav li#films a {
    background: url(http://www.placehold.it/59X16) no-repeat;
    width: 59px;
}
#nav li#music a {
    background: url(http://www.placehold.it/70X16) no-repeat;
    width: 70px;
}
#nav li#contact a {
    background: url(http://www.placehold.it/107X16) no-repeat;
    width: 107px;
}

Upvotes: 2

imbondbaby
imbondbaby

Reputation: 6411

Change to this:

#nav {
    width: 566px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    text-align: center;
}
#nav li {
    margin: 0 10px;
    display: inline-block;
}
#nav li a {
    text-indent: -9999px;
    overflow: hidden;
    height: 16px;
}

JSFiddle

Upvotes: 1

Related Questions