[Resolvido] Menu Horizontal CSS com divisores

[Diego Macêdo 6]

Como eu faço pra em um menu horizontal eu inserir uma imagem que é uma tracinho vertical centralizado em relação a altura do <li>?

 

Por exemplo:

<ul id="menu_horizontal">
  <li><img src="divisor.gif"></li>
  <li>Home</li>
  <li><img src="divisor.gif"></li>
  <li>Quem Somos</li>
  <li><img src="divisor.gif"></li>
  <li>Anuncie Aqui</li>
  <li><img src="divisor.gif"></li>
  <li>Contato</li>
</ul>

Quando eu insiro a imagem "divisor.gif" essa imagem fica colada no topo.

 

Quero que fique assim:

 

PS.: Texto em laranja é o a:hover

 

Agradeço desde já a ajuda de todos.

[Thiago Retondar 18]

Você pode fazer assim:

 

HTML

<ul id="menu">
<li class="separator"><a href="#">Link</a></li>
<li class="separator"><a href="#">Link</a></li>
<li class="separator"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

CSS

ul#menu{
	width: 800px;
	height: 25px;
	background: black;
	list-style: none;	
}
ul#menu li{
	float: left;
	padding: 0 25px;
}
ul#menu li.separator{
	background: url(http://www.thiagotestes.site90.com/images/tab-hr.png) no-repeat right;
}
ul#menu li a{
	color: white;	
}

Não haveria necessidade de usar as classes, mas fiz isso por questões de browsers mais antigos. ;)

 

O segredo está no no-repeat right. :D

 

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

[Claudiobrother 2]

Só para ter mais uma alternativa no caso de não querer usar imagem.

Desse modo é só alterar o estilo do separador (font:bold 12px Verdana, Arial, Helvetica; color:#fff;).

 

<ul id="menu_horizontal">  
   <li>
      <span>|</span>
      <a href="#">Home</a>
   </li>
   <li>
      <span>|</span>
      <a href="#">Quem somos</a>
   </li>
   <li>
      <span>|</span>
      <a href="#">Anuncie aqui</a>
   </li>
</ul>

Espero que tenha sido válida a minha dica!

[William Bruno 1501]

Eu costumo fazer ao contrário ^_^

<ul id="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="sem-background"><a href="#">Link</a></li>
</ul>

[Diego Macêdo 6]

Prefiro o método dado pelo William Bruno e utilizar no CSS uma borda somente na lateral, pois acho que segue mais os padrões e fica com um código mais limpo.

 

Veja o exemplo abaixo que eu fiz:

(HTML)
<ul id="rodape_menu">
 <li><a href="contato.php">fale conosco</a></li>
 <li><a href="contato.php">trabalhe conosco</a></li>
 <li><a href="contato.php">contrate-nos</a></li>
 <li><a href="contato.php">abra sua franquia</a></li>
 <li><a href="contato.php">anuncie no site</a></li>
</ul>

(CSS)
#rodape_menu {
	padding:0 0 0 10px;
	margin-top:10px;
	text-align:left;
}

#rodape_menu li {
	list-style: none; 
	padding: 0px 8px 0px 0;
	border-right:1px #FFF solid;
	display: inline;
	vertical-align:middle;
}

#rodape_menu li a {
	text-decoration: none;
	font-family:Verdana, Geneva, sans-serif;
	color:#FFF;
}

#rodape_menu li a:hover {
	text-decoration: underline;
}

Agora alguem poderia me explicar o porque de alguns códigos as pessoas botam a tag <span>? Qual seria o objetivo dela? Quais funções ela exerce?

[Thiago Retondar 18]

No código que você colocou vai ter um separador até depois do último botão. Use uma das soluções acima para resolver isso.

 

O span que usaram é a mesma coisa que o seu border-right. ;)

 

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