Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

VBBurba

Menu

Por , em Desenvolvimento frontend

Recommended Posts

VBBurba    0

VBBurba
Postado

Olá pessoal como que eu tiro as bolinhas desse menu com CSS, elas num saem de jeito nenhum :huh: http://www.zonacriativa.com/teste.htmlAbaixo segue o codigo:

<head><style><style type="text/css">#menubv {width: 12em;padding: 0;margin: 0;font: 14px Verdana, sans-serif;}#menubv ul {list-style: none;margin: 0;padding: 0;}#menubv li {border-bottom: 1px solid #f00;margin: 0;}#menubv li a {display: block;padding: 5px 5px 5px 0.5em;font-weight:bold;border-left: 10px solid #ffc0cb;border-right: 10px solid #fff5ee;background-color: #ffe4e1;color: #808000;text-decoration: none;}#menubv li a:hover {border-left: 10px solid #fcc;border-right: 10px solid #fff;background-color: #fff0f5;color: #ccc;}/* Fix IE. Hide from IE Mac \*/* html #menubv ul li { float: left; height: 1%; }* html #menubv ul li a { height: 1%; }/* End */</style></style></head><body><table width="160" border="0" cellspacing="0" cellpadding="0"> <tr> <td><ul id="menubv"> <li> <a href="#" title="Área de tutorial CSS">CSS Tutorial</a> </li> <li> <a href="#" title="Técnicas de layout com CSS">CSS Layout</a> </li> <li> <a href="#" title="Técnicas de efeitos em links">CSS Links</a> </li> <li> <a href="#" title="Construção de menus">CSS Menu</a> </li> <li> <a href="#" title="CSS para impressão">CSS Print</a> </li> <li> <a href="#" title="Importação de folhas de estilo">CSS @import</a> </li> <li> <a href="#" title="Fale conosco">Contato</a> </li></ul></td> </tr></table><br></body>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

É sempre recomendado colocar no início da sua css o seguinte:

 

* {list-style:none;margin: 0;padding: 0;}

[]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

pois eh, tem gent q ainda naum faz isso :P

Compartilhar este post

Link para o post
Compartilhar em outros sites

VBBurba    0

VBBurba
Postado

Só mais uma dúvida.Tem como fazer em CSS que mude de cor ao passar o mouse na parte do lado da parte escrita?Eu sei que tem como fazer em JScript e em CSS tem como?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Giovani    104

Giovani
Postado

Faça a seguinte tentativa:

 

#menubv li a:hover {border-left: 10px solid #fcc;border-right: 10px solid #fff;background-color: #fff0f5;color: #ccc;display: block;}

[]´s

Compartilhar este post

Link para o post
Compartilhar em outros sites

VBBurba    0

VBBurba
Postado

iiiiiiii cara num deu certo não

 

Eu catei o código do UOL que fala sobre isso só que eu num manjo quase nada de CSS, então se vcs souberem me ajudem nisso.

 

CSS

#menu {width:14.2em;border-top:1px solid #7E97AD;background-color:#003366;position:absolute;top:0;left:0;font-family:verdana,arial,freesans,helvetica;}

#menu ul {background-color:#50728E;}

#menu ul li {border-bottom:1px solid #7E97AD;list-style:none;_height:2em;}

#menu ul li a {color:white;height:1%;padding:0.3em 0.5em;font-family:verdana,arial,freesans,helvetica;}

#menu ul li a {padding/*hack ie5.5*/:0.4em 0.5em;}

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

#menu dl {margin:1em 0 0.7em 1em;padding-bottom:1px;font-family:arial;}

#menu dl dt {color:white;margin-top:1.6em;font-family:arial;}

#menu dl dd {background:url(http://home.img.uol.com.br/h2/seta-branca.gif) no-repeat;padding-left:1em;margin-top:3px;}

#menu dl dd a {color:#7C98AD;}

#menu dl dd.diff {background:transparent;padding-left:0px;}

#menu .rel {height:1.7em;padding-top:0.4em;}

#menu .e, #menu .d {display:inline;}

#menu .c {color:#7E97AD;}

Parte do script que tem o menu

<div id="menu">

<ul>

<li><a href=http://fotos.uol.com.br/>Álbum de Fotos</a></li>

<li><a href=http://ferramentas.uol.com.br/>Aplicativos Ferramentas</a></li>

<li><a href=http://tc.batepapo.uol.com.br/>Bate-papo</a></li>

<li><a href=http://biblioteca.uol.com.br/>Biblioteca</a></li>

<li><a href=http://www1.uol.com.br/bichos/>Bichos</a></li>

<li class=rel><a href=http://blog.uol.com.br/ class=e>Blog</a><span class=c>|</span><a href=http://fotoblog.uol.com.br/ class=d>Fotoblog</a></li>

<li><a href=http://busca.uol.com.br/>Busca</a></li>

<li><a href=http://noticias.uol.com.br/carros/>Carros</a></li>

<li><a href=http://cartoes.uol.com.br/>Cartões</a></li>

...

Compartilhar este post

Link para o post
Compartilhar em outros sites

VBBurba    0

VBBurba
Postado

valeu gio mas lá no site ele diz que tem que colocar o

display: block;

Eu fiz isso, na realidade já tava, eu tentei colocar até em todos mas mesmo assim não funcionou.Isso é uma coisa tão boba mas ta mi fazendo perder um tempão :wacko: Olha só o link como táTem algum outro jeito, sei lá?

Compartilhar este post

Link para o post
Compartilhar em outros sites

VBBurba    0

VBBurba
Postado

:D :D :D Maravilha Alberto! hehehe

 

Descobri o que estava faltando finalmente.

No li a não tinha o

width:160px;

 

Vida de Programador não é fácil.

 

Valeu a força ai povo.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito