Comportamento Link ativo

murosegrades · 4 de maio de 2011

Existe algum componente no HTML para link ativo, pois criei um menu do fireworks e nele existe o comportamento (onclick) para quando o link esta ativo ele deixa outra cor pro botão do link ativo, ou seja a cor do botão do link que está ativo fica diferente da cor dos demais botões dos links não ativos, mas exportando para o dreamweaver ele só funciona nessa opção se eu fizer o site usando frames mas não quero isso pois uso divs que são muito melhores mas nelas o comando não funciona

Tentei criar o menu utilizando o CSS não consegui atingir o mesmo resultado da criação no fireworks...

Alguém me ajuda nessa?

DiF · 4 de maio de 2011

sim, você pode estilizar seu link ativo com CSS.

faça seu menu normal... e no CS S faça assim:

se for só com cores:

a:active {text-decoration:none; color: cor;}
a:visited: {text-decoration:none; color: cor;}
a:hover: {text-decoration:none; color: cor;}

se for com imagens:

a:active {
      text-decoration:none; 
      color: cor; 
      background-image: url(caminhodaImagem\imagem); 
}
a:visited: {
      text-decoration:none; 
      color: cor; 
      background-image: url(caminhodaImagem\imagem);
}
a:hover: {
     text-decoration:none; 
     color: cor; 
     background-image: url(caminhodaImagem\imagem);
}

murosegrades · 4 de maio de 2011

Boa amigo, tentarei e posto aqui os resultados!

Obrigado.

murosegrades · 5 de maio de 2011

Meu código ficou assim:


.home {  
    font: bold 12px/24px arial, helvetica, sans-aerif;    
    padding:0px;
    text-decoration: none;
    text-align:center;    
    color:#ccc;
    background:url('1.gif')
    no-repeat center center;    
    width:120px;  
    height:24px;    
    display:block;    
    }

.home:active {
    background:url('3.gif') no-repeat 
    center center;
    color:#999;
}

.home:visited {
    background:url('3.gif') no-repeat 
    center center;
    color:#999;
}

.home:hover { 
    background:url('2.gif') no-repeat 
    center center;
    color:#999;
}
/*===================================================*/
.empresa {  
    font: bold 12px/24px arial, helvetica, sans-aerif;    
    padding:0px;
    text-decoration: none;
    text-align:center;    
    color:#ccc;
    background: url('7.gif')
    no-repeat center center;    
    width:120px;  
    height:24px;    
    display:block;    
    }

.empresa:active {
    background:url('6.gif') no-repeat 
    center center;
    color:#999;
}

.empresa:visited {
    background: url('6.gif') no-repeat 
    center center;
    color:#999;
}

.empresa:hover { 
    background:url('8.gif') no-repeat 
    center center;
    color:#999;
}
</style>
<body>
<body>
<p>Index.htm</p>
<Div class="botao">
<a href="#index.htm" class="botao"><span class="home"></span></a>
<a href="empresa.htm" class="botao"><span class="empresa"></span></a>

Em teste no f12 do dream, eu consegui deixar a primeira imagem e o estado hover do botão como queria, mas se clico no link e mesmo ao executar no F12 o comportamento link ativo e visitado não funcionam, é assim mesmo só funciona no servidor web?

DiF · 5 de maio de 2011

veja se nao é que esta faltando os ponto e virgula depois no-repeat.

vi uma inconformidade ai.. você só ta atrelando a classe home.

faça assim:

a.home:active{ ... }

a.home:hover{ ... }

a.home:visited{ ... }

a.empresa:active{ ... }

e por ai vai

nao funciona se nao colocar o a que é o link

murosegrades · 5 de maio de 2011


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style CSS>

    .menu{
        width:120px;
        height:30px;    
        display:block;    
        background-image: url('1.gif');
          }

    .menu a:active {
          text-decoration:none; 
          color: cor; 
          background-image: url('3.gif'); 
    }
    .menu a:visited: {
          text-decoration:none; 
          color: cor; 
          background-image: url('3.gif');
    }
    .menu a:hover: {
     text-decoration:none; 
     color: cor; 
     background-image: url('2.gif');
    }


</style>
</head>
<body>
<p class ="menu">
        <a href="index.htm" class="Inicio"></a>
</p>
</body>
</html>

Tentei assim amigo deixei o código bem simples mas agora não funcionou nenhuma dos estados, pelo que vejo deveria funcionar, to quase louco hehehehe já são 2 dias direto que estou na lida e já vi tudo quando é modelo e exemplo de menu e não acho um que seja feito com imagens para tentar criar a partir do meu, a maioria é feito com textos e tento ajustar para minhas imagens mas não consigo...

DiF · 5 de maio de 2011

