- Postagens: 5
- Obrigados Recebidos: 0
Menu Horizontal (top) com bordas arredondadas?
14 anos 5 meses atrás #47180
por Clebson
Clebson created the topic: Menu Horizontal (top) com bordas arredondadas?
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:
o que consegui:
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:
html:css:
Desde já agradeço...
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:
o que consegui:
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:
<div class="moduletable_menu">
<h3>Main Menu</h3>
<ul class="menu">
<li><!-- various menu items --></li>
</ul>
</div>html:
<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>#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...