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
Conectar-se

Esqueci minha senha

Últimos assuntos
» Fichas e personagem e :
Hoje à(s) 4:22 por Claudio Arthur

» Banner got
Hoje à(s) 3:32 por Neji

» Utilização de Templates nas Páginas
Hoje à(s) 3:10 por ZombieW

» Canais ao lado
Hoje à(s) 2:46 por Froozen

» Ranks PMS + Banner
Hoje à(s) 1:09 por Tiger

» Personalizar Menu
Hoje à(s) 0:26 por YouTube3

» como ativo a opção contribuição no rodapé
Ontem à(s) 23:19 por joaopaulo98

Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Tiger
 
YouTube3
 
Froozen
 
ZombieW
 
Neji
 
Claudio Arthur
 

Quem está conectado
152 usuários online :: 2 usuários cadastrados, 1 Invisível e 149 Visitantes :: 2 Motores de busca

Holkis, Neji

[ Ver toda a lista ]


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

Bug na exibição das abas em HTML

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

Resolvido Bug na exibição das abas em HTML

Mensagem por ShaDownS em Ter 3 Nov 2015 - 10:49

Detalhes da questão


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

Descrição


Olá amigos,

Eu obtive um problema com meu codigo:
Código:
<style>div.aba {
  background: #FFF;
  text-align: left;
  padding: 10px;
  border: 2px solid #DDD;;
  border-radius: 2px;
  font-family: Arial;
  font-size: 12px;
  }

#navebar {
  font: bold 15px Verdana;
  margin: 0;
  padding: 3px;
  }

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

#navebar li a {
    padding: 3px;
    border-top: 2px solid darkgray;
    border-right: 2px solid darkgray;
    border-left: 2px solid darkgray;
    margin-bottom: -5px;
    background: #000;
    color: #FFF;
    width: 160px;
    line-height: 18px;
    font-size: 15px;
    font-weight: bold;
    font-family: Trebuchet MS;
    text-align: left;
    background-color: #000;
    padding: 3px;
    display: block;
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    -o-transition: background-color 1s;
    transition: background-color 1s;
  }

#navebar li a:hover {
  color: #000;
  background: #DDD;
  border-color: #000;
  }

#navebar li a.ativo {
background-color: #DDD;
color: #000;
}
    #navebar li a:hover {
background-color: #DDD;
} </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></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>

Poderiam me informar o código da exibição de abas? Acho que exclui algo important, pois as abas não estão uma ao lado da outra.

Obrigado. Abraços o/


Última edição por Cloud' em Sex 13 Nov 2015 - 1:37, editado 1 vez(es)
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 907
Pontos Ativos : 1484

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

Resolvido Re: Bug na exibição das abas em HTML

Mensagem por Shek Crowley em Qua 4 Nov 2015 - 13:12

Olá e bom dia.

É só remover o display: block; do seu navebar li a! Feliz

Atenciosamente,
Shek King


ShekAdmineiro - Fórum dos Fóruns
avatar

Shek Crowley
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 16070
Pontos Ativos : 20655

http://www.shiftactif.com https://www.facebook.com/shek.crowley https://twitter.com/shek_forumactif

Resolvido Re: Bug na exibição das abas em HTML

Mensagem por Wamki em Qua 4 Nov 2015 - 15:01

Código:
<style>div.aba {
  background: #FFF;
  text-align: left;
  padding: 10px;
  border: 2px solid #DDD;;
  border-radius: 2px;
  font-family: Arial;
  font-size: 12px;
  }

#navebar {
  font: bold 15px Verdana;
  margin: 0;
  padding: 3px;
  }

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

#navebar li a {
    padding: 3px;
    border-top: 2px solid darkgray;
    border-right: 2px solid darkgray;
    border-left: 2px solid darkgray;
    margin-bottom: -5px;
    background: #000;
    color: #FFF;
    width: 160px;
    line-height: 18px;
    font-size: 15px;
    font-weight: bold;
    font-family: Trebuchet MS;
    text-align: left;
    background-color: #000;
    padding: 3px;
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    -o-transition: background-color 1s;
    transition: background-color 1s;
  }

#navebar li a:hover {
  color: #000;
  background: #DDD;
  border-color: #000;
  }

