Ir para conteúdo

POWERED BY:

Arquivado

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

clemisson

Menu em CSS com Imagens

Por , em Desenvolvimento frontend

Recommended Posts

clemisson    0

clemisson
Postado

Bem galera,

 

Segui os passos do tutorial do site de Mauricio Sammy - http://www.maujor.com/tutorial/menurollimg.php

Usei o exemplo la so pra entender como fazer!

Fiz uma tabela de 1 linha e 1 coluna! e coloquei para carregar um <iframe> em cada coluna com os menus seguindo os passos do tutorial!

Fiz o seguinte como minha imagem tem o fundo branco - coloquei na celula um caracter qualquer e deixei branco e criei o link como no tutorial!

Coloquei mais uma função que é a função active, para ficar ativo na pagina q esta sendo visitada!

Fiz a primeira vez e deu certo, estou fazendo umas mudanças e o bicho parou de funcionar!

 

Veja abaixo o codigo de um menu!

 

<html><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>Menut</title><style type="text/css"><!--/*definindo o espaçamento da pagina e a cor de fundo*/body {	margin-left: 0px;	margin-top: 0px;	margin-right: 0px;	margin-bottom: 0px;	background-color: #FFFFFF;}/*definindo margem do menu, posição e tamanho*/#menu {position: absolute;left: 0px;top: 0px;Width: 116px;height: 50px;}/*definindo menu que está dentro da tag tr da tabela*/#menu tr{list-style-type: none;margin: 0;padding: 0;width:116px;height:50px;}/*definindo menu que está dentro da tag th da tabela*/#menu th { margin-bottom: 0px;width:116px;height:50px;background-image: url(img/img1.gif);}/*definindo link do menu,com tamanho*/#menu a {display: block;padding: 0;border: 0px solid;width:116px;height:50px;}/*Qunando o mouse passa em cima, imagem que carrega*/#menu a:hover{background-image: url(img/img2.gif);}/*Link que esta sendo exibido*/#menu a:active{background-image: url(img/img2.gif);}.style1 {color: #FFFFFF}/*Cores das linhas e colunas*/body,td,th {	color: #FFFFFF;}/*cor do link*/a:link {	color: #FFFFFF;}/*cor do link visitado*/a:visited {	color: #FFFFFF;}/*cor do link quando o mouse passa por cima*/a:hover {	color: #FFFFFF;}/*cor do link ativo*/a:active {	color: #FFFFFF;}--></style></head><body><table width="116" height="48" border="0" cellpadding="0" cellspacing="0" id="menu" name="menu">  <tr>   <th width="116" height="48" align="left" valign="top"><div align="left"><a href="principal.htm" target="mainframe">1</a></div></th>  </tr></table></body></html>

O que acontece é o seguinte ele ta fazendo a função active na hora do mouse over!

 

No mozila o active tb nao funcionou!!!

 

Um abraço!!

 

Obrigado pela ajuda desde ja!

Compartilhar este post

Link para o post
Compartilhar em outros sites

guinuranti    0

guinuranti
Postado

pelo que eu vejo no seu código, todas as definições de a estão sendo como branco, então claro que sempre irá aparecer branco, tanto no hover quanto no visited quanto no active, experimente mudar as cores.

Compartilhar este post

Link para o post
Compartilhar em outros sites

clemisson    0

clemisson
Postado

Caro Amigo obrigado pela ajuda!Mas você não Observou o codigo por inteiro, ali como eu havia dito estar tudo branco pq estou com um caracter la fazendo link, as minhas imagens sao todas planos de fundo desse link!Observe o seguinte

Aqui ele ja definiu a primeira imagem de fundo que dei o nome de img.gif

#menu th { margin-bottom: 0px;width:116px;height:50px;background-image: url(img/img1.gif);

Aqui ele muda a imagem de fundo quando eu passo o mouse

#menu a:hover{background-image: url(img/img2.gif);

Aqui ele muda a imagem de fundo e deixa ela ate selecionar outro menu

#menu a:active{background-image: url(img/img2.gif);Ta acontecendo o seguinte quando eu to passando o mouse a imagem fica como eu seu estivesse clicando e ai ela muda e nao volta!!Antes a medida que ia passando em outro menu ele ia mudando apenas o q se passa o mouse e o outro volta ao normal!!Vou refazer do zero de novo e posto o resultado aki para vcs!Mas se alguem puder me ajudar serei muito grato!Abraços!Vlw a força!

Compartilhar este post

Link para o post
Compartilhar em outros sites

clemisson    0

clemisson
Postado

Ok tentarei isso!Vlw a dica!Mas te digo uma coisa estava funcionando desse mesmo jeito tb!Um abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

clemisson    0

clemisson
Postado

Bem agora a minha duvida é a seguinte apos solucionar o problema do link!Quero solucionar o seguinte problema!Meu menu carrega em um <iframe> e as paginas links dele carregam em Outro!Sempre que clico na pagina em exibição ele apaga a função!Como faço pra ficar sempre ativo, para ele desativar so se eu clicar em outro link?Agradecido,

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