Search code examples
htmlcssmenualignmentinline

Trying a inline menu


im trying to make a simple menu, with 5 lines horizontally aligned, using CSS.

This is my base code: http://jsfiddle.net/LVCkp/

HTML

<div class="container clearfix">
    <!-- Conteúdo -->
    <div id="menu">
        <!-- Menu da página -->
        <div class="nav">
            <ul>
                <li><a href="#main">Principal</a>

                </li>
                <li><a href="#corte">Cortes</a>

                </li>
                <li><a href="#equipa">Equipa</a>

                </li>
                <li><a href="#sobre">Sobre Nós</a>

                </li>
                <li><a href="#contacto">Contatos</a>

                </li>
            </ul>
        </div>
        <!-- Fim class nav -->
    </div>
    <!-- Fim ID menu -->

CSS

    body{
    width: 100%;
    display: block;
    margin: 0 auto;
}

body {
    width: 100%;
    display: block;
    margin: 0 auto;
}

.container {
    width: 1024px;
}

a {
    text-decoration: none;
}

#menu{
    background-color: #000000;
    position: fixed;
    width: 100%;
    height: 100px;
    line-height: 5px;
    font-weight: bold;
    font-size: 12px;
}

#menu ul{
        margin-top: 50px;
}

#menu li {
    text-decoration: none;
    list-style: none;
    padding: 5px 10px 50px 10px;
    display: inline;
}
#menu li a:hover {
    background-color: green;
    padding: 50px 15px 5px 15px;
    color: black;
}
#menu a {
    color: white;
    text-transform: uppercase;
}

Problems: I can't center the menu links and I can't get them on the middle (horizontal align) of the black bar.

Can someone help?

EDIT: I manage to make it better but the problem is: I cant separate the menu links, so they dont move when we have mouse over


Solution

  • http://jsfiddle.net/LVCkp/3/ I used fixed margins to achieve the position.

    #menu ul{
    
        line-height: 5px;
        font-weight: bold;
        font-size: 12px;
        margin-top: 70px;
        margin-left: 70px;
    }