Menu Css

Super_Zica_Man · Dezembro 13, 2006

Gostaria de saber como faço pra por uma imagem como divisória dos links.

E como dexar o texto alinhado no canto direito e uma imagem no canto esquerdo?(teria que usar span)?

Super_Zica_Man · Dezembro 16, 2006

Tipo no site:

www.toymania.com.br

1.No menu existe uma imagem (menu-pontilhado.gif) como divisão entre os links, mas esse menu é feito em css.Gostaria de saber se teria como fazê-lo em listas?

2.Outros sites usam nessa divisão uma borda mas em qual elemento devo usa-la?E não teria como por imagem como borda?

.Andreia. · Dezembro 16, 2006

Se voce olhar no codigo fonte da pagina vai descobrir que isso é uma tag simples de <img> com a figura dos pontilhados

Super_Zica_Man · Dezembro 16, 2006

Fazendo isso o menu ficou assim:

http://img00.mh2img.net/67menu.JPG

Obs:Não é o menu inteiro

1.Como faço pra diminuir a distancia das linhas para a imagem parecer um sublnhado?

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">    
#menu {
width: 170px;
background-color: #999999;
padding: 5px;
}

#menu ul {
width: 160px;
background-color: #000066;
margin: 0;
padding: 6px;
}

#menu li {
background-color: #000066;
list-style-type: none;
text-align:left;
display: block;
}

#menu li a {
margin-left:25px;
text-decoration:none;
font-family: Verdana;
font-size:10px;
color:#FFF;
}

#menu li a:hover {
text-decoration:none;
font-family:Verdana;
font-size:10px;
color: #CCCCCC;
}

#menu .titulo {
text-decoration:none;
font-family: Verdana;
font-size:10px;
color: #FFFFFF;
font-weight: bold;
text-transform:uppercase;
text-align:center;
}

.linha {
padding: 0;
}
</style>
</head>

<body>
<div id="menu"> 
<ul>
<li class="titulo">Produtos</li>
<li>
<a href="">› Acessórios</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Caixas de Som</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Computadores</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Discos-Rigídos - HD</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Drives de CD</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Drives de Disquete</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Estabilizadores</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Fontes</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Gravadores de CD/DVD</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Impressoras</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Memórias</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Mídias Virgens</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Monitores</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Mouses</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› No-breaks</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Notebooks</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Placas de Video</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Placas Mãe</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Processadores</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Programas e Softwares</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Teclados</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Webcams</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li></li>
<li class="titulo">Ajuda</li>
<li>
<a href="">› Como Comprar</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Assistência Técnica</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Segurança</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
<li>
<a href="">› Perguntas Freqüentes</a></li>
<li>
  <img src="../Menu/menu-pontilhado.gif" width="139" height="1" /></li>
</ul>
</div>
</body>
</html>

svjets · Dezembro 17, 2006

Diminua a altura do pontilhado a máximo possível. Use margin negativa:

menu li{

margin:-2px auto -2px auto;

}

Entrar

Menu Css

Pergunta

Super_Zica_Man

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

Super_Zica_Man

Link para o comentário

Compartilhar em outros sites

.Andreia.

Link para o comentário

Compartilhar em outros sites

Super_Zica_Man

Link para o comentário

Compartilhar em outros sites

svjets

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades