Ir para conteúdo

POWERED BY:

Arquivado

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

Ajuda Mútua

[Resolvido] uma vez que o link foi clicado,

Por , em Desenvolvimento frontend

Recommended Posts

Ajuda Mútua    0

Ajuda Mútua
Postado

Boa tarde a todos.Pessoal ficaria muito grato se mim ajudassem a resolver esta questão.Como eu faço para que o menu uma vez clicado fique na cor vermelha com o fundo amarelo fixo. já está tudo especificado abaixo, mas o menu visitado não fica fixo. "ACTIVE". Agradeço desde já a ajuda que todos mim deram até hoje, mas esta questão ainda não consegui resolver. Eu vejo o resultado em quatro navegadores diferentes: IE, FIREFOX,GOOGLE, NETSCAPE, OPERA. Muito obrigado! Veja este site: http://pt-br.html.net/tutorials/css/lesson1.asp. É assim que eu quero que fique. Valeu gente!

 

@charset "utf-8";
/* CSS Document */

#menuver {
width: 11em;
padding: 0; 
margin: 0;
font: 12px Verdana, sans-serif;
background: #000; 
border-top: 3px solid red; 
border-bottom: 3px solid red; 
}
#menuver li {
list-style: none;
margin: 0.5em 0 0.5em 0.5em; 
}
#menuver li a {
margin:0; 
padding:0;
text-decoration:none;
color: #fff;
}
#menuver li a:visited {
color: #fff;
display:block;
width:100px;
}
#menuver li a:hover { 
background: #fff;
color: #000; 
}
#menuver li a:active { 
background: #FFC;
color: #F00; 
display:block;
width:100px;
}

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<link href="estrutura.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table width="323" border="1">
  <tr>
    <td width="176"><ul id="menuver">

<li><a href="home.html" title="Entrada no site">Home</a></li>
<li><a href="contato.html" title="Área de tutorial CSS">contato</a></li>
<li><a href="vamos.html" title="Técnicas de layout com CSS">vamos</a></li>

</ul> </td>
    <td width="131">vamos</td>
  </tr>
</table>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

A pseudo-classe :active só faz o efeito em quanto você clica. O que você quer é que em quanto o cliente estiver em uma página o botão respectivo fique com essas configurações, é isso? Se for isso, use class ou id para deixar marcado a página e estilize o CSS.

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ajuda Mútua    0

Ajuda Mútua
Postado

Grande Thiago é exatamente isto que você falou amigo. Eu não sei fazer com que o link clicado fique fixo. Thiago se não for contra as regras do fórum, você pode acrescentar neste ultimo código html que eu postei o tal do use class ou id para deixar marcado a página e estilize o CSS. Se faltar alguma coisa no codigo css, acrescente também. Muito obrigado amigo, não sei nem como lhe agradeçer!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eliseu M.    2

Eliseu M.
Postado

O conceito é simples: você adiciona uma classe ao link que está ativo na sua respectiva página, exemplo:

 

Na página http://pt-br.html.net/tutorials/css/lesson1.asp , o código do link "O que é CSS?" ficaria assim:

 

<li class="selected"><a href="LINK">O que é CSS?</a>
E no CSS:

 

#menuver .selected {background:#FFC;}

Na verdade, dei uma olhada e já está funcionando, o link está na cor vermelha, então me parece que você já pegou o jeito :D Falou!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Vamos lá. Vou te explicar.

 

Temos, três páginas. Home, Onde Estamos e Contato. Assim:

 

<ul id="menu">
<li><a href="#" class="ativo">Home</a></li>
<li><a href="#">Onde Estamos</a></li>
<li><a href="#">Contato</a></li>
</ul>
Veja que o primeiro botão tem uma classe. Seu real valor é informar, através de estilos CSS, que aquela é a página atual. Então vamos já estilizar ele (preste atenção nos comentário):

 

ul#menu li a { font-size: 12pt; color: #000; } /* Estado normal */
ul#menu li a.ativo{ font-size: 14pt; color: #ff0; } /* Para as páginas que tem essa classe */

Agora suponhamos que o cliente foi para a página Onde Estamos e depois Contato, então os códigos HTML seriam esses respectivamente:

 

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#" class="ativo">Onde Estamos</a></li>
<li><a href="#">Contato</a></li>
</ul>
e

 

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Onde Estamos</a></li>
<li><a href="#" class="ativo">Contato</a></li>
</ul>
Understand?

 

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

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