[Resolvido] Centralizar texto dentro de uma lista

Jefferson NF · Junho 3, 2011

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;
}

William Bruno · Junho 3, 2011

use como background-image então você terá muito mais controle.

padding, e background-position, te ajudarão.

Alexandre_Cruz · Junho 3, 2011

Você pode dar uma lida sobre background-position acessando aqui: http://maujor.com/tutorial/backtut.php

Se tiver alguma dúvida só postar.

Jefferson NF · Junho 8, 2011

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

Giovani · Junho 8, 2011

Retire o list-style-image e trabalhe com o background no li

_Leandro_ · Junho 8, 2011

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;
}
#menu ul li#item1{background-position: 0 -20px;}
#menu ul li#item2{background-position: 0 -40px;}
#menu ul li#item3{background-position: 0 -60px;}
e assim por diante

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

http://www.maisumpixel.com.br

Jefferson NF · Junho 9, 2011

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;

}

Giovani · Junho 9, 2011

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

Marcos Xavier · Junho 9, 2011

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.

Jefferson NF · Junho 9, 2011

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.

Marcos Xavier · Junho 9, 2011

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.

Giovani · Junho 9, 2011

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.

Jefferson NF · Junho 9, 2011

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;

}

Marcos Xavier · Junho 9, 2011

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.

Jefferson NF · Junho 9, 2011

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>

Link - visualização

Nem sei com agradecer a ajuda que estao me dando

Marcos Xavier · Junho 10, 2011

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:

Link

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 ).

Jefferson NF · Junho 10, 2011

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.

Site

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;

}

Marcos Xavier · Junho 10, 2011

Utiliza então mais ou menos assim, ajeitando um por um.

O ruim é que aumenta o código.


#item_menu2{position:relative;top:15px;}

Jefferson NF · Junho 10, 2011

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.

Marcos Xavier · Junho 10, 2011

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.

Arquivado

[Resolvido] Centralizar texto dentro de uma lista

Recommended Posts

Jefferson NF 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alexandre_Cruz 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jefferson NF 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

_Leandro_ 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jefferson NF 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jefferson NF 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jefferson NF 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jefferson NF 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jefferson NF 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189

Compartilhar este post

Link para o post

Compartilhar em outros sites

Jefferson NF 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Marcos Xavier 189