Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal,
Fiz o menu do meu site com uma lista ordenada, porém alterei a list-style-image e coloquei uma imagem personalizada, que é a logo do cliente. Essa imagem/logo lembra um X. O problema é que ao colocar esse X os nomes dos itens de menu ficaram na parte inferior da imagem, ou seja, ficaram alinhada/niveladas com as pernas desse X, só que eu quero que fique centralizada, eu quero a imagem no canto, como marcador dessa lista, e o nome do item do menu na frente desse marcadaor personalizado (o X), mas centralizado no meio desse X. Só que não consigo fazer isso.
Alguém pode me ajudar? Deu pra entender?
Meus códigos:
HTML MENU
<div id="menu">
<ul>
<li id="item1">Principal</li>
<li id="item2">Quem Somos</li>
<li id="item3">Advogados Associados</li>
<li id="item4">Áreas de Atuação</li>
<li id="item5">Notícias</li>
<li id="item6">Links Úteis</li>
<li id="item7">Contato</li>
</ul>
</div>CSS
#menu ul{
font-family: Tahoma;
font-size: 13px;
font-weight: bold;
list-style-image: url("../imagens/icone_menu.png");
}#menu ul li{
margin: .6em 0em .6em 0em;
}Você pode dar uma lida sobre background-position acessando aqui: http://maujor.com/tutorial/backtut.php
Se tiver alguma dúvida só postar.
O background-position não alterou nada aqui.
Como e onde posso usar esse background-image? Dentro da ul mesmo, ao inves de list-style-image colocaria o background-image, é isso/
Teria como me mostrar algum exemplo?
Desde ja agradeço
Retire o list-style-image e trabalhe com o background no li
Olá Jeferson,
Use desta forma:
#menu ul{
font-family: Tahoma;
font-size: 13px;
font-weight: bold;
}#menu ul li{
background:url("../imagens/icone_menu.png") no-repeat 0 0;
margin: .6em 0em .6em 0em;
}podes ainda configurar o hover:
#menu ul li#item1:hover{background-position: -100px -20px;}
#menu ul li#item2:hover{background-position: -100px -40px;}
Claro que para isso a sua imagem deve ser de todo o menu....
Diria pra você ler algo sobre css sprites.
Até mais
Leandro
Leandro,
Muito obrigado pela ajuda.
Fiz algumas das coisas que falou, mas não ficou legal. Olha só http://www.kmbc.adv.br/teste2/
Não estou conseguindo aumentar a altura desses itens do menu para que apareça a imagem toda que quero, Tambem não estou conseguindo trazer a imagem do menu mais para a esquerda.
Voce falou alguma coisa de ter uma imagem para todo o menu, eu tenho que fazer uma imagem só com todas essas imagens menores que quero no menu, é isso?
Tambem não consigo tirar os marcadores (bolinhas) da lista.
CSS
#menu ul{
font-family: Tahoma;
font-size: 13px;
font-weight: bold;
list-style-image: none;
}#menu ul li{
background: url("../imagens/icone_menu.png") no-repeat 0 0;
margin: .6em 0em .6em 0em;
}#menu ul li#item1, #menu ul li#item7{
background-position: 0 -20px;
margin-left: 30px;
}#menu ul li#item2, #menu ul li#item6{
background-position: 0 -20px;
margin-left: 40px;
}#menu ul li#item3, #menu ul li#item5{
background-position: 0 -20px;
margin-left: 50px;
}#menu ul li#item4{
background-position: 0 -20px;
margin-left: 60px;
}Tambem não estou conseguindo trazer a imagem do menu mais para a esquerda.
#menu ul li{
background:url("../imagens/icone_menu.png") no-repeat left center;
...
...
}Apenas uma imagem pequena. Somente isso.
>
Tambem não estou conseguindo trazer a imagem do menu mais para a esquerda.
Voce falou alguma coisa de ter uma imagem para todo o menu, eu tenho que fazer uma imagem só com todas essas imagens menores que quero no menu, é isso?
Post#5: Retire o list-style-image
>
Tambem não consigo tirar os marcadores (bolinhas) da lista.
Se tiver mais dúvida, leia estes links, eles resolvem o seu problema: A propriedade background e A propriedade list
Para retirar os marcadores :
#menu ul{
list-style:none;
}Para aumentar a altura do itens:
#menu ul li{
height:30px;
}O que você quer realmente fazer com o logo nao consegui entender, manda uma imagem pra galera
ver.
Eu quero que a logo se torne o marcador da lista, porem de forma centralizada ao texto, ou seja, eu quero que uma imagem pequena da logo fique no inicio de cada item do menu, como se fosse uma bolinha das listas, porém o item do menu(texto) tem que ficar na frente e no centro dessa logo.
Entendeu?
Pra voces entenderem melhor, da uma olhada, por favor, nessa imagem. Eu quero que o menu do site fique assim. Não queria fazer esse menu com uma imagem, contendo texto e a logo, pra cada item de menu. Queria apenas alterar a imagem da lista e o nome dos menus serem textos normais.
Agora ficou mais facil.
Tenho um menu aqui parecido com esse.
no CSS testa assim:
#image_menu1 {background:url('images/sua-image.xxx') no-repeat left center;
#t_menu1{margin-left:-2px;margin-top:22.5px;border:none;}
Aí você ajeita de acordo com o que voce quer.
No HTML:
<ul>
<li id="image_menu1"><a href="#"><span id="t_menu1">Principal</span></a></li>
<li>....</li>
<li>....</li>
<li>....</li>
</ul>Funcionando você completa a sua lista e vai colocando as medidas.
Menos código:
#menu ul li{
background:url("../imagens/icone_menu.png") no-repeat left center;
height:XXpx; --> altura que você define
padding-left: XXpx; --> a largura da imagem e mais algum espacinho pro texto não ficar grudado na imagem
}Depois fica simples:
<ul>
<li><a href="#">Texto</a></li>
<li>...</li>
<li>...</li>
</ul>Você poderia colocar a imageno no li a também.
Fiz o que voce falou e olha como ficou: link
Meu HTML:
<div id="menu">
<ul>
<li id="img_item1"><span id="item_menu1">Principal</span></li>
<li id="img_item2"><span id="item_menu2">Quem Somos</span></li>
<li id="img_item3"><span id="item_menu3">Advogados Associados</span></li>
<li id="img_item4"><span id="item_menu4">Áreas de Atuação</span></li>
<li id="img_item5"><span id="item_menu5">Notícias</span></li>
<li id="img_item6"><span id="item_menu6">Links Úteis</span></li>
<li id="img_item7"><span id="item_menu7">Contato</span></li>
</ul>
</div>CSS:
#menu ul{
font-family: Tahoma;
font-size: 13px;
font-weight: bold;
list-style-image: none;
list-style-type: none;
}#menu ul li{
height: 55px;
width: 33px;
}#menu ul li#img_item1, #menu ul li#img_item7{
background: url("../imagens/icone_menu.png") no-repeat left center;
background-position: -10px -20px;
}#menu #item_menu1{
margin-left: 20px;
margin-top: 0px;
border: none;
}Agora você tenta aumentar altura
Ex:
ul li{ border:1px red solid;
/aumente aqui/
height: 55px;
width: 33px;
}Observe também a dica que o Giovani deu (que por sinal muito boa).
Sempre que possível diminua a quantidade de código.
Consegui resolver o problema da exibição da imagem utilizada na lista, antes estava cortada. Porém, agora não consigo alinhar o texto na frente dessas imagens (logo pequena), o texto está ficando no topo e não consigo alterar o margin-top nem o top. Altero essas duas propriedades e nada acontece. Eh mole?
CSS:
#menu ul{
font-family: Tahoma;
font-size: 13px;
font-weight: bold;
list-style-image: none;
list-style-type: none;
width: 170px;
}#menu ul li{
background: url("../imagens/icone_menu.png") no-repeat left center;
background-position: center center;
height: 55px;
width: 0px;
padding-left: 33px;
margin: 20px 0 20px 0;
}#menu ul li#img_item1, #menu ul li#img_item7{
margin-left: 0px;
}#menu ul li#img_item2, #menu ul li#img_item6{
margin-left: 20px;
}#menu ul li#img_item3, #menu ul li#img_item5{
margin-left: 40px;
}#menu ul li#img_item4{
margin-left: 60px;
}#menu #item_menu1{
margin-left: 5px;
margin-top: 10px;
text-decoration: none;
color: #000;
}HTML:
<div id="menu">
<ul>
<li id="img_item1"><span id="item_menu1">Principal</span></li>
<!--<li id="img_item1"><a href="#" id="item_menu1">Principal</a></li>-->
<li id="img_item2"><span id="item_menu2">Quem Somos</span></li>
<li id="img_item3"><span id="item_menu3">Advogados Associados</span></li>
<li id="img_item4"><span id="item_menu4">Áreas de Atuação</span></li>
<li id="img_item5"><span id="item_menu5">Notícias</span></li>
<li id="img_item6"><span id="item_menu6">Links Úteis</span></li>
<li id="img_item7"><span id="item_menu7">Contato</span></li>
</ul>
</div>Nem sei com agradecer a ajuda que estao me dando
Testa assim então:
#menu ul li{
background: url("../imagens/icone_menu.png") no-repeat left center;
background-position: center center;
height: 55px;
width: 0px;
padding: 15px 0 0 33px
margin: 20px 0 20px 0;
}Da uma lida aqui pra você entender melhor sobre a propriedade padding:
Se não der é possível fazer assim:
#item_menu2{position:relative;top:15px;}
Mas não tenho certeza se esse ultimo é standard (ficou com uma cara da gambiarra ).
Coloquei a linha que voce falou, mas não resolveu muito.
Quando tem duas linhas no menu (nome duplo) fica um pouco mais no centro, mas quando é uma palavra só (tipo Principal), não muda nada.
Acho que vou desistir e fazer tudo com imagem mesmo, uma imagem com a logo e com o texto tambem.
CSS Completo:
body{
font-family: Tahoma;
background: url("../imagens/fundo.png");
margin-top: 0px;
/* background: #84C3EB;*/
}
#principal{
margin: auto;
width: 995px;
height: 1100px;
}
#topo{
margin: auto;
width: 989px;
height: 262px;
background: url("../imagens/topo.png");
}#topo #logo{
position: relative;
top: 60px;
margin-left: auto;
margin-right: auto;
width: 246px;
height: 103px;
background: #FFF;
background: url("../imagens/logo.png");
}/*#marca_dagua {
margin-top: 0px;
width: 158px;
height: 1041px;
background: url("../imagens/marca_dagua.png");}*/
#conteudo{
margin: auto;
width: 989px;
height: 663px;
background: url("../imagens/fundo_branco.png") no-repeat;
}
#menu{
position: absolute;
top: 325px;
width: 210px;
height: auto;
}#menu ul{
font-family: Tahoma;
font-size: 13px;
font-weight: bold;
list-style-image: none;
list-style-type: none;
width: 170px;
}#menu ul li{
background: url("../imagens/icone_menu.png") no-repeat left center;
background-position: center center;
height: 60px;
width: 0px;
padding: 15px 0 0 33px;
margin: 20px 0 20px 0;
}#menu ul li#img_item1, #menu ul li#img_item7{
margin-left: 0px;
}#menu ul li#img_item2, #menu ul li#img_item6{
margin-left: 20px;
}#menu ul li#img_item3, #menu ul li#img_item5{
margin-left: 40px;
}#menu ul li#img_item4{
margin-left: 60px;
}#menu #item_menu1{
padding: 0 0 0 5px;
text-decoration: none;
color: #000;
}
#resumo_conteudo_1{
position: absolute;
top: 325px;
margin-left: 220px;
width: 359px;
height: 254px;
background: url("../imagens/retangulo.png") no-repeat;
}
#resumo_conteudo_2{
position: absolute;
top: 325px;
margin-left: 600px;
width: 359px;
height: 254px;
background: url("../imagens/retangulo.png") no-repeat;
}
#resumo_conteudo_3{
position: absolute;
top: 600px;
margin-left: 220px;
width: 359px;
height: 254px;
background: url("../imagens/retangulo.png") no-repeat;
}
#resumo_conteudo_4{
position: absolute;
top: 600px;
margin-left: 600px;
width: 359px;
height: 254px;
background: url("../imagens/retangulo.png") no-repeat;
}
#rodape{
margin-left: auto;
margin-right: auto;
margin-top: 80px;
width: 619px;
height: 78px;
background: url("../imagens/rodape.png");
}#rodape #rodape_info{
position: relative;
font-size: 16px;
color: #FFF;
text-align: center;
top: 12px;
}/******* FONTES *******/
p#titulo_resumo{
font-size: 16px;
font-weight: bold;
color: #FFF;
margin-top: 5px;
margin-left: 10px;
}p#resumo{
font-size: 14px;
color: #FFF;
text-align: justify;
margin-left: 10px;
margin-right: 10px;
}Utiliza então mais ou menos assim, ajeitando um por um.
O ruim é que aumenta o código.
#item_menu2{position:relative;top:15px;}
Com esse código eu consegui, não ficou 100%, mas já melhorou e muito e é assim que vai ficar.
#item_menu2{
position:relative;
top:15px;
}Agora só tem uma coisinha, que não consegui alterar e não sei como começou a ficar assim, alguns itens desse menu (texto) estão ficando em linhas separadas, olha só.
Em 'Areas de Atuação', queria que ficasse 'Areas de' em uma linha e 'Atuação' embaixo, em outra linha. Assim como 'Links uteis', queria que ficasse tudo em uma linha e não cada palavra em uma linha, como está agora.
O que posso alterar?
Valeu mesmo pela ajuda.
Isso é simples. Aumente a largura do item "Areas de atuação".
Coloquei 88px mas você muda conforme precisar. Coloquei uma borda pra ir verificando
a largura(depois você retira).
ul li{
height: 55px;
width: 88px;
/*borda para visualisar a largura*/
border:1px #333 solid;
}Acho que agora vai.
Agora foi, graças a Deus e a voces.
Muito obrigado.
Valeu.
Abraços.
use como background-image então você terá muito mais controle.
padding, e background-position, te ajudarão.