• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Closed Issue with tabs

Ayama

Ayama

Enthusiast
So I'm currently playing around with tabs, and I can't seem to get them to show up one next to the other (like tabs should be) instead of one on top of the other :/ Does anyone know what I'm missing? Here's what I have so far:

Code: 
[nobr]
[class=tabs]
box-shadow: 0px 0px 5px #000088;
box-sizing: border-box;
border-style: solid;
border-radius: 2px;
border-color: #000000;
margin: 10px auto;
width: 200px;
[/class]

[class=tab]
padding: 5px 0;
box-sizing: border-box;
border-style: solid;
border-radius: 2px;
border-color: #ba4a00;
[/class]

[class name=tab state=hover]
background-color: #d0d3d4;
[/class]

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} Tab1) (show tabsContentTab1)
if (eq ${currentTab} Tab2) (show tabsContentTab2)
[/script]

[div class=tabs][div class=tab style="color: #82e0aa;"]Tab1[/div][div class=tab style="color: #d7bde2;"]Tab2[/div][/div]
[div class="tabsContent tabsContentTab1"]Tab1 contents.[/div]
[div class="tabsContent tabsContentTab2"]Tab2 contents.[/div]
[/nobr]
 
Alteras said:
You can do a display: inline-block; for the tabs.
Click to expand...
Thank you very much- I will try that.
I've been going through your tab generator code and also the feverdreams thread and the snippets thread, so hopefully I'm starting to get the hang of this!
(Though honestly I expect I'll get stuck again down the line and end up posting another issue xD )
You guys are so great with all this- it's so cool to have coding experts around who can help you learn this stuff and figure things out! ^^

Edit: And dangit that did not work! >< -tries some more-
 
Last edited:
Alteras said:
You can do a display: inline-block; for the tabs.
Click to expand...
Okay, so I rewrote the code and now, of course, it works even less than before xD
Essentially, I wanted something where the contents of each tab would be hidden unless the tab is clicked on (so kind of like a tab/spoiler hybrid).
And then I tried to format things so that each tab would look different depending on whether it was unselected, hovered over, clicked on, or selected.
And of course the issue remains that they're still one on top of the other instead of next to each other xD
Would you mind taking a look and seeing if you're spotting any obvious novice mistakes on my part?

Code: 
[nobr]
[class=tabs]
margin: 10px auto;
[/class]

[class=tab]
text-align: center;
[/class]

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} Ayaki) (show tabsContentAyaki)
if (eq ${currentTab} Itsuya) (show tabsContentItsuya)
[/script]

[div class=tabs]
    
[div class=tab style="border-style: solid; border-radius: 2px; border-color: #283747; background-color: #515a5a; font-size: 20px; color: #bfc9ca;" class="Tab1"]Tab1[/div]

    [class name=Tab1 state=hover]
    border-style: solid;
    border-radius: 2px;
    border-color: #283747;
    background-color: #bfc9ca;
    font-size: 20px;
    color: #515a5a;
    [/class]

    [class name=Tab1 state=click]
    border-style: solid;
    border-radius: 5px;
    border-color: #283747;
    background-color: #bfc9ca;
    font-size: 25px;
    font-weight: bold;
    color: #515a5a;
    [/class]

    [class name=Tab1 state=selected]
    border-style: solid;
    border-radius: 2px;
    border-color: #283747;
    font-size: 20px;
    color: #bfc9ca;
    [/class]

[/div]

[div class=tabs]

[div class=tab style="border-style: solid; border-radius: 2px; border-color: #1b2631; background-color: #a9cce3; font-size: 20px; color: #bb8fce;" class="Tab2"]Tab2[/div]

    [class name=Tab2 state=hover]
    border-style: solid;
    border-radius: 2px;
    border-color: #1b2631;
    background-color: #bb8fce;
    font-size: 20px;
    color: #a9cce3;
    [/class]

    [class name=Tab2 state=click]
    border-style: solid;
    border-radius: 5px;
    border-color: #1b2631;
    background-color: #bb8fce;
    font-size: 25px;
    font-weight: bold;
    color: #a9cce3;
    [/class]

    [class name=Tab2 state=selected]
    border-style: solid;
    border-radius: 2px;
    border-color: #1b2631;
    font-size: 20px;
    color: #bb8fce;
    [/class]

[/div]

[div class="tabsContent tabsContentTab1"]Tab1 contents.[/div]
[div class="tabsContent tabsContentTab2"]Tab2 contents.[/div]

