menu horizontal com separador | <<

[~Thiago Lara 0]

Pessoal,

tou engatinhando no CSS ainda e tenho que fazer um menu na horizontal com separador, tipo assim:

 

Uploaded with ImageShack.us

 

Obviamente entre esses espaços teria os escritos dos menus, de certa forma já consegui fazer o MENU com o seguinte códido:

 

#menu ul {
	padding:10px;
	width: 970px;
}
#menu ul li { display: inline; list-style:none;}

#menu ul li a {
	padding: 2px 20px;
	float:left;
        font: 16px Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica ;
	color:#565656;
	text-decoration: none;
}

#menu ul li a:hover {
        background-color:#D6D6D6;
}

Só que não sei como por os separadores e colocar ele no tamanho certo, olhem só meu resultado: http://www.reginaldolopes.com.br/v2/

 

Gostaria se possível me ajudem a colocar o separador e arrumar o tamanho do menu direitinho, pq quando coloca o mouse em cima não está preenchendo toda sua área...

 

Abs!!! vlw

[Thiago Retondar 18]

Não utilize display: inline para deixar o menu em uma única linha. Use float e margin (para espaçamento). Tente algo assim:

 

#menu ul {
        padding:10px;
        width: 970px;
        list-style: none;
}
#menu ul li {
        float: left;
        margin: 0 10px;
        background: url(separator.jpg) no-repeat 0% 100%;
}

#menu ul li a {
        padding: 2px 20px;
        float:left;
        font: 16px Trebuchet MS,Sans-Serif, Verdana, Arial, Helvetica ;
        color:#565656;
        text-decoration: none;
        display: block;
}

#menu ul li a:hover {
        background-color:#D6D6D6;
}

Para o último botão você pode definir uma classe e estilizar ela no CSS para que não tenha background.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[~Thiago Lara 0]

Opa,

fiz exatamente como sugeriu, daí da uma olhada o texto não ficou alinhado ao centro conforme esperado, acho que é por causa do padding... e aí tem alguma sugestão para que eu possa consertar?

 

Outro detalhe o sparador não ficou alinhado no topo =/

 

segue o link: http://www.reginaldolopes.com.br/v2/

[Evandro Oliveira 331]

#menu ul {
    padding: 0;
    margin: 0;
    text-align: default;
    height: 52px;
}

#menu ul li {
    background-position: right center;
    padding: 0 5px 0 0;
    height: 52px;
    margin: 0;
    width: 16%;
}

#menu ul li a {
    line-height: 52px;
    float: none;
    text-align: center;
}

Atenção:

 

O código acima é apenas para substituir os valores incorretos. Sobrescreva a estilização atual aplicando estes valores às propriedades que já estiverem definidas.

Valores padrão como padding: 0, margin: 0, float: none também valem para caso você exclua a regra. Eles foram definidos apenas com o propósito de sobreposição.

[~Thiago Lara 0]

Caramba, esse menu não funciona de jeito nenhum!!!

já tentei de tudo..

e continua com esse pau de não alinhar o texto ao meio, alguém tem alguma ideia?

[Evandro Oliveira 331]

pelo menos na versão que você disponibilizou online, eu não vi modificações no arquivo .css

[~Thiago Lara 0]

Opa, foi mal, tinha testado apenas localmente,

segue o link:

 

http://www.reginaldolopes.com.br/v2/

[Evandro Oliveira 331]

Ao meu ver está centralizado. O que falta?

 

tente aplicar isso aqui:

#menu { font-size: 0.8em; }

Vai fazer o 'Atuação Parlamentar' ocupar uma linha apenas

[Paulo Andraus 0]

Pessoal, a minha dúvida é semelhante e por isso resolvi postar aqui nesse tópico.

Caso não consiga alguma opinião/ajuda, aí crio outro tópico ou mando mensagem para os envolvidos nesse.

 

Tenho um Menu em lista, e quero que antes de cada botão do menu haja um separador, colocando list-style-image:url

Pretendo também usar o first-child, para que o primeiro "li" não tenha separador (faz sentido para mim).

 

O CSS do meu Menu:

#menu {
	background: url(images/menu.jpg) repeat-x;
	height:31px;
	font-size:12pt;
	color:#606060;
	float:left;
	margin: 0 0 0 26px;
}
	
#menu ul li{
	float:left;
	padding:0 27px 0 0;
	list-style-image:url(images/entremenus.png) no-repeat;}

#menu ul li:firstchild {}

#menu ul li a{
	text-decoration:none;
	color:#000;
	font-size:12px;
	display:block;}

E o código HTML (caso seja preciso):

 <div id="menu">
     <ul>
      <li><a href="#">A Empresa</a></li>
      <li><a href="#">Segmentos de Atuação</a></li>
      <li><a href="#">Projetos em Operação</a></li>
      <li><a href="#">Projetos Realizados</a></li>
      <li><a href="#">Clientes</a></li>
      <li><a href="#">Notícias </a></li>
      <li><a href="#">Responsabilidade Social</a></li>
     </ul>
    </div> <!-- Fim id Menu-->

Se alguém se dispuser a ajudar, desde já agradeço!

 

Pessoal, como de praxe, depois de uma pesquisada em outros layouts que fiz e , achei uma solução.

 

Criei uma classe "menu" no UL e essa classe tem a imagem do espaçador que eu queria.

 

<div id="menu">
     <ul class="menu">
      <li><a href="#">A Empresa</a></li>
      <li><a href="#">Segmentos de Atuação</a></li>
      <li><a href="#">Projetos em Operação</a></li>
      <li><a href="#">Projetos Realizados</a></li>
      <li><a href="#">Clientes</a></li>
      <li><a href="#">Notícias </a></li>
      <li><a href="#">Responsabilidade Social</a></li>
     </ul>
    </div> <!-- Fim id Menu-->

.menu {
	list-style-image:url(images/entremenus.png);}

#menu {
	background: url(images/menu.jpg) repeat-x;
	height:31px;
	font-size:12pt;
	color:#606060;
	float:left;
	margin:0 0 0 26px;
}

#menu ul li{
	float:left;
	padding:0 27px 0 0;
}

#menu ul li:firstchild {
	list-style-type:none;}

#menu ul li a{
	text-decoration:none;
	color:#000;
	font-size:12px;}

Criei essa classe com o separador que eu queria. Porém, o FirstChild não tá funcionando... Alguém tem alguma dica quanto ao uso desse seletor?

 

Agradeço novamente!

[Bruno Said 0]

O ":first-child" está escrito de forma errada por isso não está funcionando.

Só lembrando que este pseudo-seletor não irá funcionar no IE6... Mas isso é apenas um mero detalhe.