olá amigo, aquela hora quando respondi.. fiz de cabeça sem testar.. agora testei aqui.. e tinha uma inconformidade no codigo que eu te passei.. agora eu ja arrumei.. segue o codigo testado aqui e funciona pelo menos o hover:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 
Transitional//EN">
<html>
<head>
<title>Centrar uma  página com CSS</title>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1">
<style type="text/css">
 .home {
	display: block;
	width: 131px;
	height: 39px;
	background: url(active.png) top;
	text-indent: -99999px;
}
.home:hover { background-image: url(hover.png); }


</style>
</head>
<body>

<div id="nav">
	<ul>
		<li><a class="home" href="#">LINK1</a></li>
	</ul>

</div>
</body>
</html>

fiz o menu com lista como é o correto a se fazer.

murosegrades · 6 de maio de 2011

Consegui, depois de muito esforço consegui o resultado desejado da seguinte forma:

Esta é minha index onde o botão Início fica azul, os demais ficam branco com estado hover mudando a cor do testo.


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style CSS>
/*=========================================================*/
/* CONFIGURAÇÕES DA DIV MENU*/    
     #menu {
        width:100%;
        height:auto;
        background-color:#0CC;
        position:relative;
        top: 0px;
        left: 0px;
          }
/*=========================================================*/
/* CONFIGURAÇÕES DO BOTÃO EMPRESA*/    
    .Empresa{
         display: block;
         width: 131px;
         height: 20px;
         background: url(emp1.gif) no-repeat top;
         padding: 2px 10px;
          }

    .Empresa:hover{
         display: block;
         width: 131px;
         height: 20px;
         background: url(emp2.gif) no-repeat top;
         padding: 2px 10px;
    }    
/*=========================================================*/
/* ESTADO DO BOTÃO DO LINK ATUAL*/    
    .atual{
         display: block;
         width: 131px;
         height: 20px;
         background: url(3.gif) no-repeat top;
    }
/*=========================================================*/
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
</style>
</head>
<body>
<Div id="menu">
        <a href="index.htm" class="Atual"></a>
        <a href="empresa.htm" class="Empresa" title="Empresa"></a>
</Div>
</body>
</html>

E este é link empresa, note que alterei a classe atual, então o botão do link empresa fica azul e o index fica com os estados original e hover.


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style CSS>

     .menu {
        width:100%;
        height:auto;
        background-color:#0CC;
        position:relative;
        top: 11px;
        left: 12px;
          }

    .empresa{
         display: block;
         width: 131px;
         height: 20px;
         background: url(1.gif) no-repeat top;
          }

    .empresa:hover{
         display: block;
         width: 131px;
         height: 20px;
         background: url(2.gif) no-repeat top;
    }

    .atual{
         display: block;
         width: 131px;
         height: 20px;
         background: url(emp3.gif) no-repeat top;
    }


</style>
</head>
<body>
<Div class="menu">
        <a href="index.htm" class="Empresa"></a>
        <a href="empresa.htm" class="Atual" title="Empresa"></a>
</Div>
</body>
</html>

Eu tive que criar uma classe atual que é o link que ficará ativo, infelizmente terei que criar um CSS para cada uma das páginas já que o fundo do link atual é a continuação de um GIF que é diferente em cada botão, vai dar um trabalho mais mas pelo menos resolvi um dos problemas.

Agora pergunto o seguinte como eu alinho horizontal esses links???

DiF · 6 de maio de 2011

primeiramente parabens pelo seu empenho.

então amigo, antes de mais nada, por questoes de organizaçao... sugiro que você coloque todo seu css em um arquivo separado e faz um link a ele com a seguinte linha:

agora a sua dúvida...

para alinhar horizontalmente seu menu...

você terá que mudar a estrutura dele, usando tags do XHTML como por exemplo:


<div id="menu">
<ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="contato.html">Contatos</a></li>
    <li><a href="portifolio.html">Portifolio</a></li>
    <li><a href="servicos.html">Serviços</a></li>
</ul>
</div>

e no css teria que determinar que a LI seja display: inline.

bom.. nao sei se vai funcionar com imagens.. com menu normal sem imagens isso funciona...

é aprimeira vez que estou fazendo com imagens.

provavelmente vai ter que criar um estilo para:

#menu UL LI A{ ... }

eai por estilos ali dentro... espaçamento... width e height.. por ai vai

murosegrades · 9 de maio de 2011

Amigo "Dif" primeiro quero agradecer muito pela sua ajuda, com certeza sem ela não teria conseguido nem iniciar este menu em CSS uma vez que nunca tinha trabalhado tão a fundo no CSS.

Após ajustar o que você me passou consegui deixar o menu exatamente como eu queria, ou seja igual o menu que já tinha feito no fireworks, então links que não são da página atual ficaram com uma imagem de fundo predominando a cor branca e com uma barrinha separando elas e o link da página ativa ficou como o fundo sendo a continuação de um GIF superior que tenho.

