Help need help troubleshooting a div code

myfanwy · Jan 23, 2018

.

.
.
.
.
.
.
.
.
.

"Nickname"

"Name"
age | gender

History

infoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfo

Persona

infoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfo

Code:

[div=position: relative; width: 100%; height: 400px; overflow: hidden; padding: 0px;][row]
[column=span1][color=transparent].[/color][/column]
[column=span5][div=background-color: #0d1321; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 150px; width: 150px; overflow: hidden; position: relative; margin-left: 95px][/div][div=background-color: #818479; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 150px; width: 150px; overflow: hidden; position: relative; top: -10px; margin-left: 135px][/div][div=background-color: transparent; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 4px solid white; height:190px; width:190px; overflow: hidden; position: relative; margin-left: 90px; top: -250px;][div=background:url('https://78.media.tumblr.com/47a04d2f7f25b330929d36914a24a08f/tumblr_opr2trw3i91r7qnpao2_400.png');background-size:cover;color: #000000;padding:5px;][color=transparent].
.
.
.
.
.
.
.
.[/color][/div][/div]
[div=height: 20px; background: white; position: relative; margin: auto; top: 0px;width: 190px; pointer-events: none; top: -350px; margin-left: 94px;][center][font=Annie Use Your Telescope]"Nickname"[/font][/center][/div]
[div=height: 30px; background: #48D1CC; position: relative; margin: auto; top: 0px;width: 250px; pointer-events: none; top: -539px; margin-left: 245px;][right][font=Slabo 27px]"Name"
[size=2]age | gender[/size][/font][/right][/div]
[div=height: 100%; background: white; position: relative; margin: auto; width: 400px; pointer-events: none; top: -525px; margin-left: 300px;][row]
[column=span4][font=Raleway][right]History[/right][size=3][div=border-top: 1px solid #0d1321; border-bottom: 1px solid #48D1CC;][div=position: relative; width: 100%; height: 250px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;]infoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfo[/div][/div][/div][/size][/font][/column][column=span4][font=Raleway][right]Persona[/right][size=3][div=border-top: 1px solid #0d1321; border-bottom: 1px solid #48D1CC;][div=position: relative; width: 100%; height: 250px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;]infoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfoinfo[/div][/div][/div][/size][/font][/column][/row][/div][/column][/row][/div]

i need help getting the scrolls to work and it's actually frustrating not being able to figure it out.

vliamint · Jan 23, 2018

div=height: 100%; background: white; position: relative; margin: auto; width: 400px; pointer-events: none; top: -525px; margin-left: 300px;

The bolded part is what is stopping the scroll from working. It's just before the 'row' code.

myfanwy · Jan 23, 2018

wonhae said:
div=height: 100%; background: white; position: relative; margin: auto; width: 400px; pointer-events: none; top: -525px; margin-left: 300px;

The bolded part is what is stopping the scroll from working. It's just before the 'row' code.

holy crap i'm actually disappointed i didn't catch that...

thank you! i love your code btw bc i stalk your thread

vliamint · Jan 23, 2018

e d e n said:
holy crap i'm actually disappointed i didn't catch that...

thank you! i love your code btw bc i stalk your thread

I had to edit it a couple times before I realised myself.

Ahh, really? Haha, thank you~

myfanwy · Jan 28, 2018

.

[class=tabs] background-color: #FFFFFF; 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%; position: relative; top: 100px; [/class] [class=tab] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 2px 0; width: 33%; [/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) [/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 style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]iii[/div][/div] [div class="tabsContent tabsContenti"]

. . . . . . . . . .

[/div] [div class="tabsContent tabsContentii"]

. . . . . . . . . .

[/div] [div class="tabsContent tabsContentiii"]

. . . . . . . . . .

.

[/div]

Code:

[row]
[column=span2][color=transparent].[/color][/column]
[column=span4][nobr]
[class=tabs]
background-color: #FFFFFF;
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%;
position: relative;
top: 100px;
[/class]

[class=tab]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 2px 0;
width: 33%;
[/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)
[/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 style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]iii[/div][/div]

[div class="tabsContent tabsContenti"][div=float: center; background-color: black; margin: auto; background-position: 50% 30%; border-radius: 100%; border: 0px solid white; height: 100px; width: 100px; overflow: hidden; position: relative; top: -50px;][div=background:url('https://i.pinimg.com/736x/b6/f9/a0/b6f9a038ed391d44fee5a341b2ea172b--floral-wallpaper-iphone-iphone-wallpaper-summer.jpg');background-size:cover;color: #000000;padding:5px;][color=transparent].
.
.
.
.
.
.
.
.
.[/color][/div][/div][/div]

[div class="tabsContent tabsContentii"][div=float: center; background-color: black; margin: auto; background-position: 50% 30%; border-radius: 100%; border: 0px solid white; height: 100px; width: 100px; overflow: hidden; position: relative; top: -50px;][div=background:url('https://i.pinimg.com/736x/b6/f9/a0/b6f9a038ed391d44fee5a341b2ea172b--floral-wallpaper-iphone-iphone-wallpaper-summer.jpg');background-size:cover;color: #000000;padding:5px;][color=transparent].
.
.
.
.
.
.
.
.
.[/color][/div][/div][/div]

[div class="tabsContent tabsContentiii"][div=float: center; background-color: black; margin: auto; background-position: 50% 30%; border-radius: 100%; border: 0px solid white; height: 100px; width: 100px; overflow: hidden; position: relative; top: -50px;][div=background:url('https://i.pinimg.com/736x/b6/f9/a0/b6f9a038ed391d44fee5a341b2ea172b--floral-wallpaper-iphone-iphone-wallpaper-summer.jpg');background-size:cover;color: #000000;padding:5px;][color=transparent].
.
.
.
.
.
.
.
.
.[/color][/div][/div]
[centerblock=50][div=height: 20px; background: white; position: relative; margin: auto; top: 0px;width: 190px; pointer-events: none; top: 0px; margin-left: 0px;].[/div][/centerblock][/div]
[/nobr][/column]
[/row]

how the flip flop do i fix this showing all the tabs content before you click on it? it's getting a little frustrating atm

cherub. · Jan 28, 2018

whaddya mean show all the tabs content before clicking on it?

myfanwy · Jan 28, 2018

ah, so the three circle divs shouldn't be showing when you first see it.

unless it's just a problem on my computer...

cherub. · Jan 28, 2018

ohh !! so basically what you want is th circle divs in a tab / the tabs?
or.. ??

myfanwy · Jan 28, 2018

ah here's a better description.

i want this to not happen, unless this is a problem just on my computer.

Alteras · Jan 28, 2018

You are missing a script to make only 1 tab show at first. You'd want something like this in your code:

Code:

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

And make sure that it is seperate from your other script, or else it wont run when first loaded.

myfanwy · Jan 28, 2018

Alteras said:
You are missing a script to make only 1 tab show at first. You'd want something like this in your code:

Code:

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

And make sure that it is seperate from your other script, or else it wont run when first loaded.

ohhh, that makes a lot more sense. thank you!

myfanwy · Jan 28, 2018

Code:

[row]
[column=span2][color=transparent].[/color][/column]
[column=span4][nobr]
[class=tabs]
background-color: #FFFFFF;
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%;
position: relative;
top: 100px;
height: 100%;
[/class]

[class=tab]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 2px 0;
width: 33%;
[/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)
[/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 style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]iii[/div][/div]

[div class="tabsContent tabsContenti"][div=float: center; background-color: transparent; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 100px; width: 200px; overflow: hidden; position: relative; top: -40px;][img]https://78.media.tumblr.com/6222e6434af266fe02796422a1729648/tumblr_p2vi8xALQv1vd5f2io2_540.gif[/img][/div]
[centerblock=50][div=height: 100%; background: white; position: relative; margin: auto; top: 0px;width: 100%; top: 0px; margin-left: 0px;][div=position: relative; width: 100%; height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][font=Alegreya Sans][size=2]mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd.

mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd.[/size][/font][/div][/div][/div][/centerblock][/div]

[div class="tabsContent tabsContentii"][div=float: center; background-color: transparent; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 100px; width: 200px; overflow: hidden; position: relative; top: -40px;][img]https://78.media.tumblr.com/1a5526ebefbcfdc9594c4cd5380a4a55/tumblr_p2vi8xALQv1vd5f2io4_r1_540.gif[/img][/div]
[centerblock=50][div=height: 100%; background: white; position: relative; margin: auto; top: 0px;width: 100%; pointer-events: none; top: 0px; margin-left: 0px;][div=height: 100%; background: white; position: relative; margin: auto; top: 0px;width: 100%; top: 0px; margin-left: 0px;][div=position: relative; width: 100%; height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][font=Alegreya Sans][size=2]mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd.

mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd.[/size][/font][/div][/div][/div][/centerblock][/div]

[div class="tabsContent tabsContentiii"][div=float: center; background-color: transparent; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 100px; width: 200px; overflow: hidden; position: relative; top: -40px;][img]https://78.media.tumblr.com/bddc93b0f7f33397b8bdcfa88cc69c26/tumblr_p2vi8xALQv1vd5f2io5_r1_540.gif[/img][/div]
[centerblock=50][div=height: 100%; background: white; position: relative; margin: auto; top: 0px;width: 100%; pointer-events: none; top: 0px; margin-left: 0px;][div=height: 100%; background: white; position: relative; margin: auto; top: 0px;width: 100%; top: 0px; margin-left: 0px;][div=position: relative; width: 100%; height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][font=Alegreya Sans][size=2]mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd.

mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd.[/size][/font][/div][/div][/div][/centerblock][/div]
[/nobr][/column]
[/row]

the answer is probably going to be super obvious but now i'm having trouble with the third tab disappearing all together when i click it.

Alteras · Jan 28, 2018

you were missing a closing div tag on the second tab.

.

[class=tabs] background-color: #FFFFFF; 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%; position: relative; top: 100px; height: 100%; [/class] [class=tab] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 2px 0; width: 33%; [/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) [/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 style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]iii[/div][/div] [div class="tabsContent tabsContenti"]

mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd. mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd.

[/div] [div class="tabsContent tabsContentii"]

mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd. mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd.

[/div] [div class="tabsContent tabsContentiii"]

mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd. mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd.

[/div] [/div]
[/div]

Code:

[row]
[column=span2][color=transparent].[/color][/column]
[column=span4][nobr]
[class=tabs]
background-color: #FFFFFF;
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%;
position: relative;
top: 100px;
height: 100%;
[/class]

[class=tab]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 2px 0;
width: 33%;
[/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)
[/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 style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]iii[/div][/div]

[div class="tabsContent tabsContenti"][div=float: center; background-color: transparent; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 100px; width: 200px; overflow: hidden; position: relative; top: -40px;][img]https://78.media.tumblr.com/6222e6434af266fe02796422a1729648/tumblr_p2vi8xALQv1vd5f2io2_540.gif[/img][/div]
[centerblock=50][div=height: 100%; background: white; position: relative; margin: auto; top: 0px;width: 100%; top: 0px; margin-left: 0px;][div=position: relative; width: 100%; height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][font=Alegreya Sans][size=2]mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd.

mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd.[/size][/font][/div][/div][/div][/centerblock][/div]

[div class="tabsContent tabsContentii"][div=float: center; background-color: transparent; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 100px; width: 200px; overflow: hidden; position: relative; top: -40px;][img]https://78.media.tumblr.com/1a5526ebefbcfdc9594c4cd5380a4a55/tumblr_p2vi8xALQv1vd5f2io4_r1_540.gif[/img][/div]
[centerblock=50][div=height: 100%; background: white; position: relative; margin: auto; top: 0px;width: 100%; pointer-events: none; top: 0px; margin-left: 0px;][div=height: 100%; background: white; position: relative; margin: auto; top: 0px;width: 100%; top: 0px; margin-left: 0px;][div=position: relative; width: 100%; height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][font=Alegreya Sans][size=2]mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd.

mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd.[/size][/font][/div][/div][/div][/div][/centerblock][/div]

[div class="tabsContent tabsContentiii"][div=float: center; background-color: transparent; margin: auto; background-position: 50% 30%; border-radius: 0%; border: 0px solid white; height: 100px; width: 200px; overflow: hidden; position: relative; top: -40px;][img]https://78.media.tumblr.com/bddc93b0f7f33397b8bdcfa88cc69c26/tumblr_p2vi8xALQv1vd5f2io5_r1_540.gif[/img][/div]
[centerblock=50][div=height: 100%; background: white; position: relative; margin: auto; top: 0px;width: 100%; pointer-events: none; top: 0px; margin-left: 0px;][div=height: 100%; background: white; position: relative; margin: auto; top: 0px;width: 100%; top: 0px; margin-left: 0px;][div=position: relative; width: 100%; height: 200px; overflow: hidden; padding: 0px;][div=width: 100%; padding-right: 150px; height: 100%; overflow-y: scroll; font-align: justify;][font=Alegreya Sans][size=2]mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd.

mae hyn yn wybodaeth hap. dydw i ddim yn gwybod beth i ddim yn mynd i roi yma i fod yn onest, o leiaf, nid eto. peidiwch â phoeni am y peth. cael rhywfaint o eiriau cân sy'n golygu dim i mi oherwydd nid fi yn teimlo emosiynau fel bod dynol arferol, sydd yn ôl pob tebyg pam nad fi erioed wedi cael cariad. oh pam ydych chi'n edrych yn drist? yr awyr yn troi'n felyn. os mai dim ond byddwch yn gwenu ar mi unwaith eto bydd y byd yn troi'n las eto. larwm coch yn canu yn rhywle, i yn sefyll yn llonydd ac yn edrych o gwmpas. yna eich lliw mintys gwenu, lliwiau yn y byd.[/size][/font][/div][/div][/div][/centerblock][/div]
[/nobr][/column]
[/row]

[/div]

myfanwy · Jan 28, 2018

excuse me while i throw my computer across the room

thanks again for the trouble ^^ tabs are a pain but thankfully i'm learning more and more from them

Alteras · Jan 28, 2018

e d e n said:
excuse me while i throw my computer across the room

thanks again for the trouble ^^ tabs are a pain but thankfully i'm learning more and more from them

No problem. It might be easier to make more classes for divs instead of inline style, jsut so taht its easier to find things.

ewolf20 · Jan 28, 2018

i still stuck at these things. mostly cuz i'm afraid it might break any minute now.

myfanwy · Jan 28, 2018

Alteras said:
No problem. It might be easier to make more classes for divs instead of inline style, jsut so taht its easier to find things.

honestly i like the challenge and somehow i don't get too overwhelmed with inline coding. div classes are a headache and idk why or how it works.

ewolf20 said:
i still stuck at these things. mostly cuz i'm afraid it might break any minute now.

same tho. it gets a lot easier once you practice ^^ i recommend using your private workshop to just tinker around with different codes. believe me, i used to suck so bad just two weeks ago when i thought i was good but now i'm moving onto more complicated things.

Amerikia1126 · Jan 28, 2018

Jumping in here to do a mini class tutorial because why not.

Say that the divs are workers that will do whatever instructions you feed them. You can feed them through inline css, or you can mass-send out a memo telling the div to go read a set of instructions. With small things the difference isn't too big.
[class=exampleBox] background: lightblue; border-left: 3px solid blue; padding: 5px; color: black; max-width: 500px; [/class]
[div class=exampleBox]inline css:
[div style="color: red;"]i am text.[/div]

classes:
[class name=redText]color: red;[/class][div class=redText]i am text.[/div][/div]
inline css:
[div style="color: red;"]i am text.[/div]
classes:
[class name=redText]color: red;[/class][div class=redText]i am text.[/div]
They both do the same thing, you may say, how could classes be useful if you could just keep using inline css?

Well. Have you ever had a code where you made every heading have the same color only to decide you wanted to change the color, and then having to go back through and change every single one? And if you forgot to change one of them? Oh boy..

Classes fix this, which makes little edits a whole lot easier, and in long codes with hundreds of divs, that is a total lifesaver.

[div class=exampleBox]inline css:
[div style="color: red; font-family: 'Times New Roman';"]heading 1[/div]lorem ipsum
[div style="color: red; font-family: 'Times New Roman';"]heading 2[/div]lorem ipsum
[div style="color: red; font-family: 'Times New Roman';"]heading 3[/div]lorem ipsum

classes:
[class name=heading]color: red; font-family: 'Times New Roman';[/class][div class=heading]heading 1[/div]lorem ipsum
[div class=heading]heading 2[/div]lorem ipsum
[div class=heading]heading 3[/div]lorem ipsum[/div]
inline css:
[div style="color: red; font-family: 'Times New Roman';"]heading 1[/div]lorem ipsum
[div style="color: red; font-family: 'Times New Roman';"]heading 2[/div]lorem ipsum
[div style="color: red; font-family: 'Times New Roman';"]heading 3[/div]lorem ipsum

classes:
[class name=heading]color: red; font-family: 'Times New Roman';[/class][div class=heading]heading 1[/div]lorem ipsum
[div class=heading]heading 2[/div]lorem ipsum
[div class=heading]heading 3[/div]lorem ipsum

I'll continue this later, as I've got the essentials across now and the input lag on mobile is driving me crazy. Hope it helped.

myfanwy · Jan 29, 2018

ah, i know that technically doc classes make things easier, however, i find that i get even more of a headache trying to close a div and missing one and then trying to find that div code rather than a size tag. it's mostly due to my eyes not being the best for perception

myfanwy · Feb 3, 2018

how would one go about using fa icons with tabs...?

~~if i'm abusing this thread pls let me know~~

Alteras · Feb 3, 2018

e d e n said:
how would one go about using fa icons with tabs...?

~~if i'm abusing this thread pls let me know~~

Since the fa icons don't get picked up by getText, you're gonna have to hide some text alongside the fa icons. I think if you put a small div with display:none and put the text in that and the fa icons outside it, it'll work

myfanwy · Feb 3, 2018

Alteras said:
Since the fa icons don't get picked up by getText, you're gonna have to hide some text alongside the fa icons. I think if you put a small div with display:none and put the text in that and the fa icons outside it, it'll work

thank you ^^ i'm going to give that a go and if i ~~inevitably~~ run into trouble there will be another post, aha.

myfanwy · Feb 7, 2018

~~could someone teach me how to do the nifty hovers over an image bc i really only understand once someone walks me through it orz~~

cherub. · Feb 7, 2018

~~me i will~~

myfanwy · Feb 24, 2018

[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; [/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) [/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 style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]iii[/div][/div] [div class="tabsContent tabsContenti"]a[/div] [div class="tabsContent tabsContentii"]b[/div] [div class="tabsContent tabsContentiii"]c[/div]

Code:

[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;
[/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)
[/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 style="border-top-right-radius: 5px; border-bottom-right-radius: 5px; width: 34%;"]iii[/div][/div]

[div class="tabsContent tabsContenti"]a[/div]

[div class="tabsContent tabsContentii"]b[/div]

[div class="tabsContent tabsContentiii"]c[/div][/nobr]

i've pretty much figured out the whole "vertical tab" thing, however, the last tab doesn't want to cooperate and stay in a uniform line with the other two ×-×

Help need help troubleshooting a div code

forever tilted

.

forever tilted

.

forever tilted

𝘤𝘭𝘰𝘶𝘥 ☁ 𝘨𝘢𝘻𝘦𝘳

forever tilted

𝘤𝘭𝘰𝘶𝘥 ☁ 𝘨𝘢𝘻𝘦𝘳

forever tilted

The Sleepy Prisoner

forever tilted

forever tilted

The Sleepy Prisoner

forever tilted

The Sleepy Prisoner

the aspiring roleplayer

forever tilted

Occasionally Active

forever tilted

forever tilted

The Sleepy Prisoner

forever tilted

forever tilted

𝘤𝘭𝘰𝘶𝘥 ☁ 𝘨𝘢𝘻𝘦𝘳

forever tilted

Users who are viewing this thread

Similar threads