Problemas com Exibição de Abas

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/

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

Spoiler:

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/

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?

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?
Só mais isso para eu dar resolvido. ^^

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

Ah, obrigado. Ajudou um pouco.

Podem fechar ^^