Super_Zica_Man Postado Dezembro 13, 2006 Denunciar Share Postado 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)? Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Super_Zica_Man Postado Dezembro 16, 2006 Autor Denunciar Share Postado Dezembro 16, 2006 Tipo no site:www.toymania.com.br1.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? Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 .Andreia. Postado Dezembro 16, 2006 Denunciar Share Postado 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 Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 Super_Zica_Man Postado Dezembro 16, 2006 Autor Denunciar Share Postado Dezembro 16, 2006 Fazendo isso o menu ficou assim:http://img00.mh2img.net/67menu.JPGObs:Não é o menu inteiro1.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> Citar Link para o comentário Compartilhar em outros sites More sharing options...
0 svjets Postado Dezembro 17, 2006 Denunciar Share Postado Dezembro 17, 2006 Diminua a altura do pontilhado a máximo possível. Use margin negativa:menu li{ margin:-2px auto -2px auto;} Citar Link para o comentário Compartilhar em outros sites More sharing options...
Pergunta
Super_Zica_Man
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)?
Link para o comentário
Compartilhar em outros sites
4 respostass a esta questão
Posts Recomendados
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.