write a reply

Tabs and Keyframes How??

aliasCheshire
pronounsShe/Her
8written posts
Highlandearned bits
offlinecurrently
Highland
New Member
Highland Avatar
working on it~
Hi! I'm new to coding and struggling ;; I'm having two issues with a code:
  1. My tabs are not looking how I want them to. I'm trying to move them up into the blue box but when I do, they disappear under the box instead of appearing on top. I've tried z-index to no avail. Other question with tabs is how to make them not affect other tabbed codes in the same thread. I cannot figure it out.
  2. My other issue is with the keyframes I'm using. I want the animated stuff to disappear under the box above it, but it appears on top.

Here is the offending code in question:
[googlefont=Aref Ruqaa][googlefont=Dancing Script][nospaces]
[div align="center"][div][table][tbody]
[tr]
[td style="padding: 3px;"][div][attr="class","timelog"]
[div][attr="class","special"][div][attr="class","caught"][img style="max-width:100%;" src="https://placehold.co/120x120"][/div][break][break]
[div][attr="class","whostime"]Firstname Lastname[/div]
[div][attr="class","berryinfo"]traits traits traits[/div]
[div][attr="class","updatetime"]Updated 9/23[/div][/div]
[div][attr="class","threadply"]
[PTabbedContent]
[PTab=Ongoing]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagopen"]OPEN[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"]location / time[/div][/td]
[/tr]
[/tbody][/table]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagclosed"]CLOSED[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"]location / time[/div][/td]
[/tr]
[/tbody][/table]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagevent"]EVENT[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"]location / time[/div][/td]
[/tr]
[/tbody][/table]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagau"]AU[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"]location / time[/div][/td]
[/tr]
[/tbody][/table]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagpast"]PAST[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"]location / time[/div][/td]
[/tr]
[/tbody][/table]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagrf"]RF[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"]location / time[/div][/td]
[/tr]
[/tbody][/table]
[/PTab={background:transparent;}]

[PTab=Completed]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagopen"]OPEN[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"][i]location / time[/i][break]
Summary[/div][/td]
[/tr]
[/tbody][/table]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagclosed"]CLOSED[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"][i]location / time[/i][break]
Summary[/div][/td]
[/tr]
[/tbody][/table]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagevent"]EVENT[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"][i]location / time[/i][break]
Summary[/div][/td]
[/tr]
[/tbody][/table]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagau"]AU[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"][i]location / time[/i][break]
Summary[/div][/td]
[/tr]
[/tbody][/table]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagpast"]PAST[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"][i]location / time[/i][break]
Summary[/div][/td]
[/tr]
[/tbody][/table]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagrf"]RF[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"][i]location / time[/i][break]
Summary[/div][/td]
[/tr]
[/tbody][/table]
[/PTab={background:transparent;}]

[PTab=Dead]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagopen"]OPEN[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"]location / time[/div][/td]
[/tr]
[/tbody][/table]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagclosed"]CLOSED[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"]location / time[/div][/td]
[/tr]
[/tbody][/table]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagevent"]EVENT[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"]location / time[/div][/td]
[/tr]
[/tbody][/table]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagau"]AU[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"]location / time[/div][/td]
[/tr]
[/tbody][/table]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagpast"]PAST[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"]location / time[/div][/td]
[/tr]
[/tbody][/table]
[table][tbody]
[tr]
[td style="margin-top:20px;"][div][attr="class","tagrf"]RF[/div][/td]
[td style="margin-top:20px;"][div][attr="class","storytitle"][a href="linkhere"]Thread title[/a] | [font size="4"]players[/font][/div]
[div][attr="class","storyplace"]location / time[/div][/td]
[/tr]
[/tbody][/table]
[/PTab={background:transparent;}]

[/PTabbedContent={margin-top:-10px;background:transparent;animation:slide}]
[/div]
[/td]
[td style="padding: 3px;"][div][attr="class","timeline"]
[div][attr="class","clock"]Timeline[/div]
[div][attr="class","key"][b]Key[/b]: [font color="37aa59"]■[/font] = Open[break]
[font color="d67a7a"]■[/font] = Closed [font color="cedd4f"]■[/font] = Event[break]
[font color="5a91d1"]■[/font] = Past [font color="f3bd33"]■[/font] = RF[break]
AU threads are not included[/div]
[div][attr="class","dateline"]
[div][attr="class","date1"]Thread title[/div]
[div][attr="class","date2"]Date[/div]
[div][attr="class","date1"]Thread title[/div]
[div][attr="class","date2"]Date[/div]
[div][attr="class","date1"]Thread title[/div]
[div][attr="class","date2"]Date[/div]
[div][attr="class","date1"]Thread title[/div]
[div][attr="class","date2"]Date[/div]
[div][attr="class","date1"]Thread title[/div]
[div][attr="class","date2"]Date[/div]
[div][attr="class","date1"]Thread title[/div]
[div][attr="class","date2"]Date[/div]
[div][attr="class","date1"]Thread title[/div]
[div][attr="class","date2"]Date[/div]
[div][attr="class","date1"]Thread title[/div]
[div][attr="class","date2"]Date[/div]
[div][attr="class","date1"]Thread title[/div]
[div][attr="class","date2"]Date[/div]
[div][attr="class","date1"]Thread title[/div]
[div][attr="class","date2"]Date[/div]
[div][attr="class","date1"]Thread title[/div]
[div][attr="class","date2"]Date[/div]
[/div]
[/div][/td]
[/tr]
[/tbody][/table][div][attr="class","words"]quote? lyrice? both is good[/div][/div]
[/div]

