Ir para conteúdo
Fórum Script Brasil
  • 0

Menu Css


Super_Zica_Man

Pergunta

4 respostass a esta questão

Posts Recomendados

  • 0

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?

Link para o comentário
Compartilhar em outros sites

  • 0

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>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...