#navebar li a.ativo {
background-color: #DDD;
color: #000;
}
    #navebar li a:hover {
background-color: #DDD;
} </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></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>

Altere pra este código e boa tarde.
CT
avatar

Wamki
Usuário avançado

Masculino
Inscrito dia : 22/10/2015
Mensagens : 332
Pontos Ativos : 450

http://infostyle.forumbrasil.net

Resolvido Re: Bug na exibição das abas em HTML

Mensagem por ShaDownS em Sex 6 Nov 2015 - 15:54

Oi,

@CT, seu código fez com que ficasse grande demais oo texto das abas. Eu gostaria de deixar 10px o tamanho desse texto para as abas diminuírem.

Abraços o/
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 907
Pontos Ativos : 1484

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

Resolvido Re: Bug na exibição das abas em HTML

Mensagem por Wamki em Sex 6 Nov 2015 - 15:58

Altere pra este senhor,
Código:
<style>div.aba {
  background: #FFF;
  text-align: left;
  padding: 10px;
  border: 2px solid #DDD;;
  border-radius: 2px;
  font-family: Arial; 
  font-size: 12px;
  }

#navebar {
  font: bold 10px Verdana;
  margin: 0;
  padding: 3px;
  }

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

#navebar li a {
    padding: 3px;
    border-top: 2px solid darkgray;
    border-right: 2px solid darkgray; 
    border-left: 2px solid darkgray;
    margin-bottom: -5px;
    background: #000;
    color: #FFF;
    width: 160px;
    line-height: 18px;
    font-size: 10px; 
    font-weight: bold;
    font-family: Trebuchet MS; 
    text-align: left;
    background-color: #000;
    padding: 3px;
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    -o-transition: background-color 1s;
    transition: background-color 1s;
  }

#navebar li a:hover {
  color: #000;
  background: #DDD;
  border-color: #000;
  }

#navebar li a.ativo {
background-color: #DDD;
color: #000;
}
    #navebar li a:hover {
background-color: #DDD;
} </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></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>

Até mais.
CT  Rose
avatar

Wamki
Usuário avançado

Masculino
Inscrito dia : 22/10/2015
Mensagens : 332
Pontos Ativos : 450

http://infostyle.forumbrasil.net

Resolvido Re: Bug na exibição das abas em HTML

Mensagem por ShaDownS em Sex 6 Nov 2015 - 15:58

Não resultou. :/
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 907
Pontos Ativos : 1484

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

Resolvido Re: Bug na exibição das abas em HTML

Mensagem por Wamki em Sex 6 Nov 2015 - 15:59

Perdão meu  Ops...
Altere pra este,
Código:
<style>div.aba {
  background: #FFF;
  text-align: left;
  padding: 10px;
  border: 2px solid #DDD;;
  border-radius: 2px;
  font-family: Arial; 
  font-size: 10px;
  }

#navebar {
  font: bold 10px Verdana;
  margin: 0;
  padding: 3px;
  }

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

#navebar li a {
    padding: 3px;
    border-top: 2px solid darkgray;
    border-right: 2px solid darkgray; 
    border-left: 2px solid darkgray;
    margin-bottom: -5px;
    background: #000;
    color: #FFF;
    width: 160px;
    line-height: 18px;
    font-size: 10px; 
    font-weight: bold;
    font-family: Trebuchet MS; 
    text-align: left;
    background-color: #000;
    padding: 3px;
    -webkit-transition: background-color 1s;
    -moz-transition: background-color 1s;
    -o-transition: background-color 1s;
    transition: background-color 1s;
  }

#navebar li a:hover {
  color: #000;
  background: #DDD;
  border-color: #000;
  }

#navebar li a.ativo {
background-color: #DDD;
color: #000;
}
    #navebar li a:hover {
background-color: #DDD;
} </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></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>
Até mais.
CT  Rose
avatar

Wamki
Usuário avançado

Masculino
Inscrito dia : 22/10/2015
Mensagens : 332
Pontos Ativos : 450

http://infostyle.forumbrasil.net

Resolvido Re: Bug na exibição das abas em HTML

Mensagem por ShaDownS em Sex 6 Nov 2015 - 16:01

Resultou!  Muito feliz

Obrigado. Podem fechar Positivo
avatar

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 907
Pontos Ativos : 1484

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

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