Eis o código que ficará na página que estou acessado no momento:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<link rel="stylesheet" href="estilo.css" type="text/css"/>
<style CSS>
/*=========================================================*/
/* ESTADO INICIAL DO BOTÃO DA PÁGINA ATUAL*/    
   #menu ul li a.Atual{
           width:115px;
        height:28px;
        display: block;
        background: url(Imagens/fundoinicio.gif) no-repeat top;
        font-family:"Times New Roman", Times, serif;
        font-size:16px;
        font-weight:400;
        text-decoration: none;
        text-align:center;
        color: #FFF;
        float: left; 
        padding: 5px 0 0;

/* COMPORTAMENTO PASSAR O MOUSE DO BOTÃO DA PÁGINA ATUAL*/         
    }
       #menu ul li a.Atual:hover{
           width:115px;
        height:28px;
        display: block;
        background: url(Imagens/fundoinicio.gif) no-repeat top;
        font-family:"Times New Roman", Times, serif;
        font-size:16px;
        font-weight:400;
        text-decoration: none;
        text-align:center;
        color:#CCC;
        float: left; 
        padding: 5px 0 0;
       }
</style>
</head>
<body>
<Div id="menu">
<ul>
     <li><a href="index.htm" title="Inicio" class="Atual">Início</a></li>
     <li><a href="empresa.htm" title="Empresa" class="Empresa">Empresa</a></li>

E no arquivo de estilos ainda pra ajudar o Dreamweaver não sei por que motivos nunca chama e não reconhece o primeiro comportamento criado da classe ou div, mas isso eu resolvi criando essa linha "#menu{}" que não chama nada e engana o dream hhehe, depois nesse estilo geral deixei todos os comportamentos dos botões quando não estão na página ativa, sendo que para saber se qual o botão será usado na página ativa controlei dando o nome de classe "Atual" nos links e dentro de cada uma das páginas tive que criar o comportamento do botão para a "Atual" alterando a imagem de fundo, tive que fazer essa manobra justamente por que a imagem de fundo de cada botão da página ativa é diferente dos demais.

Esse é o código dos estilos:


<style CSS>
   #menu{} /*bug do dreamweaver ???*/
/*=========================================================*/
/* CONFIGURAÇÕES DA DIV MENU*/    
    #menu ul{
        width: 100%; 
         height: 28px; 
         font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; 
         font-weight: bold;          list-style-type: none; 
         margin: 0; 
         padding: 0; 
        background-color: #0F9;
          }
/*=========================================================*/
/*DEIXAR O MENU HORIZONTAL*/
     #menu ul li{ 
                display:inline;
          }
/*=========================================================*/
/* ESTADO INICIAL DO BOTÃO INÍCIO */    
    #menu ul li a.Inicio{
        width:115px;
        height:28px;
        display: block;
        background: url(Imagens/fundo.gif) no-repeat top;
        font-family:"Times New Roman", Times, serif;
        background-color:#FFF;
        font-size:16px;
        font-weight:400;
        text-decoration: none;
        text-align:center;
        color:#999;
        float: left; 
        padding: 5px 0 0; 
          }

/* COMPORTAMENTO PASSAR O MOUSE SOBRE BOTÃO INÍCIO*/
    #menu ul li a.Inicio:hover{
        width:115px;
        height:28px;
        display: block;
        background: url(Imagens/fundo.gif) no-repeat top;
        font-family:"Times New Roman", Times, serif;
        font-size:16px;
        font-weight:400;
        text-decoration: none;
        text-align:center;
        color:#019FCC;
        float: left; 
        padding: 5px 0 0; 
          }
/*=========================================================*/
/* ESTADO INICIAL DO BOTÃO EMPRESA */    
    #menu ul li a.Empresa{
        width:115px;
        height:28px;
        display: block;
        background: url(Imagens/fundo.gif) no-repeat top;
        font-family:"Times New Roman", Times, serif;
        background-color:#FFF;
        font-size:16px;
        font-weight:400;
        text-decoration: none;
        text-align:center;
        color:#999;
        float: left; 
        padding: 5px 0 0; 
          }

/* COMPORTAMENTO PASSAR O MOUSE SOBRE BOTÃO EMPRESA*/
    #menu ul li a.Empresa:hover{
        width:115px;
        height:28px;
        display: block;
        background: url(Imagens/fundo.gif) no-repeat top;
        font-family:"Times New Roman", Times, serif;
        font-size:16px;
        font-weight:400;
        text-decoration: none;
        text-align:center;
        color:#019FCC;
        float: left; 
        padding: 5px 0 0; 
          }
</style>