Ir para conteúdo

POWERED BY:

Arquivado

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

Nelly

Background Position

Por , em Desenvolvimento frontend

Recommended Posts

Nelly    0

Nelly
Postado

Olá pessoal, Fiz um menu com uma imagem de background e que se altera o backgorund position no estado hover:background-position:-180px;Só que no IE não funciona. Teria alguma técnica diferente? Obrigado !

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

No IE essa técnica deve funcionar perfeitamente, mande um link ou todo o código pra que possamos analisar[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nelly    0

Nelly
Postado

Ok,

Aqui o código:

 

ul.menu_lista_vertical li a{display:block;text-decoration:none;border-top:1px solid #66CC00;margin-top:2px;padding:5px 5px 5px 20px;height:18px;color:#000;background:url(../imagens/bg_menu.gif)left no-repeat;}ul.menu_lista_vertical li a:hover{display:block;text-decoration:none;margin-top:2px;padding:5px 5px 5px 20px;height:18px;background:url(../imagens/bg_menu.gif)left no-repeat;background-position:-180px;background-color:#F4FCED;}

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Tenta assim:

 

ul.menu_lista_vertical li a{display:block;text-decoration:none;border-top:1px solid #66CC00;margin-top:2px;padding:5px 5px 5px 20px;height:18px;color:#000;background-image:url(../imagens/bg_menu.gif);background-position:left;background-color:#F4FCED;}ul.menu_lista_vertical li a:hover{display:block;text-decoration:none;margin-top:2px;padding:5px 5px 5px 20px;height:18px;background-position:left -180px;background-color:#F4FCED;}

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nelly    0

Nelly
Postado

Valeu pela dica gio!

 

 

 

Eu tentei colocar o código que o INSIDE postou mais mesmo assim não resolveu. Até está deslocando um pouc o BG mais não o suficiente. Eu tentei dominuir o valor de 180 pra bem menos.

 

O bg é uma imagem de 200x23. E a lista é normal, com ul e li.

 

Vou fazer mais uns testes aqui. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,Não tem um link para que possamos visualizar?Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Veja esse exemplo que fiz...

 

Segue o código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<title>Exemplo</title>		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />		<style type="text/css">		div#lateral {			float: left;			width: 180px;			text-align: left;			border-right: 1px solid #ccc;		}		div#lateral ul {			margin: 0;			padding: 0;			list-style-type: none;		}		div#lateral ul li a {			display: block;			width: 160px;			height: 30px;			text-decoration: none;			line-height: 30px;			color: #000;			background: url(bg_menu.gif) no-repeat;			background-position: 0 0;			border-top: 1px solid #66CC00;			margin-top: 2px;			padding-left: 20px;		}		div#lateral ul li a:hover {			background-position: 0 -30px;			background-color:#F4FCED;		}		</style>	</head>	<body>		<div id="lateral">			<ul>				<li><a href="#" title="Página Inicial">Página Inicial</a></li>				<li><a href="#" title="Cadastrar Anúncio">Cadastrar Anúncio</a></li>				<li><a href="#" title="Visualizar Mensagens">Visualizar Mensagens</a></li>				<li><a href="#" title="Editar meus Anúncios">Editar meus Anúncios</a></li>				<li><a href="#" title="Sair">Sair</a></li>			</ul>		</div>	</body></html>
Dê uma analisada principalmente no CSS que irá entender...

 

Ah! Modifiquei também a imagem... Caso queira baixá-la, é só clicar!

 

Abraço!

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