[/nobr]
 
[class=tabs] margin: 10px auto; [/class] [class=tab] text-align: center; display: inline-block; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} Ayaki) (show tabsContentAyaki) if (eq ${currentTab} Itsuya) (show tabsContentItsuya) [/script] [div class=tabs] [div class=tab style="border-style: solid; border-radius: 2px; border-color: #283747; background-color: #515a5a; font-size: 20px; color: #bfc9ca; " class="tab tab1"]Ayaki[/div] [class name=tab1 state=hover] border-style: solid; border-radius: 2px; border-color: #283747; background-color: #bfc9ca; font-size: 20px; color: #515a5a; [/class] [class name=tab1 state=click] border-style: solid; border-radius: 5px; border-color: #283747; background-color: #bfc9ca; font-size: 25px; font-weight: bold; color: #515a5a; [/class] [class name=tab1 state=selected] border-style: solid; border-radius: 2px; border-color: #283747; font-size: 20px; color: #bfc9ca; [/class] [div class=tab style="border-style: solid; border-radius: 2px; border-color: #1b2631; background-color: #a9cce3; font-size: 20px; color: #bb8fce;" class="tab tab2"]Itsuya[/div] [class name=tab2 state=hover] border-style: solid; border-radius: 2px; border-color: #1b2631; background-color: #bb8fce; font-size: 20px; color: #a9cce3; [/class] [class name=tab2 state=click] border-style: solid; border-radius: 5px; border-color: #1b2631; background-color: #bb8fce; font-size: 25px; font-weight: bold; color: #a9cce3; [/class] [class name=tab2 state=selected] border-style: solid; border-radius: 2px; border-color: #1b2631; font-size: 20px; color: #bb8fce; [/class] [/div] [div class="tabsContent tabsContentAyaki" style="display: none;"]Tab1 contents.[/div] [div class="tabsContent tabsContentItsuya" style="display: none;"]Tab2 contents.[/div]


is this what you mean?


i tried fixing it up a bit. essentially what i did:
​
changed the tabsContent names ​
​

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} Ayaki) (show tabsContentAyaki)
if (eq ${currentTab} Itsuya) (show tabsContentItsuya)
[/script]

so you've written tabsContentAyaki here but in the code below you've written [div class="tabsContent tabsContentTab1"]Tab1 contents.[/div] the part after the first tabsContent needs to match, so i've changed it to: [div class="tabsContent tabsContentAyaki" style="display: none;"]Tab1 contents.[/div]



changed the tab names​

i don't know if my lingo is right but it'll hopefully help you understand. essentially, you used this as like the parent class.

[class=tab]
text-align: center; display: inline-block;
[/class]

and then you made your first tab

[div class=tab style="border-style: solid; border-radius: 2px; border-color: #283747; background-color: #515a5a; font-size: 20px; color: #bfc9ca;" class="Tab1"]Tab1[/div]

now you named your first tab Tab1 which doesn't match the parent div. so what you have to do is write tab tab1. and the same for the second tab, it goes tab tab2. think of them as like the sub-classes.

also, your tab names here

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} Ayaki) (show tabsContentAyaki)
if (eq ${currentTab} Itsuya) (show tabsContentItsuya)
[/script]

are ayaki and itsuya (after {currentTab}) yet in your 'tab tab1' classes, you've named them Tab1 and Tab2. they have to match, so i went ahead and changed that as well.

i hope some of that made sense xD

OH i also added display: inline-block to the tabs class to put them side by side.

Code: 
[nobr]
[class=tabs]
margin: 10px auto;
[/class]

[class=tab]
text-align: center; display: inline-block;
[/class]

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} Ayaki) (show tabsContentAyaki)
if (eq ${currentTab} Itsuya) (show tabsContentItsuya)
[/script]

[div class=tabs]
 
[div class=tab style="border-style: solid; border-radius: 2px; border-color: #283747; background-color: #515a5a; font-size: 20px; color: #bfc9ca; " class="tab tab1"]Ayaki[/div]

    [class name=tab1 state=hover]
    border-style: solid;
    border-radius: 2px;
    border-color: #283747;
    background-color: #bfc9ca;
    font-size: 20px;
    color: #515a5a;
    [/class]

    [class name=tab1 state=click]
    border-style: solid;
    border-radius: 5px;
    border-color: #283747;
    background-color: #bfc9ca;
    font-size: 25px;
    font-weight: bold;
    color: #515a5a;
    [/class]

    [class name=tab1 state=selected]
    border-style: solid;
    border-radius: 2px;
    border-color: #283747;
    font-size: 20px;
    color: #bfc9ca;
    [/class]