[newclass=.timelog]width:470px;border:10px solid #8ab0dd;[/newclass]
[newclass=.special]width:470px;height:180px;background:#5e89bb;border-bottom:10px solid #b9d0ea;[/newclass]
[newclass=.caught]width:120px;border:10px double #8ab0dd;float:left;margin:20px;[/newclass]
[newclass=.whostime]width:290px;border-bottom:7px double #8ab0dd;padding-bottom:7px;margin-left:170px;text-align:left;font-size:25px;color:#cad8e7;font-weight:bold;font-family:Aref Ruqaa;[/newclass]
[newclass=.berryinfo]width:290px;margin-left:170px;text-align:left;color:#cad8e7;font-size:15px;font-family:Aref Ruqaa;[/newclass]
[newclass=.updatetime]display:inline-block;border:3px solid #8ab0dd;background:#b9d0ea;padding:5px;margin:70px 0px 0px 180px;text-align:center;font-size:15px;font-family:Aref Ruqaa;[/newclass]

[newclass=.threadply]width:470px;height:400px;overflow:auto;[/newclass]
[newclass=.storytitle]width:345px;padding:5px;border-bottom:10px double #b9d0ea;margin-right:15px;text-align:left;font-size:25px;font-style:bold;font-family:Dancing Script;[/newclass]
[newclass=.storyplace]width:345px;height:13px;padding:5px;overflow:hidden;text-align:left;font-size:15px;font-family:Aref Ruqaa;[/newclass]
[newclass=.storyplace:hover]height:100%;[/newclass]
[newclass=.threadply::-webkit-scrollbar]width:0px;background-color:transparent;[/newclass]
[newclass=.words]width:470px;margin-top:-20px;margin-left:-160px;padding-bottom:15px;font-size:35px;text-align:left;color:#285c97;font-style:italic;font-family:Dancing Script;[/newclass]

[newclass=.tagopen]width:60px;background:#37aa59;border:5px solid #94c1a1;padding:5px;text-align:center;font-size:15px;font-weight:bold;font-family:Aref Ruqaa;[/newclass]
[newclass=.tagclosed]width:60px;background:#d67a7a;border:5px solid #ffa2a2;padding:5px;text-align:center;font-size:15px;font-weight:bold;font-family:Aref Ruqaa;[/newclass]
[newclass=.tagevent]width:60px;background:#cedd4f;border:5px solid #e5ecab;padding:5px;text-align:center;font-size:15px;font-weight:bold;font-family:Aref Ruqaa;[/newclass]
[newclass=.tagau]width:60px;background:#af76ea;border:5px solid #d6bdf1;padding:5px;text-align:center;font-size:15px;font-weight:bold;font-family:Aref Ruqaa;[/newclass]
[newclass=.tagpast]width:60px;background:#5a91d1;border:5px solid #8cb6e5;padding:5px;text-align:center;font-size:15px;font-weight:bold;font-family:Aref Ruqaa;[/newclass]
[newclass=.tagrf]width:60px;background:#f3bd33;border:5px solid #ecd7a1;padding:5px;text-align:center;font-size:15px;font-weight:bold;font-family:Aref Ruqaa;[/newclass]

[newclass=.PT_table .PT_tabs]display:inline-block;border:5px solid #b9d0ea;padding:5px;font-size:12px;font-weight:bold;font-family:Aref Ruqaa;[/newclass]
[newclass=.PT_table .PT_tabs_hover]display:inline-block;border:5px solid #b9d0ea;padding:5px;font-size:12px;font-weight:bold;background:#c6dbf3;font-family:Aref Ruqaa;[/newclass]
[newclass=.PT_table .PT_tabs_selected]display:inline-block;border:5px solid #cde2fa;padding:5px;font-size:12px;font-weight:bold;background:#dcecff;font-family:Aref Ruqaa;[/newclass]
[newclass=.PT_table .PT_tabs_selected_hover]display:inline-block;border:5px solid #b9d0ea;padding:5px;font-size:12px;font-weight:bold;background:#c6dbf3;font-family:Aref Ruqaa;[/newclass]

[newclass=.timeline]width:165px;height:590px;border:10px solid #8ab0dd;[/newclass]
[newclass=.clock]width:155px;padding:10px 0px 10px;margin:0px 5px 0px;border-bottom:7px double #b9d0ea;font-size:28px;text-align:center;font-family:Aref Ruqaa;[/newclass]
[newclass=.key]width:155px;border-bottom:7px solid #b9d0ea;padding:5px;font-size:15px;text-align:justify;font-family:Aref Ruqaa;[/newclass]
[newclass=.dateline]width:155px;height:470px;overflow:auto;[/newclass]
[newclass=.date1]width:155px;margin-left:5px;padding:5px 0px;border-bottom:5px double #b9d0ea;font-size:20px;text-align:left;font-family:Aref Ruqaa;[/newclass]
[newclass=.date2]width:155px;margin-left:5px;padding:0px 0px 5px;font-size:15px;text-align:left;font-style:italic;font-family:Dancing Script;[/newclass]
[newclass=.dateline::-webkit-scrollbar]width:0px;background-color:transparent;[/newclass]
[newclass=.dateline]-webkit-animation-name: move; -webkit-animation-duration: 10s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: up; -webkit-animation-timing-function:linear;[/newclass]
[newclass=.dateline:hover]-webkit-animation-play-state: paused;[/newclass]
[newclass=.dateline]} @-webkit-keyframes move { 0% { transform:translateY(0); } 100% { transform:translateY(-100%); } [/newclass]