Css: Efeitos De Link

Dezembro 5, 2006

CSS: efeitos de Link

De 2 classes 1 funciona e outra não. Por que?

Eu linkei as duas classes no head e...

</head>

... inseri uma em cada td

<td class="link_azul.css" ...

<td class="link_principal.css" ...

Agradeço desde já.

Dezembro 12, 2006

Jony, eu fiz o que você pediu, mas continua a mesma coisa. Por acaso, qual o efeito que você vê, pois

o efeito do Painel de Controle é azul escuro que muda de cor para azul mais vivo, e os links abaixo são branco que muda para laranja. É este o evento que você enxerga?.

Não tem outra maneira arrumar o código html, por exemplo: o que eu tenho é

Home | Servicos | Empresa , etc...

a barra entre um link e outro separa no código <a de outro <a, isso pode prejudicar na leitura, e podendo assim alguma coisa como

<a href=1.htm; href=2.htm; href=3.htm...

<id1 objeto; <id2 objeto;

Jony Walker · Dezembro 12, 2006

O que eu me referi foi à questão das tags de fonte que abrem e fecham a toda hora...

Ex:

E o efeito que eu vi foi esse mesmo descrito. Tente deixar só os links na página que você vai ver eles funcionando... depois vai remontando a página pra ver o que está atrapalhando...

flavio · Dezembro 12, 2006

Fiz um novo para testar a funcionalidade e veja o que aconteceu.
style.css (novo arquivo)
<style>
A.link_1:link {color: #01537E}
A.link_1:visited {color: #01537E}
A.link_1:hover {color: #43728B}
A.link_1:active {color: #01537E}
A.link_2:link {color: #ffffff}
A.link_2:visited {color: #ffffff}
A.link_2:hover {color: #ff6600}
A.link_2:active {color: #ffffff}
</style>
2class.htm (novo html como teste)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento sem título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="730" height="40" border="1" cellpadding="4" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#3DA4CB">
<tr>
<td><div align="left"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong><a href="1.htm" class="link_1">Painel
de Controle</a></strong></font></div></td>
</tr>
<tr>
<td><div align="left"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><strong><a href="2.htm" class="link_2">Home</a></strong></font></div></td>
</tr>
</table>
</body>
</html>
Enfim, aconteceu o seguinte:
Desta vez o link Painel de Controle ficou diferente de Home, mas o estilo de efeitos de link não estão coincidindo. Por quê? :huh:
Agradeço mais uma vez pela ajuda.

O que você quer dizer com "mas o estilo de efeitos de link não estão coincidindo"???

Esse CSS funciona perfeitamente... (pelo menos aqui)

Dezembro 12, 2006

rajneesh, você tem razão. Este CSS está funcionando perfeitamente, mas o sublinhado não era para estar aparecendo, por quê ele apareceu?

flavio · Dezembro 12, 2006

Vou tentar sanar essa dúvida de vocês.

Se você faz
A.link_1:link {color: #01537E}
Então você está criando uma classe que só pode ser aplicada a uma tag A.
Portanto usa-se assim: <a href="#" class="link_1">Teste</a>
Se você faz
.link_1 a:link {color: #01537E}
Então você está criando uma classe que pode ser aplicada à maioria das tags HTML com uma restrição: só fará efeito se houver uma tag A "filha" da tag na qual foi aplicada a classe.
Portanto usa-se assim: <div class="link_1"> <a href="#">Teste</a></div>
OBS.: Usei a tag DIV como exemplo, podendo ser P, SPAN, TD ...

Nesse código gigantesco que foi postado, está-se usando:

<div id="painel" align="right" class="link_azul">
    <font color="#01537E" size="1" face="Verdana, Arial, Helvetica, sans-serif">
    <a href="painel.htm" target="_self"><img src="imagens/paineldecontrole.gif" width="14" height="14" border="0"></a>
    &nbsp;
    <strong><a href="painel.htm" target="_self">Painel de Controle</a></strong>
    </font>
</div>

Então a classe deve ser definida assim:

.link_azul a:link {color: #01537E}

***************** No meu post anterior, seu código continha:

<a href="2.htm" class="link_2">Home</a>

E havia declarado, corretamente, um estilo na forma:

A.link_2:link {color: #01537E}

***************** E o sublinhado? O subinhado pode ser alterado com a propriedade CSS a seguir:

.classe {
   text-decoration: valor;
}

Tal que valor pode ser: none, underline, overline ...

beleza galera? Alguma dúvida? :blink:

Janeiro 4, 2007

A minha css está dando erro...

link.css

.link a:link {color: #ffffff}
.link a:visited {color: #ffffff}
.link a:hover {color: #6CC8FF}
.link a:active {color: #ffffff}
.link a:text-decoration:none

O sublinhado não saiu dos links.

links.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Links Interessantes</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="link.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#01445e" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#6CC8FF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no">
<table width="290" height="290" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<div align="center">
<table width="280" height="280" border="1" cellpadding="0" cellspacing="0" bordercolor="#3D6A83">
<tr>
<td align="center" valign="middle"><div class="link"><font size="2" face="Verdana, Arial, Helvetica, sans-serif"><a href="http://www.epson.com.br" target="_blank">www.epson.com.br</a><br>
<br>
<a href="http://www.compaq.com.br" target="_blank">www.compaq.com.br</a><br>
<br>
<a href="http://www.lge.com.br" target="_blank">www.lge.com.br</a><br>
<br>
<a href="http://www.kelow.com.br" target="_blank">www.kelow.com.br</a></font>
</div>
</td>
</tr>
</table>
<font size="2" face="Verdana, Arial, Helvetica, sans-serif"></font></div></td>
</tr>
</table>
<p align="center"> </body>
</html>

Por quê???

flavio · Janeiro 5, 2007

.link a {text-decoration:none}

Janeiro 5, 2007

Ok!!!

Valeu!!

Entrar

Css: Efeitos De Link

Pergunta

Guest - s_ric_ptbrasil -

Link para o comentário

Compartilhar em outros sites

33 respostass a esta questão

Posts Recomendados

Guest - s_ric_ptbrasil -

Link para o comentário

Compartilhar em outros sites

Jony Walker

Link para o comentário

Compartilhar em outros sites

flavio

Link para o comentário

Compartilhar em outros sites

Guest - s_ric_ptbrasil -

Link para o comentário

Compartilhar em outros sites

flavio

Link para o comentário

Compartilhar em outros sites

Guest - s_ric_ptbrasil -

Link para o comentário

Compartilhar em outros sites

flavio

Link para o comentário

Compartilhar em outros sites

Guest - s_ric_ptbrasil -

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades