Menu Horizontal (top) com bordas arredondadas?

Discussões relativas ao desenvolvimento de templates para Joomla!
clebsonsantiago
Novato
Mensagens: 13
Registrado em: 09 Ago 2010, 11:30

Menu Horizontal (top) com bordas arredondadas?

Mensagem por clebsonsantiago »

Pessoal,

Estou com dificuldade na criação de um menu horizontal com bordas. A minha ideia é colocar cada tag <li> uma imagem no background ao lado esquerdo, na tag
<a href="#"> uma imagem no background centralizado no topo
idealizado:
Imagem

o que consegui:
Imagem

mas não existe ou pelo menos não conheço uma 3 tag que eu possa completar o menu. Vou postar aqui o que eu idealizei e o que eu consegui até agora. Além do css e html.

contando que eu usarei a tag de inserção <jdoc:include type="modules" name="top" /> que tem a seguinte estrutura:

Código: Selecionar todos

<div class="moduletable_menu">
  <h3>Main Menu</h3>
  <ul class="menu">
    <li><!-- various menu items --></li>
  </ul>
</div>
html:

Código: Selecionar todos

        <div id="top">
            <ul>
                <li><a href="#">Inicio</a></li>
                <li><a href="#">Agenda</a></li>
                <li><a href="#">Noticias</a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Patrocine</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
        </div>
css:

Código: Selecionar todos

#top {
    margin:0 0 0 20px;
    width:690px;
    height:50px;
    background:#ffffff;
#top ul {
    background:#000fff;
    height:80;
    list-style:none;
    text-align:right;
}

#top li {
    background:#00ff00 url(../images/menu_be.png) no-repeat;
    display:inline-block;
    line-height:50px;
    margin: 0 5px 0 5px;
    padding: 0 10px 0 10px;
    height:50px;
}

#top li a{
    background:#ffffff url(../images/menu_t.png) 100% 0 no-repeat;
    display:block;
    height: 50px;
    color:#000000;
    text-decoration:none;
    font:bold 1em/1.2;
}
Desde já agradeço...
Responder