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
Login

Esqueci minha senha

Últimos assuntos
Perdi minha senha!
Você precisa recuperar sua senha?
Clique aqui
Parceiros Forumeiros
Os membros mais ativos da semana
Kyo Panda
 
Shek Crowley
 
Fou-Lu
 
while
 
vitorsali
 
fiapinho
 
iScroll
 
Kyou
 
Smoke.xX
 
Neimasinho
 

Quem está conectado
292 usuários online :: 9 usuários cadastrados, 1 Invisível e 282 Visitantes :: 1 Motor de busca

CharlesIE1H, E.Jesus, Fou-Lu, Gamerxss, iPlayer, IsmaelS., Luiz~, TZero, William_iHarDz

[ 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)

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 908
Pontos Ativos : 2568

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



Shek Crowley
Admineiro
Admineiro

Masculino
Inscrito dia : 11/04/2009
Mensagens : 15588
Pontos Ativos : 23005

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

Wamki
Usuário avançado

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

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/

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 908
Pontos Ativos : 2568

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

Wamki
Usuário avançado

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

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. :/

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 908
Pontos Ativos : 2568

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

Wamki
Usuário avançado

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

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

ShaDownS
Usuário destaque

Masculino
Inscrito dia : 09/03/2014
Mensagens : 908
Pontos Ativos : 2568

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