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


Meriteiro

Agosto de 2016



"Este membro destacou-se pela sua dedicação e pelo seu esforço.
Ao longo do último mês, demonstrou as suas capacidades gerais no FDF e, por isso, merece o nosso agradecimento."
Login

Esqueci minha senha

Últimos assuntos
» [PEDIDO] Ícone "Enquete"
Hoje à(s) 14:37 por GollD

» Como colocar ícone de nova mensagem em tópico
Hoje à(s) 14:27 por Cepheus

» Redução dos Ranks...
Hoje à(s) 14:15 por Cepheus

» [PEDIDO] Banner
Hoje à(s) 13:59 por idarkdg

» A Propaganda está no lugar errado
Hoje à(s) 5:01 por Bluue_Br

» Arma/Carro Preferido opção no perfil
Hoje à(s) 4:48 por while

» Personalizar visualização do perfil
Hoje à(s) 3:30 por while

Perdi minha senha!
Obter senha

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

Últimas sugestões
Parceiros Forumeiros
Os membros mais ativos da semana
while
 
Cream
 
Shek
 
Holkis
 
PrisoN†BreaK
 
IsmaelS.
 
Ana Leandro
 
Sennior
 
Cepheus
 
YouTube3
 

Quem está conectado
122 usuários online :: 3 usuários cadastrados, 2 Invisíveis e 117 Visitantes :: 2 Motores de busca

GollD, JrMAFiA, YouTube3

[ 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 : 2412

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 : 381

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 : 2412

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 : 381

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 : 2412

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 : 381

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 : 2412

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".


Bem-vindo ao fórum de suporte Forumeiros!
> Tenha conhecimento do regulamento do setor de suporte.
> Conheça a staff e suas diretrizes.
> Antes de perguntar, use a busca.
> Confira a lista de tutoriais.
> MP apenas para assuntos importantes!


Fraise
Ajudeiro
Ajudeiro

Masculino
Inscrito dia : 26/06/2015
Mensagens : 4953
Pontos Ativos : 7057

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