Fórum dos Fóruns

Fórum dos Fóruns Forumeiros

Welcome FdF Bem-vindo ao fórum de suporte Forumeiros  Muito feliz


Para aproveitar tudo o que o nosso fórum lhe oferece, agradecemos que se identifique, se já é nosso membro, ou que se junte à nossa comunidade, fazendo o seu registo.
Acesso rápido

Fóruns de suporte oficiais


Pesquisa de Satisfação
Queremos saber a sua opinião sobre os nossos serviços. Clique nesta vinheta e preencha este inquérito.

Login

Esqueci minha senha

Últimos assuntos
» Participe da Pesquisa de satisfação 2016
Hoje à(s) 16:50 por Luiz~

» Criar tags BBcode
Hoje à(s) 16:36 por Shek Crowley

» Permitir HTML nas postagens
Hoje à(s) 15:31 por Cream

» Conteúdo dos perfis não aparecem
Hoje à(s) 15:30 por Cream

» [Logo] Policia Habbo
Hoje à(s) 14:51 por Shek Crowley

» [Logo] Laranja - Médio - Texto marrom
Hoje à(s) 14:45 por Shek Crowley

» Ajustar mensagens do fórum
Hoje à(s) 13:32 por PrisoN†BreaK

Perdi minha senha!
Obter senha

Nota: use se tiver perdido acesso ao seu painel de controle.

Últimas sugestões
Parceiros Forumeiros
Quem está conectado
123 usuários online :: 1 usuário cadastrado, Nenhum Invisível e 122 Visitantes :: 2 Motores de busca

sandra51

[ Ver toda a lista ]


O recorde de usuários online foi de 3131 em Qui 24 Dez 2009 - 15:05

Problemas com Exibição de Abas

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Problemas com Exibição de Abas

Mensagem por Cloud' em Dom 1 Nov 2015 - 1:08

Detalhes da questão


Endereço do fórum: http://fairytailcelestial.forumeiros.com
Versão do fórum: PhpBB3

Descrição


Olá, gostaria de saber o que está de errado com o código que editei. Eis o código atual:
Código:
<style>
div.aba {
  background: #fff;
  text-align: justify;
  margin-bottom: 20px;
  padding: 10px 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#navebar {
  font: bold 14px Trebuchet MS;
  margin: 0;
  padding:3px 0;
}

#navebar li {
  list-style: none;
  margin-right: 6px;
  display: inline;
}

#navebar li a {
  padding: 3px 6px;
  border: 1px solid #09F;
  border-bottom: none;
  background: #dde;
  color: #333;
  text-decoration: none;
}

#navebar li a:hover {
  color: #000;
  background: #aae;
  border-color: #09F;
}

#navebar li a.ativo {
  background-color: #009;
}

#navebar li a {
    color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
    width: 120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: gray;
}
    #navebar li a:hover {
    background-color: #22D5E7;
}</style>

<script>
jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar">
<li><a class="ativo">Guia dos Novatos</a></li>
<li><a>Regras e Magias</a></li>
<li><a>Regras e Magias</a></li>
<li><a>Regras e Magias</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})
</script>
<div id="seender_abas">

<div id="aba1" class="aba">
Conteúdo da aba 1. </div>

<div id="aba2" class="aba">
Conteúdo da aba 2.
</div>
</div>

As únicas coisas que modo fiquei foram o número de abas na parte do script, nota-se pelos textos ja postos; tinha retirado algumas propriedades de CSS (background-transition e transition) e algumas outras propriedades em CSS.

Alguém pode me dizer o que está errado? Pois o efeito não foi o que desejei. Vejam meu fórum pra visualizar o resultado do código acima. Eu apliquei à mensagem da página Inicial.

Abraços o/

Cloud'
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 905
Pontos Ativos : 2485

http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Problemas com Exibição de Abas

Mensagem por RJUchiha em Seg 2 Nov 2015 - 2:14

Boas seria esse efeito que vc desejava? prntscr.com/8y0mak
Se for deixo o codigo corrijido em baixo:
Spoiler:

Código:
<script>
jQuery(document).ready(function(){
jQuery('#seender_abas').prepend(
'<ul id="navebar"> <li><a class="ativo">Guia dos Novatos</a></li> <li><a>Regras e Magias</a></li><li><a>Regras e Magias</a></li></ul>')

jQuery('.aba').css({
display: 'none',
marginTop: 0,
borderTopWidth: 0
})

jQuery('#aba1').css('display', 'block');

jQuery('a', jQuery('#navebar')).click(function() {
var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
jQuery('#aba' + i).show();
jQuery(this).parents('#navebar').find('a').removeClass('ativo');
jQuery(this).addClass('ativo');
})
})
</script>
<div id="seender_abas">
        
 <div id="aba1" class="aba">
     Conteúdo da aba 1.      
 </div>
        
 <div id="aba2" class="aba">
     Conteúdo da aba 2.              
 </div>
