Ir para conteúdo

POWERED BY:

Arquivado

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

Tartaruga Ninja

Menu CSS

Por , em Desenvolvimento frontend

Recommended Posts

Tartaruga Ninja    0

Tartaruga Ninja
Postado

olá pessoal,

 

estou começando a estudar um pouco sobre CSS e estou desenvolvendo um menu, mas estou com problemas no comando HOVER que deverá trocar a imagem do menu quando o mouse passar por cima, não está funcionando.

 

segue o código

<style type="text/css" title="menus" media="all"><!--body {	background-color: #0000ff;}.menu { position: absolute; left: ## px; /*posição à direita*/top: 142 px; /*posição abaixo*/width: 180px; }ul {list-style-type: none; /*remove o marcador*/ margin: 0; /*remove o recuo IE e Opera*/ padding: 0; /*remove o recuo Mozilla e NN*/ font: bold 16px arial, helvetica, sans-serif;}.menu a {display: block;padding: 1px 0 1px 25px;border: 1px solid #000000;width: 180px;background-color: #339966;color: #FFFFFF;text-decoration: none;background-image: url(C:\Botao2-1.gif); voice-family: "\"}\"";  /*Box Model Hack*/voice-family:inherit;width:153px;}body>.menu a {width:153px;}.menu a:hover { border: 1px solid #000000; background-color:#FFFF99; background-image: url(C:\Botao2-2.gif);color:#000000; }--></style>

alguém sabe me dizer o que está errado???? a única coisa que não funciona é o .MENU A:HOVER

 

grato.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tartaruga Ninja    0

Tartaruga Ninja
Postado

galera encontrei o erro, não estava no CSS e sim no HTML, agora está funcionado, digo em partes.No IE ele funciona perfeitamente, com tudo o que eu especifiquei,mas no Mozilla Firefox ainda não está funcionando, ele não troca as imagens de fundo e nem está na posição correta da página.Alguém sabe o por que disto??? e o que eu posso fazer para concertar???valew...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tartaruga Ninja    0

Tartaruga Ninja
Postado

Se ajudar aqui está o código completo

 

<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css"><!--body {	background-color: #0000ff;}.menu { position: absolute; left: ## px; /*posição à direita*/top: 142 px; /*posição abaixo*/width: 180px; }ul {list-style-type: none; /*remove o marcador*/ margin: 0; /*remove o recuo IE e Opera*/ padding: 0; /*remove o recuo Mozilla e NN*/ font: bold 16px arial, helvetica, sans-serif;}.menu a {display: block;padding: 1px 0 1px 25px;border: 1px solid #000000;width: 180px;background-color: #0000ff;color: #FFFFFF;text-decoration: none;background-image: url(C:\Botao2-1.gif); voice-family: "\"}\"";  /*Box Model Hack*/voice-family:inherit;width:153px;}body>.menu a {width:153px;}.menu a:hover { border: 1px solid #000000; background-color:#FFFFff; background-image: url(C:\Botao2-2.gif);color:#000000; display: block;}--></style></head><body leftmargin="0" topmargin="0" background-color: #0030CE><table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">	 <tr>		<td height="5" bgcolor="#0033CC"> </td>			<td height="100%" width="749" bgcolor="#ffffff" valign="top"> 	<ul class="menu">		<li><a href="http://www.google.com.br">Home Page</a> </li>		<li><a href="">Portfolio</a> </li>		<li><a href="">Equipe Tecnica</a> </li>		<li><a href="">Parceiros</a> </li>		<li><a href="">Álbum de Fotos</a> </li>		<li><a href="">Fale Conosco</a> </li>	  </ul></td>		<td height="5" bgcolor="#0033CC"> </td>	 </tr></table></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tartaruga Ninja    0

Tartaruga Ninja
Postado

galera estudei mais um pouco e fiz alguns testes e uma parte do meu problema já consegui resolver, é referente ao posicionamento do menu na página, agora estou utilizando o PADDING-TOP ao invés do TOP, pois o PADDING-TOP tanto o IE quanto o Firefox o reconhecem, ao contrário do TOP que somente o IE está reconhecendo. MASainda estou com um pequeno problema, referente as imagens do menu, no IE está funcionando corretamente, mas no FF ele não está reconhecendo as minhas imagens .GIF. conforme o código acima.Alguém pode me ajudar a resolver isto?Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tartaruga Ninja    0

Tartaruga Ninja
Postado

Valew pela dica.mas eu estou com problemas no background-imageo Firefox não está carregando as imagens para o menu (GIF).o que eu devo fazer??estou pesquisando mas até agora não achei nada especifico.obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Ja estudou o basico?Se não, da uma olhada nos topicos fixos aqui da seção[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tartaruga Ninja    0

Tartaruga Ninja
Postado

Esse menu é um menu com imagens, possuo duas imagens .gif, uma para o estado normal do menu e outra imagem para quando o mouse passar por cima do menu. No IE6 funciona certinho, no FF não funciona, os links do menu funcionam apenas a troca de imagens não está funcionando.

 

Acima está o código "completo" dos testes que estou fazendo.

 

No FF ele não está reconhecendo este código

background-image: url(C:\Botao3-1.gif);

Gostaria de saber o por que ele não estáre conhecendo isto, e o que eu devo fazer para concertar.

 

Tentei colocar alguns links com as telas do IE e do FF, mas no momento não consegui.

 

Agradeço qualquer ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tartaruga Ninja    0

Tartaruga Ninja
Postado

Opa.

 

andei estudando e analisando o meu código CSS para tentar identificar o que poderia estar ocorrendo de errado e encontrei, um erro que não havia percebido, considero um erro primario, o caminho das imagens estavam errados, eu estava fazendo um links com o C do meu PC hhehehe ai não iria funcionar eh nunca quando foce armazenado em um servidor, bom corrigi este problema mas ainda não está 100%, abaixo segue um link onde mostra o menu visualizado em vários browsers, verifiquem e me ajudem a resolver este problema.

 

LINK

 

 

O menu que está correto é o menu que esta na parte superiror da página.....

 

Alguém sabe me dizer o que pode ser feito para resolver isto???

 

Obrigado.

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