Sistema de Abas

Relembrando a primeira mensagem :

Detalhes da questão

Endereço do fórum: www.tutorialdopw.com
Versão do fórum: Phpbb3

Descrição

Bom dia,

Como posso implementar este sistema de abas que existe no início do FdF?

Estranho... agora aqui tá normal, bom, você testou e alterou os valores, como eu disse?

@MateusAnjosV

Está normal, porque eu comentei essa ultima parte do CSS! =D

E sim, eu tentei alterar os valores, mas ficou na mesma.

@Edit

Descomentei o CSS, mas aparentemente não deu resultado.

Só para constar, mudei o nome no CSS de "tabelafraise" para "sistemadeabas" e dentro do código do tópico, eu renomeei as divs (tmb fiz isso no CSS).

É que você o personalizou... faça o seguinte, como entende um pouco de HTML (pelo que notei), atribua um id do seu gosto para os quatro conteúdos das abas.
E utilize esse CSS:

Código:

idgosto1 {margin-top: -10px}
idgosto2 {position: relative;top: -28px}
idgosto3 { position: relative;top: -48px !important}
idgosto4 { position: relative;top: -68px !important}

Lembre-se de alterar o código acima. Caso não consiga, forneça-o, ok?

@MateusAnjosV

Vamos lá:

CSS:

Código:


/* Sistema de Abas - Fraise FdF */
#sistemadeabas {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
}
.menu {
margin: 1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #000033;
background-color: #FFFFFF;
border-right: 1px solid #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
padding: 5px;
cursor: hand;
text-align: center;
margin-top: 0px;
}
.menu-sel {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
color: #0000FF;
background-color: #FFFAFA;
border-right: 1px solid #000000;
border-top: 2px solid #000000;
padding: 5px;
cursor: hand;
margin: 0px;
margin-top: 0px;
}
.tb-conteudo {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
margin: 0px;
}
.conteudo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #white !important;
background-color: ;
padding: 5px;
margin:0px;
width:500px;
}
#div_Aba0 {margin-top: -10px} /* suba o 10 para subir o primeiro */
#div_Aba1 {position: relative;top: -28px} /* suba o 28 para subir o segundo, etc */
#div_Aba2 { position: relative;top: -48px !important}
#div_Aba3 { position: relative;top: -68px !important}
#div_Aba4 { position: relative;top: -88px !important}
#div_Aba5 { position: relative;top: -108px !important}
#div_Aba6 { position: relative;top: -128px !important}
#div_Aba7 { position: relative;top: -148px !important}
#div_Aba8 { position: relative;top: -168px !important}
#div_Aba9 { position: relative;top: -188px !important}

JS:

Código:

$(document).ready(function() {
    
    $(".menu[data-tab]").click(function() {
        
        // reseta as propriedades das outras abas      
        $(".menu[data-tab]").each(function() {
            esconder($(this));
        });
        
        // muda as propriedades da aba atual
        exibir($(this));
    });
});

function esconder(menu) {
    mudarPropriedades(menu, "none", "white");
}

function exibir(menu) {
    mudarPropriedades(menu, "block", "silver");
}

function mudarPropriedades(menu, display, corDeFundo) {
    $(menu).css("background-color", corDeFundo);
    
    var aba = $(menu).attr("data-tab");
    $("#" + aba).css("display", display);
}

Acho que aqui não alterei nada...

Aqui um exemplo com 4 abas:

http://www.tutorialdoca.com/t1746-teste-sistema-de-abas#2042

Aqui um exemplo com 9 abas:

http://www.tutorialdopw.com/t1167-teste-sistema-de-abas#3529

Entendi.... vamos lá, vou tentar explicar, ok? Isso vai ser muito relativo a tamanho, então não da pra automatizar... Cada vez que for postar terá de configurar:

Código:


.conteudo:nth-of-type(10) {position: relative !important;top: -10px !important}

Nesse caso, o 10 = 9, ele afetará a aba 9.
Vamos lá, procure por 10 no código (não é -10, é 10) e entenda que ele é o que define o elemento que será alterado. Ou seja, se desejar alterar a aba 1 você vai adicionar um número somado a ela, então, se for alterar a aba 1, escreva 2, se for alterar a aba 3, escreva 4.

---

Agora procure por -10, isso é quanto cada um vai subir, entendeu? Testei aqui e foi de boa, vamos ver se consegue ai.

Desculpe a demora para responder, não parei muito em casa.

@Topic

Não entendi muito bem onde eu deva alterar esse código? No CSS? Mas se eu terei de alterar toda vez, uma alteração não vai influenciar nas outras?

E outra coisa, você poderia me "mastigar" mais o que você quis dizer? Ficou confuso.

Um exemplo mais "mastigado":

Spoiler:

uahauhauha

Essa parte eu entendi camarada.

Foi essa que não:

MateusAnjosV escreveu:Nesse caso, o 10 = 9, ele afetará a aba 9.
Vamos lá, procure por 10 no código (não é -10, é 10) e entenda que ele é o que define o elemento que será alterado. Ou seja, se desejar alterar a aba 1 você vai adicionar um número somado a ela, então, se for alterar a aba 1, escreva 2, se for alterar a aba 3, escreva 4.

ZombieW escreveu:uahauhauha

Essa parte eu entendi camarada.

Foi essa que não:

MateusAnjosV escreveu:Nesse caso, o 10 = 9, ele afetará a aba 9.
Vamos lá, procure por 10 no código (não é -10, é 10) e entenda que ele é o que define o elemento que será alterado. Ou seja, se desejar alterar a aba 1 você vai adicionar um número somado a ela, então, se for alterar a aba 1, escreva 2, se for alterar a aba 3, escreva 4.

Olá,

A numeração em códigos se comporta de maneira diferente do que estamos acostumados. Ela começa sempre no 0, embora ela seja a 1. Ou seja, se você quiser editar a primeira aba, terá de procurar a correspondencia 0, e não a 1. Se quiser editar a aba 3, o número dela no código será 2 e assim por diante.

Att.

Agradeço toda a ajuda, mas vou descontinuar com esse sistema, ele está bugando alguns JS do fórum.

Sendo assim, obrigado a todos pela a ajuda.

@MateusAnjosV

Vai virar Ajudeiro? Deveria! =D

Não deve faltar muito.

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para "Questões resolvidas".