<div id="aba3" class="aba">
     Conteúdo da aba 3.              
 </div>
          
</div>

RJUchiha
Nível 3

Masculino
Inscrito dia : 25/10/2015
Mensagens : 24
Pontos Ativos : 454

http://narutogamedicasbr.forumeiro.com/

Resolvido Re: Problemas com Exibição de Abas

Mensagem por Cloud' em Seg 2 Nov 2015 - 4:10

As abas nao ficaram uma do lado da outra.
E o efeito do JS não é instantâneo, tem um delay de quase um segundo pra dar efeito.


Fico no espero o/

Cloud'
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 905
Pontos Ativos : 2485

http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Problemas com Exibição de Abas

Mensagem por RJUchiha em Seg 2 Nov 2015 - 7:22

O codigo CSS que passou tem um erro por favor substitua por este:
Código:
<style>div.aba {
  background:#fff;
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#dde;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#000;
  background:#aae;
  border-color:#09F;
  }
#navebar li a.ativo {background-color:#009;}
#navebar li a {
      color: #FFF;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #1AB8D6;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #22D5E7;}</style>
Resultou?

RJUchiha
Nível 3

Masculino
Inscrito dia : 25/10/2015
Mensagens : 24
Pontos Ativos : 454

http://narutogamedicasbr.forumeiro.com/

Resolvido Re: Problemas com Exibição de Abas

Mensagem por Cloud' em Seg 2 Nov 2015 - 13:42

Funcionou!

Mas eu queria saber qual código CSS personaliza as abas e o quadro onde fica os "conteúdos". Pode me indicar os códigos, separados, que personaliza cada um desses dois fatores? Feliz
Só mais isso para eu dar resolvido. ^^

Cloud'
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 905
Pontos Ativos : 2485

http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Problemas com Exibição de Abas

Mensagem por RJUchiha em Seg 2 Nov 2015 - 13:57

Nao percebi bem a questao mas penso que seja isto:~
Codigo CSS

Código:
div.aba {
  background:Aqui Muda a Cor do Fundo do "Conteudo da Aba";
  text-align:justify;
  margin-bottom:20px;
  padding:10px 15px;
  border:1px solid #CcC;
  box-shadow:inset 1px 1px 2px #999;
  border-radius:4px;
  }
#navebar {
  font:bold 12px Georgia, "Times New Roman", Times, serif;
  margin:0;
  padding:3px 0;

  }
#navebar li {
  list-style:none;
  margin-right:6px;
  display:inline;
  }
#navebar li a {
  padding:3px 6px;
  border:1px solid #09F;
  border-bottom:none;
  background:#Cor da Aba;
  color:#333;
  text-decoration:none;
  }
#navebar li a:hover {
  color:#Cor da Fonte Quando o Rato está sobre;
  background:#Cor Quando o Rato está Sobre;
  border-color:#Cor da Quando o Rato está sobre;
  }
#navebar li a.ativo {background-color:#Cor da Aba Ativa;}
#navebar li a {
      color: #Cor da Fonte da Aba;
    font-size: 14px; <- Diminuir ou Aumentar o tamanho da Fonte
    font-weight: bold;
    text-align: center;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
    background-color: #Cor da Aba Inativa;
    border-radius: 6px;
    padding: 10px 6px 10px;
    display: block;
  width:120px;
    border-width: 1px 1px 3px 1px;
    border-style: solid;
    border-color: rgba(0,0,0,0.16);
    box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
    -o-transition: background-color 0.5s;
  display:inline-block;
    transition: background-color 0.5s;
  }
    #navebar li a:hover {    background-color: #Cor Quando o Rato está Sobre;}

So alterar as partes onde deixei a explicaçao para que é que servia

RJUchiha
Nível 3

Masculino
Inscrito dia : 25/10/2015
Mensagens : 24
Pontos Ativos : 454

http://narutogamedicasbr.forumeiro.com/

Resolvido Re: Problemas com Exibição de Abas

Mensagem por Cloud' em Seg 2 Nov 2015 - 21:44

Ah, obrigado. Ajudou um pouco.

Podem fechar ^^

Cloud'
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 905
Pontos Ativos : 2485

http://fairytailcelestial.forumeiros.com https://www.facebook.com/liuquen.rodrigues

Resolvido Re: Problemas com Exibição de Abas

Mensagem por Fraise em Seg 2 Nov 2015 - 21:45

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".

Fraise
Super usuário

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4973
Pontos Ativos : 7158

http://ajuda.forumeiros.com/ https://twitter.com/@FraiseFdF

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum
Fórum dos Fóruns - Ajuda mútua para usuários forumeiros
on
Fórum grátis: interajuda aos usuários forumeiros. Criar e administrar um fórum. Descubra nossos guias, tutoriais e astúcias no suporte de Forumeiros.
Votações: 5