Help class based tabs

[myfanwy]

so, hey hi again i'm having an issue with adding more tabs to the class tabs and i'm p sure the fix is simple and i'm just not seeing it but any help would be appreciated. i'm using vertical tabs, as a heads up.

Spoiler

[nobr]
[class=tabs]
float: left;
background-color: #FFFFFF;
border: 1px solid transparent;
border-radius: 2px;
box-shadow: 0px 0px 1px #FFFFFF;
box-sizing: border-box;
color: black;
font-family: Cinzel;
font-size: 13px;
font-weight: initial;
line-height: 1;
margin: 20px auto;
min-width: 250px;
text-align: center;
width: 30%;
height: 300px;
position: relative;
top: 0px;
margin-left: 0px;
[/class]

[class=tab]
box-sizing: border-box;
cursor: pointer;
display: block;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
[/class]

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

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} hades) (show tabsContenthades)
if (eq ${currentTab} hecate) (show tabsContenthecate)
if (eq ${currentTab} hephaestus) (show tabsContenthephaestus)
if (eq ${currentTab} poseidon) (show tabsContentposeidon)
if (eq ${currentTab} apollo) (show tabsContentapollo)
if (eq ${currentTab} zeus) (show tabsContentzeus)
[/script]

[script=tab]
hide tabsContent
show tabsContenthades
[/script]

[div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]hades[/div][div class=tab]hecate[/div][div]hephaestus[/div][div]poseidon[/div][div]apollo[/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 100%;"]zeus[/div][/div]

[div class="tabsContent tabsContenthades"][div=height: 100%; background: transparent; position: relative; margin: auto; width: 500px; top: 40px; margin-left: 320px;]a[/div][/div]

[div class="tabsContent tabsContenthecate"][div=height: 100%; background: transparent; position: relative; margin: auto; width: 500px; top: 40px; margin-left: 320px;]b[/div][/div]

[div class="tabsContent tabsContenthephaestus"][div=height: 100%; background: transparent; position: relative; margin: auto; width: 500px; top: 40px; margin-left: 320px;]c[/div][/div][/nobr]

[div class="tabsContent tabsContentposeidon"][div=height: 100%; background: transparent; position: relative; margin: auto; width: 500px; top: 40px; margin-left: 320px;]a[/div][/div]

[div class="tabsContent tabsContentapollo"][div=height: 100%; background: transparent; position: relative; margin: auto; width: 500px; top: 40px; margin-left: 320px;]a[/div][/div]

[div class="tabsContent tabsContentzeus"][div=height: 100%; background: transparent; position: relative; margin: auto; width: 500px; top: 40px; margin-left: 320px;]a[/div][/div]

 

[Alteras]

you forgot to add the classes to [div]hephaestus[/div][div]poseidon[/div][div]apollo[/div]

 

[myfanwy]

rip a dip thank you.
it has been a day

 

[myfanwy]

hey hi sorry can someone help with a somewhat tricky way of using columns?
i don't want the large space in between the overview and columns but my "hack" for moving them surprisingly doesn't work.

Spoiler

[centerblock=80][font=Cormorant Garamond][size=6][center]elysium[/center][/size][/font]
[font=Crimson Text][size=3]Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facer.[/size][/font][/centerblock]
[centerblock=70][nobr]
[class=tabs]
float: left;
background-color: #FFFFFF;
border: 1px solid transparent;
border-radius: 2px;
box-shadow: 0px 0px 1px #FFFFFF;
box-sizing: border-box;
color: black;
font-family: Cinzel;
font-size: 13px;
font-weight: initial;
line-height: 1;
margin: 20px auto;
min-width: 250px;
text-align: center;
width: 30%;
height: 300px;
position: relative;
top: 0px;
margin-left: -120px;
[/class]

[class=tab]
box-sizing: border-box;
cursor: pointer;
display: block;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
[/class]

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

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} i) (show tabsContenti)
if (eq ${currentTab} ii) (show tabsContentii)
if (eq ${currentTab} iii) (show tabsContentiii)
if (eq ${currentTab} vi) (show tabsContentvi)
if (eq ${currentTab} v) (show tabsContentv)
if (eq ${currentTab} iv) (show tabsContentiv)
[/script]

[script=tab]
hide tabsContent
show tabsContenti
[/script]