[div class=tab style="border-style: solid; border-radius: 2px; border-color: #1b2631; background-color: #a9cce3; font-size: 20px; color: #bb8fce;" class="tab tab2"]Itsuya[/div]

    [class name=tab2 state=hover]
    border-style: solid;
    border-radius: 2px;
    border-color: #1b2631;
    background-color: #bb8fce;
    font-size: 20px;
    color: #a9cce3;
    [/class]

    [class name=tab2 state=click]
    border-style: solid;
    border-radius: 5px;
    border-color: #1b2631;
    background-color: #bb8fce;
    font-size: 25px;
    font-weight: bold;
    color: #a9cce3;
    [/class]

    [class name=tab2 state=selected]
    border-style: solid;
    border-radius: 2px;
    border-color: #1b2631;
    font-size: 20px;
    color: #bb8fce;
    [/class]

[/div]

[div class="tabsContent tabsContentAyaki" style="display: none;"]Tab1 contents.[/div]
[div class="tabsContent tabsContentItsuya" style="display: none;"]Tab2 contents.[/div]

[/nobr]
 
christy christy

Thank you very much for your help!

So the side by side issue is now fixed, but when I tried to adjust my code to match yours, the function that makes the tab contents appear ended up breaking. The only thing I changed was having all of my names be Tab1 and Tab2 (instead of Ayaki and Itsuya), to be consistent, but I must have done it wrong somehow. Do you think you'd be able to spot my mistake?

Code: 
[nobr]


[class=tabs]

margin: 10px auto;

[/class]


[class=tab]

text-align: center;

display: inline-block;

[/class]


[script class=tab on=click]

hide tabsContent

set currentTab (getText)

if (eq ${currentTab} Tab1) (show tabsContentTab1)

if (eq ${currentTab} Tab2) (show tabsContentTab1)

[/script]


[div class=tabs]

 

[div class=tab style="border-style: solid; border-radius: 2px; border-color: #283747; background-color: #515a5a; font-size: 20px; color: #bfc9ca; " class="tab Tab1"]Tab 1[/div]


    [class name=Tab1 state=hover]

    border-style: solid;

    border-radius: 2px;

    border-color: #283747;

    background-color: #bfc9ca;

    font-size: 20px;

    color: #515a5a;

    [/class]


    [class name=Tab1 state=click]

    border-style: solid;

    border-radius: 5px;

    border-color: #283747;

    background-color: #bfc9ca;

    font-size: 25px;

    font-weight: bold;

    color: #515a5a;

    [/class]


    [class name=Tab1 state=selected]

    border-style: solid;

    border-radius: 2px;

    border-color: #283747;

    font-size: 20px;

    color: #bfc9ca;

    [/class]


[div class=tab style="border-style: solid; border-radius: 2px; border-color: #1b2631; background-color: #a9cce3; font-size: 20px; color: #bb8fce;" class="tab Tab2"]Tab 2[/div]


    [class name=Tab2 state=hover]

    border-style: solid;

    border-radius: 2px;

    border-color: #1b2631;

    background-color: #bb8fce;

    font-size: 20px;

    color: #a9cce3;

    [/class]


    [class name=Tab2 state=click]

    border-style: solid;

    border-radius: 5px;

    border-color: #1b2631;

    background-color: #bb8fce;

    font-size: 25px;

    font-weight: bold;

    color: #a9cce3;

    [/class]


    [class name=Tab2 state=selected]

    border-style: solid;

    border-radius: 2px;

    border-color: #1b2631;

    font-size: 20px;

    color: #bb8fce;

    [/class]


[/div]


[div class="tabsContent tabsContentTab1" style="display: none;"]Tab 1 contents.[/div]

[div class="tabsContent tabsContentTab2" style="display: none;"]Tab 2 contents.[/div]


[/nobr]
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

JCKane
Help Tabs messing up due to too much text?
Replies
12
Views
91
JCKane
JCKane
Alteras
Resource Text Templater — a plain text template to form field generator
Replies
3
Views
211
A Murder Of Corviknight
A Murder Of Corviknight
Back
Top