[div class=tabs][div class=tab style="border-top-left-radius: 5px; border-bottom-left-radius: 5px;"]i[/div][div class=tab]ii[/div][div class=tab]iii[/div][div class=tab]vi[/div][div class=tab]v[/div][div class=tab style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 100%;"]iv[/div][/div]

[div class="tabsContent tabsContenti"][div=height: 100%; background: lightgray; position: relative; margin: auto; width: 660px; top: 40px; margin-left: 120px;][center][font=Cormorant Garamond][size=8]Son of Apollo[/size][br][/br]
[size=3]Han Sanghyuk[/size][/font][/center][br][/br]
[div=float: right; background-color: transparent; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 150px; width: 250px; overflow: hidden; position: relative; margin-right: 25px;][img]https://78.media.tumblr.com/957fe5ab6c04a3ae2e601e1ebea6d42a/tumblr_p7wz08ArOd1x7cezzo1_400.gif[/img][/div][div=position: relative; width: 300px; height: 100px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: hidden; font-align: justify;][bg=lightblue][font=Crimson Text][size=3][row]
[column=span4]age[br][/br]
gender[br][/br]
sexuality[br][/br]
birth date[br][/br]
horoscope[br][/br][/column]
[column=span4]height[br][/br]
weight[br][/br]
build[br][/br]
eye colour[br][/br]
hair colour[/column][/row][/size][/font][/bg][/div][/div][br][/br]
[center][font=Dancing Script]"Quote here"[/font][/center][font=Cormorant Garamond]overview[/font][div=position: relative; width: 100%; height: 120px; overflow: hidden; padding: 0px; top: -90px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][bg=lightgreen]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[/bg][/div][/div][row]
[column=span4][font=Cormorant Garamond]history[/font]
[div=position: relative; width: 100%; height: 120px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;]info[/div][/div][/column]
[column=span4][font=Cormorant Garamond]persona[/font]
[div=position: relative; width: 100%; height: 120px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;]info[/div][/div][/column]
[/row][/div][/div]

[div class="tabsContent tabsContentii"][div=height: 100%; background: transparent; position: relative; margin: auto; width: 660px; top: 40px; margin-left: 120px;][center][font=Cormorant Garamond][size=5]Son of Hades[/size][br][/br]
[size=2]Lee Jaehwan[/size][/font][/center][br][/br]
[div=float: right; background-color: transparent; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 150px; width: 250px; overflow: hidden; position: relative; margin-right: 25px;][img]https://78.media.tumblr.com/2c6634943265dd8f9f13f8ca35666194/tumblr_p7wz08ArOd1x7cezzo4_400.gif[/img][/div]
b[/div][/div]

[div class="tabsContent tabsContentiii"][div=height: 100%; background: transparent; position: relative; margin: auto; width: 660px; top: 40px; margin-left: 120px;][center][font=Cormorant Garamond][size=5]Son of Hecate[/size][br][/br]
[size=2]Lee Hongbin[/size][/font][/center][br][/br]
[div=float: right; background-color: transparent; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 150px; width: 250px; overflow: hidden; position: relative; margin-right: 25px;][img]https://78.media.tumblr.com/db35e022156b6661bab5321a2d4a5f93/tumblr_p7wz08ArOd1x7cezzo5_400.gif[/img][/div]
c[/div][/div]

[div class="tabsContent tabsContentvi"][div=height: 100%; background: transparent; position: relative; margin: auto; width: 660px; top: 40px; margin-left: 120px;][center][font=Cormorant Garamond][size=5]Son of Hephaestus[/size][br][/br]
[size=2]Kim Wonsik[/size][/font][/center][br][/br]
[div=float: right; background-color: transparent; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 150px; width: 250px; overflow: hidden; position: relative; margin-right: 25px;][img]https://78.media.tumblr.com/a65f0cca415e7aa55744df09b75c2d87/tumblr_p7wz08ArOd1x7cezzo2_400.gif[/img][/div]
d[/div][/div]

[div class="tabsContent tabsContentv"][div=height: 100%; background: transparent; position: relative; margin: auto; width: 660px; top: 40px; margin-left: 120px;][center][font=Cormorant Garamond][size=5]Son of Poseidon[/size][br][/br]
[size=2]Cha Hakyeon[/size][/font][/center][br][/br]
[div=float: right; background-color: transparent; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 150px; width: 250px; overflow: hidden; position: relative; margin-right: 25px;][img]https://78.media.tumblr.com/a5fdb2d304c4033cc55c8d5fd1a6d3cc/tumblr_p7wz08ArOd1x7cezzo3_400.gif[/img][/div]
e[/div][/div]

[div class="tabsContent tabsContentiv"][div=height: 100%; background: transparent; position: relative; margin: auto; width: 660px; top: 40px; margin-left: 120px;][center][font=Cormorant Garamond][size=5]Son of Zeus[/size][br][/br]
[size=2]Jung Taekwoon[/size][/font][/center][br][/br]
[div=float: right; background-color: transparent; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 150px; width: 250px; overflow: hidden; position: relative; margin-right: 25px;][img]https://78.media.tumblr.com/e5e74f18af5aaaff16fddbd03575b9c2/tumblr_p7wz08ArOd1x7cezzo6_400.gif[/img][/div]
f[/div][/div][/nobr][/centerblock]

 

[Alteras]

are talking about this part of the code?

[div=width: 100%; padding-right: 150px; height: 100%; overflow-y: hidden; font-align: justify;][bg=lightblue][font=Crimson Text][size=3][row]
[column=span4]age[br][/br]
gender[br][/br]
sexuality[br][/br]
birth date[br][/br]
horoscope[br][/br][/column]
[column=span4]height[br][/br]
weight[br][/br]
build[br][/br]
eye colour[br][/br]
hair colour[/column][/row][/size][/font][/bg][/div][/div][br][/br]
[center][font=Dancing Script]"Quote here"[/font][/center][font=Cormorant Garamond]overview[/font][div=position: relative; width: 100%; height: 120px; overflow: hidden; padding: 0px; top: -90px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][bg=lightgreen]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[/bg][/div][/div][row]

 

[myfanwy]

are talking about this part of the code?

[div=width: 100%; padding-right: 150px; height: 100%; overflow-y: hidden; font-align: justify;][bg=lightblue][font=Crimson Text][size=3][row]
[column=span4]age[br][/br]
gender[br][/br]
sexuality[br][/br]
birth date[br][/br]
horoscope[br][/br][/column]
[column=span4]height[br][/br]
weight[br][/br]
build[br][/br]
eye colour[br][/br]
hair colour[/column][/row][/size][/font][/bg][/div][/div][br][/br]
[center][font=Dancing Script]"Quote here"[/font][/center][font=Cormorant Garamond]overview[/font][div=position: relative; width: 100%; height: 120px; overflow: hidden; padding: 0px; top: -90px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][bg=lightgreen]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[/bg][/div][/div][row]

ah, yes. forgot to mention that part oops

 

[Alteras]

When you use a top: with a negative position, it doesn't adjust the layout position of the div, so it still thought that the div was 90px below where it is being displayed. All you needed was margin-bottom: -90px;.

[div class="tabsContent tabsContenti"][div=height: 100%; background: lightgray; position: relative; margin: auto; width: 660px; top: 40px; margin-left: 120px;][center][font=Cormorant Garamond][size=8]Son of Apollo[/size][br][/br]
[size=3]Han Sanghyuk[/size][/font][/center][br][/br]
[div=float: right; background-color: transparent; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 150px; width: 250px; overflow: hidden; position: relative; margin-right: 25px;][img]https://78.media.tumblr.com/957fe5ab6c04a3ae2e601e1ebea6d42a/tumblr_p7wz08ArOd1x7cezzo1_400.gif[/img][/div][div=position: relative; width: 300px; height: 100px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: hidden; font-align: justify;][bg=lightblue][font=Crimson Text][size=3][row]
[column=span4]age[br][/br]
gender[br][/br]
sexuality[br][/br]
birth date[br][/br]
horoscope[br][/br][/column]
[column=span4]height[br][/br]
weight[br][/br]
build[br][/br]
eye colour[br][/br]
hair colour[/column][/row][/size][/font][/bg][/div][/div][br][/br]
[center][font=Dancing Script]"Quote here"[/font][/center][font=Cormorant Garamond]overview[/font][div=position: relative; width: 100%; height: 120px; overflow: hidden; padding: 0px; top: -90px; margin-bottom: -90px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][bg=lightgreen]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[br][/br]info[/bg][/div][/div][row]
[column=span4][font=Cormorant Garamond]history[/font]
[div=position: relative; width: 100%; height: 120px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;]info[/div][/div][/column]
[column=span4][font=Cormorant Garamond]persona[/font]
[div=position: relative; width: 100%; height: 120px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;]info[/div][/div][/column]
[/row][/div][/div]