BBCode Help

Status
Not open for further replies.

rissa

the clairvoyant pterodactyl
Original poster
VENGEANCE
DONATING MEMBER
MYTHICAL MEMBER
BBCODE AND DIVBOX INQUIRIES
A place specifically designed for bbcode and divbox related questions! Need help figuring out a bit of code? Not sure why your code keeps breaking? Unsure if what you want to do is even possible? Fret not! This thread's creation is for the sole purpose of helping you figure out your coding, one question at a time.
F. A. Q.
H E L P F U LxxL I N K S

 
Last edited:
I thought I made a simple enough code buuuut noooooo.

The Queen's Chambers

Its the first one with Kathryn. It keeps cutting off the 'N' in her name. WHHHYYY?

It's because the text doesn't fit in the area provided. Try removing the side paddings (padding: 130px 0;) and changing the text-align to centre it :)
 
It's because the text doesn't fit in the area provided. Try removing the side paddings (padding: 130px 0;) and changing the text-align to centre it :)
The name fits now but the text is on her face instead of at the bottom
 
The name fits now but the text is on her face instead of at the bottom
You can put back the paddings you had for the top and bottom, but not the right and left sides :'D
Defining a second parameter in the padding property allows for a different value to be set for the sides.
[spoili]


Kathryn


Code:
[div=
background:url(http://data.whicdn.com/images/65745597/large.gif);
width: 500px;
height: 250px;
background-position: ;
margin: auto;
border-radius: 80px;
border: 12px solid #8B0000;]

[div=
font-family: GARAMOND; text-transform: UPPERCASE; font-size: 57px; color: #8B0000; text-align: center; padding:130px 0; letter-spacing: -3px; text-shadow: 1px 1px 1px #b5b5b5;]Kathryn[/div][/div]


[/spoili]

Orrr you can turn the outermost div into a flexbox with align-items set to flex-end and justify-content set to center.
[spoili]


Kathryn


Code:
[div=
background:url(http://data.whicdn.com/images/65745597/large.gif);
width: 500px;
height: 250px;
background-position: ;
margin: auto;
border-radius: 80px;
border: 12px solid #8B0000; display:flex; align-items:flex-end; justify-content:center;]

[div=
font-family: GARAMOND; text-transform: UPPERCASE; font-size: 57px; color: #8B0000; text-align: center; letter-spacing: -3px; text-shadow: 1px 1px 1px #b5b5b5;]Kathryn[/div][/div]

[/spoili]
 
  • Thank You
Reactions: Reina
Hai, I'm trying to put together some things for an RP I'm thinking about starting but my scoreboard isn't cooperating O^Q I want the top three scores to align under the hr in one line and normally for this kind of thing I'd use float commands but apparently there is no float: center option, which would be perfect for the second place score :< What should I do? (I just have it set up with text-align for the proper x-axis positions but the y-axis is off)
I would also like to put the scores into probably three or four columns but I have absolutely no clue what code would do that.

link to what it looks like as-is

Code:
[div=border-radius: 15px; margin: 10px; padding: 15px; border: 20px #ffbf00 solid; background-color: #000; height: 640px; max-width: 800px !important;][div==margin: 10px; padding: 10px; font-size: 25px; text-align: center; color: #9f3;][font=Aldrich]【 SCOREBOARD 】[/font][/div][hr="border: 1px solid #9f3;"][/hr][div=font-size: 15px; color: #9f3;][font=Aldrich][div=text-align: left;]FIRST PLACE: SCORE[/div][div=text-align: center;]SECOND PLACE: SCORE[/div][div=text-align: right;]THIRD PLACE: SCORE[/div][/font][/div][div=max-width: 800px; max-height: 500px; overflow-x: scroll; padding: 15px; color: #9f3;][font=Courier New][u]A[/u]
N/A

[u]B[/u]
N/A

[u]C[/u]
N/A

[u]D[/u]
N/A

[u]E[/u]
N/A

[u]F[/u]
N/A

[u]G[/u]
N/A

[u]H[/u]
N/A

[u]I[/u]
N/A

[u]J[/u]
N/A

[u]K[/u]
N/A

[u]L[/u]
N/A

[u]M[/u]
N/A

[u]N[/u]
N/A

[u]O[/u]
N/A

[u]P[/u]
N/A

[u]Q[/u]
N/A

[u]R[/u]
N/A

[u]S[/u]
N/A

[u]T[/u]
N/A

[u]U[/u]
N/A

[u]V[/u]
N/A

[u]W[/u]
N/A

[u]X[/u]
N/A

[u]Y[/u]
N/A

[u]Z[/u]
N/A
[/font][/div][/div]
[accordion]
{slide=Battle Points (BP)}

{/slide}
{slide=Demonstration}

{/slide}
[/accordion]
 
Hai, I'm trying to put together some things for an RP I'm thinking about starting but my scoreboard isn't cooperating O^Q I want the top three scores to align under the hr in one line and normally for this kind of thing I'd use float commands but apparently there is no float: center option, which would be perfect for the second place score :< What should I do? (I just have it set up with text-align for the proper x-axis positions but the y-axis is off)
I would also like to put the scores into probably three or four columns but I have absolutely no clue what code would do that.

link to what it looks like as-is

Code:
[div=border-radius: 15px; margin: 10px; padding: 15px; border: 20px #ffbf00 solid; background-color: #000; height: 640px; max-width: 800px !important;][div==margin: 10px; padding: 10px; font-size: 25px; text-align: center; color: #9f3;][font=Aldrich]【 SCOREBOARD 】[/font][/div][hr="border: 1px solid #9f3;"][/hr][div=font-size: 15px; color: #9f3;][font=Aldrich][div=text-align: left;]FIRST PLACE: SCORE[/div][div=text-align: center;]SECOND PLACE: SCORE[/div][div=text-align: right;]THIRD PLACE: SCORE[/div][/font][/div][div=max-width: 800px; max-height: 500px; overflow-x: scroll; padding: 15px; color: #9f3;][font=Courier New][u]A[/u]
N/A

[u]B[/u]
N/A

[u]C[/u]
N/A

[u]D[/u]
N/A

[u]E[/u]
N/A

[u]F[/u]
N/A

[u]G[/u]
N/A

[u]H[/u]
N/A

[u]I[/u]
N/A

[u]J[/u]
N/A

[u]K[/u]
N/A

[u]L[/u]
N/A

[u]M[/u]
N/A

[u]N[/u]
N/A

[u]O[/u]
N/A

[u]P[/u]
N/A

[u]Q[/u]
N/A

[u]R[/u]
N/A

[u]S[/u]
N/A

[u]T[/u]
N/A

[u]U[/u]
N/A

[u]V[/u]
N/A

[u]W[/u]
N/A

[u]X[/u]
N/A

[u]Y[/u]
N/A

[u]Z[/u]
N/A
[/font][/div][/div]
[accordion]
{slide=Battle Points (BP)}

{/slide}
{slide=Demonstration}

{/slide}
[/accordion]
You could use a flexbox?

FIRST PLACE: SCORE
SECOND PLACE: SCORE
THIRD PLACE: SCORE


[div=display: flex;][div= flex:1;]FIRST PLACE: SCORE[/div][div=flex:1;]SECOND PLACE: SCORE[/div][div=flex:1;]THIRD PLACE: SCORE[/div][/div]
 
  • Bucket of Rainbows
Reactions: darkflames13
You could use a flexbox?

FIRST PLACE: SCORE
SECOND PLACE: SCORE
THIRD PLACE: SCORE


[div=display: flex;][div= flex:1;]FIRST PLACE: SCORE[/div][div=flex:1;]SECOND PLACE: SCORE[/div][div=flex:1;]THIRD PLACE: SCORE[/div][/div]
oh is that what those do? cool, thank ^^
Any thoughts on how I could do columns? I'm still p new to divboxing ^^"
 
I'm having problems with tables as there is always a large space above it that i don't know how to remove!! I've added the raw code as well as how it looks when functional, Please help me!
HTML:
[table="border: 3px solid;"]
[tr][td]Attribute[/td]      [td]Points[/td]   [td]Class Gains[/td]  [td]Multiplier[/td]  [td]Total[/td][/tr]
[tr][td]Strength[/td]       [td]20[/td]          [td][/td]                       [td]2[/td]                [td]80[/td][/tr]
[tr][td]Intelligence[/td]  [td]240[/td]        [td][/td]                       [td]1[/td]                [td]240[/td][/tr]
[tr][td]Vitality[/td]          [td]60[/td]          [td][/td]                       [td]2[/td]                [td]120[/td][/tr]
[tr][td]Constitution[/td] [td]90[/td]          [td][/td]                        [td]1[/td]                [td]90[/td][/tr]
[tr][td]Wisdom[/td]       [td]95[/td]          [td][/td]                        [td]1[/td]                [td]95[/td][/tr]
[tr][td]Endurance[/td]   [td]100[/td]        [td][/td]                        [td]1.5*2[/td]         [td]300[/td][/tr]
[tr][td]Dexterity[/td]      [td]15[/td]          [td][/td]                        [td]1[/td]                [td]15[/td][/tr]
[tr][td]Agility[/td]           [td]15[/td]          [td][/td]                        [td]1[/td]               [td]15[/td][/tr]
[tr][td]Luck[/td]             [td]15[/td]          [td][/td]                        [td]1[/td]               [td]15[/td][/tr]
[tr][td]Charisma[/td]     [td]45[/td]          [td][/td]                        [td]1[/td]               [td]45[/td][/tr]
[tr][td]Perception[/td]   [td]70[/td]          [td][/td]                        [td]1.5*2[/td]         [td]210[/td][/tr]
[tr][td]Faith[/td]            [td]60[/td]          [td][/td]                        [td]1[/td]                [td]60[/td][/tr]
[tr][td]Karma[/td]          [td]15[/td]         [td][/td]                        [td]1[/td]                [td]15[/td][/tr]
[/table]

AttributePointsClass GainsMultiplierTotal
Strength20280
Intelligence2401240
Vitality602120
Constitution90190
Wisdom95195
Endurance1001.5*2300
Dexterity15115
Agility15115
Luck15115
Charisma45145
Perception701.5*2210
Faith60160
Karma15115
 
Any thoughts on how I could do columns? I'm still p new to divboxing ^^"
Uber late response here, but you could use the table bbcode to make columns. Or like Rissa showed, you could use divs that use flexboxes :)

Table:
Column 1Column 2Column 3
Code:
[table][tr][td]Column 1[/td][td]Column 2[/td][td]Column 3[/td][/tr][/table]

Flexbox div:
Column 1

Column 2

Column 3


Code:
[div=display:flex;][div=margin:5px;]Column 1[/div]
[div=margin:5px;]Column 2[/div]
[div=margin:5px;]Column 3[/div]
[/div]




I'm having problems with tables as there is always a large space above it that i don't know how to remove!! I've added the raw code as well as how it looks when functional, Please help me!
Did a little poking around, the space before the table is actually caused by the linebreaks between the table rows ([tr][/tr]). Removing the line breaks fixes the problem, but sadly it ruins the code's readability :c
[spoili]
AttributePointsClass GainsMultiplierTotal
Strength20280
Intelligence2401240
Vitality602120
Constitution90190
Wisdom95195
Endurance1001.5*2300
Dexterity15115
Agility15115
Luck15115
Charisma45145
Perception701.5*2210
Faith60160
Karma15115

Code:
[table="border: 3px solid;"][tr][td]Attribute[/td] [td]Points[/td]   [td]Class Gains[/td]  [td]Multiplier[/td]  [td]Total[/td][/tr][tr][td]Strength[/td]       [td]20[/td]          [td][/td]                       [td]2[/td]                [td]80[/td][/tr][tr][td]Intelligence[/td]  [td]240[/td]        [td][/td]                       [td]1[/td]                [td]240[/td][/tr][tr][td]Vitality[/td]          [td]60[/td]          [td][/td]                       [td]2[/td]                [td]120[/td][/tr][tr][td]Constitution[/td] [td]90[/td]          [td][/td]                        [td]1[/td]                [td]90[/td][/tr][tr][td]Wisdom[/td]       [td]95[/td]          [td][/td]                        [td]1[/td]                [td]95[/td][/tr][tr][td]Endurance[/td]   [td]100[/td]        [td][/td]                        [td]1.5*2[/td]         [td]300[/td][/tr][tr][td]Dexterity[/td]      [td]15[/td]          [td][/td]                        [td]1[/td]                [td]15[/td][/tr][tr][td]Agility[/td]           [td]15[/td]          [td][/td]                        [td]1[/td]               [td]15[/td][/tr][tr][td]Luck[/td]             [td]15[/td]          [td][/td]                        [td]1[/td]               [td]15[/td][/tr][tr][td]Charisma[/td]     [td]45[/td]          [td][/td]                        [td]1[/td]               [td]45[/td][/tr][tr][td]Perception[/td]   [td]70[/td]          [td][/td]                        [td]1.5*2[/td]         [td]210[/td][/tr][tr][td]Faith[/td]            [td]60[/td]          [td][/td]                        [td]1[/td]                [td]60[/td][/tr][tr][td]Karma[/td]          [td]15[/td]         [td][/td]                        [td]1[/td]                [td]15[/td][/tr][/table]
[/spoili]
 
  • Useful
Reactions: Nemopedia
Uber late response here, but you could use the table bbcode to make columns. Or like Rissa showed, you could use divs that use flexboxes :)

Table:
Column 1Column 2Column 3
Code:
[table][tr][td]Column 1[/td][td]Column 2[/td][td]Column 3[/td][/tr][/table]

Flexbox div:
Column 1

Column 2

Column 3


Code:
[div=display:flex;][div=margin:5px;]Column 1[/div]
[div=margin:5px;]Column 2[/div]
[div=margin:5px;]Column 3[/div]
[/div]





Did a little poking around, the space before the table is actually caused by the linebreaks between the table rows ([tr][/tr]). Removing the line breaks fixes the problem, but sadly it ruins the code's readability :c
[spoili]
AttributePointsClass GainsMultiplierTotal
Strength20280
Intelligence2401240
Vitality602120
Constitution90190
Wisdom95195
Endurance1001.5*2300
Dexterity15115
Agility15115
Luck15115
Charisma45145
Perception701.5*2210
Faith60160
Karma15115

Code:
[table="border: 3px solid;"][tr][td]Attribute[/td] [td]Points[/td]   [td]Class Gains[/td]  [td]Multiplier[/td]  [td]Total[/td][/tr][tr][td]Strength[/td]       [td]20[/td]          [td][/td]                       [td]2[/td]                [td]80[/td][/tr][tr][td]Intelligence[/td]  [td]240[/td]        [td][/td]                       [td]1[/td]                [td]240[/td][/tr][tr][td]Vitality[/td]          [td]60[/td]          [td][/td]                       [td]2[/td]                [td]120[/td][/tr][tr][td]Constitution[/td] [td]90[/td]          [td][/td]                        [td]1[/td]                [td]90[/td][/tr][tr][td]Wisdom[/td]       [td]95[/td]          [td][/td]                        [td]1[/td]                [td]95[/td][/tr][tr][td]Endurance[/td]   [td]100[/td]        [td][/td]                        [td]1.5*2[/td]         [td]300[/td][/tr][tr][td]Dexterity[/td]      [td]15[/td]          [td][/td]                        [td]1[/td]                [td]15[/td][/tr][tr][td]Agility[/td]           [td]15[/td]          [td][/td]                        [td]1[/td]               [td]15[/td][/tr][tr][td]Luck[/td]             [td]15[/td]          [td][/td]                        [td]1[/td]               [td]15[/td][/tr][tr][td]Charisma[/td]     [td]45[/td]          [td][/td]                        [td]1[/td]               [td]45[/td][/tr][tr][td]Perception[/td]   [td]70[/td]          [td][/td]                        [td]1.5*2[/td]         [td]210[/td][/tr][tr][td]Faith[/td]            [td]60[/td]          [td][/td]                        [td]1[/td]                [td]60[/td][/tr][tr][td]Karma[/td]          [td]15[/td]         [td][/td]                        [td]1[/td]                [td]15[/td][/tr][/table]
[/spoili]
I figured it out: there's a code for columns in CSS that wasn't in the Divtionary
 
I'm not sure if this question's been asked already (and if it has, sorry!)-- but for the table/flex-box columns, could you (theoretically?) put two div-boxes next to one another?

For context, I'm relatively new to the BBcoding business-- having only a basic concept of div-boxes and fieldboxes and what-have-you. Now, I'm attempting to put all those things together to create a CS template (of sorts)
(here is the prosecutor post) with a format inspired by this post and this post (both by @darkflames13 ).

Obviously, I don't want to steal their coding (that would be rude!)-- and already I've attempted to use both the float feature (boy-oh-boy was that a mistake) and making the widths of both div-boxes small enough so that they
should have fit in one line. When that didn't work, I tried the columns method mentioned in the F.A.Q. section of this thread-- adjusting the length and width to be the same as my div-boxes...and seeing as how the end result looked like a digital crime scene, I caved and decided to ask for help.

Also, one more question. Is there someway to re-size images with coding? Or do I need to use an image-resizer on the web?

(Sorry for the lengthy post!)
 
I'm not sure if this question's been asked already (and if it has, sorry!)-- but for the table/flex-box columns, could you (theoretically?) put two div-boxes next to one another?

For context, I'm relatively new to the BBcoding business-- having only a basic concept of div-boxes and fieldboxes and what-have-you. Now, I'm attempting to put all those things together to create a CS template (of sorts)
(here is the prosecutor post) with a format inspired by this post and this post (both by @darkflames13 ).

Obviously, I don't want to steal their coding (that would be rude!)-- and already I've attempted to use both the float feature (boy-oh-boy was that a mistake) and making the widths of both div-boxes small enough so that they
should have fit in one line. When that didn't work, I tried the columns method mentioned in the F.A.Q. section of this thread-- adjusting the length and width to be the same as my div-boxes...and seeing as how the end result looked like a digital crime scene, I caved and decided to ask for help.

Also, one more question. Is there someway to re-size images with coding? Or do I need to use an image-resizer on the web?

(Sorry for the lengthy post!)
From what I saw from your code, I think simply adding display:inline-block to your two column divs should put them on the same line beside each other :)

If you're interested in using flex boxes instead tho, I explained them a bit in a post here. Just remove the code for the rows from it and you should have the bare bones for a 2 column layout!

Edit: forgot to answer the other question :'D You can use divs to resize an image, but you're going to have to set it as a background image with the background-size property set to cover c:
 
Last edited:
  • Thank You
Reactions: Calypso Major
Thank you so much! I used the inline-block method, and they both showed up side by side! (^ - ^)

...However, now I'm having an issue of them not vertically lining up with one another. (o . o '') Both of my div-boxes are the same height, and the only difference between the two is a (overflow-y: scroll) property to the second one. Now, the second one is "raised" higher than my first, and I'm sort of stuck on what went wrong.

Could it just be the format of my inline-blocks?

( Link here )
 
Thank you so much! I used the inline-block method, and they both showed up side by side! (^ - ^)

...However, now I'm having an issue of them not vertically lining up with one another. (o . o '') Both of my div-boxes are the same height, and the only difference between the two is a (overflow-y: scroll) property to the second one. Now, the second one is "raised" higher than my first, and I'm sort of stuck on what went wrong.

Could it just be the format of my inline-blocks?

( Link here )
Try removing the line break between the first column's closing div and the second column's opening one (if there is one). If that doesn't work, try adding a "vertical-align:top;" to at least one of them :)
 
Try removing the line break between the first column's closing div and the second column's opening one (if there is one). If that doesn't work, try adding a "vertical-align:top;" to at least one of them :)

Thank you again! I added the "vertical-align: top;" to my first box, and it worked!
 
  • Like
Reactions: darkflames13
Is there anyway to make the bullet points mobile friendly? They always shift too far to the right and cut off the text when I try and combine them with my code.
 
Is there anyway to make the bullet points mobile friendly? They always shift too far to the right and cut off the text when I try and combine them with my code.
Not sure but, maybe try wrapping them around a div with a max-width set?
 
so i'm kinda struggling with trying to make my coding look all pretty and stuff but i've figured out some stuff so far!! but i'm stuck lmfao
basically, what i need help with is creating the other textbox that i'd put all of the major info in. i wanted it to be next to the lil box i created and have the scrolling function (which i'm also confused about)
on top of all that, i wanted the teal text (ie appearance, first look, etc) to act as tabs. so you'd click on the words and it'd take you to a different textbook with different info, but i can't figure out how to do that either..

Code:
[div=display: inline-block; height: 500px; width: 220px; vertical-align: top; background-color: #ffffff; margin: auto;][div="flex: 1; background-color: #ffffff;"][IMG]https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fd2evmtiohlxukx.cloudfront.net%2Fuploads%2Fmodel-profile-images%2Fdiego-barrueco%2F1971_DIEGO8371-1-826x850.jpg&f=1[/IMG]  [/div]

 [div=height: 50px; width: 400px; background-color: #fffff; margin: auto; margin-top: -45px; font-family: Chaucer; color: #ffdab9; letter-spacing: 3px;]

[CENTER]luca jaxon amello[/CENTER]
[/div][div=color: #7FFFD4; text-align: center; font-family: Chaucer; font-size: 0.5em;]
A HEARTBREAKING LOSER[/div]
[div= color: #7FFFD4; text-align: center; font-family: Chaucer; letter-spacing: 2px; font-size: .8em;]appearance

first look

digging a little deeper

relationships

history[/div][/div]

code2.PNG

iu




luca jaxon amello​

A HEARTBREAKING LOSER

appearance

first look

digging a little deeper

relationships

history


ik im helpless but thank you to anyone who tries to assist me !!
 
Last edited:
Hey guys. So I am not new to coding, but I have never had to build my own div code. Usually I've used codes others have provided for me, and I end up altering the code into something new by accident. I tried exploring with in in my own thread recently, and I just don't get it. I recently wanted to recode an old layout for a CS but I am not sure what the proper div codes I need to get what I am looking for. I want the general layout of the CS to remain the same, the only difference is that I don't want there to be an accordion but a text box with a scroll bar. I tried doing it myself and couldn't get the code to work.
Screenshot

The link above is the current layout of the post. None of it is using div. Here is what it looks like when editing the post.
Code:
[LEFT][imga=left]http://i292.photobucket.com/albums/mm10/violaceous/1212121images%201_zpsszqhowwf.png[/imga][/LEFT]
[RIGHT]"Don't let the looks fool you, I was made with more spice than sugar, sugar."
-Ariah[/RIGHT]
[LEFT][/LEFT]
[CENTER][accordion=bright|50%]
{slide=⌈GENERAL INFO⌋|center}
Name
Ariah

Age

Sex

Gender

Orientation

{/slide}

{slide=⌈COMMITTED CRIME(S)⌋|center|open}
Crimes

Level
[1][2][3]

Gang

Position

{/slide}

{slide=⌈APPEARANCE⌋|center|open}
Facial Structure

Body Structure

Eye Color

Hair Color

Height

Weight

Skin Tone

Scars

Tattoos

Piercings

Marks

{/slide}

{slide=⌈PERSONALITY⌋|center|open}
Five Good Traits

Five Bad Traits

Details

Quirks

Like

Dislikes

{/slide}

{slide=⌈STRENGHTS⌋|center|open}
Arsenal

Physical

Mental

Contraband

{/slide}

{/slide}
{slide=⌈WEAKNESSES⌋|center|open}
Fears

Physical

Mental

{/slide}

{/slide}
{slide=⌈RELATIONSHIPS⌋|center|open}

Allies

Enemies

{/slide}

{/slide}
{slide=⌈MISC⌋|center|open}

Theme Song

Extra

{/slide}

[/accordion]
[/CENTER]
 
Hello there great and powerful coding wizards. I'm trying to get these two pictures to align side by side in the character sheet below. I somehow managed to do it on another sheet using two different images I was working on while I was drunk, but that attempt didn't work when I applied the same method to this sheet.

Also, how does one center a youtube video that is inside a div box on a sheet?

volt-jpg.161622
voltcostume-jpg.161623


Code:
[div=max-width: 800px !important; max-height: 900px; padding: 10px; margin: auto; border: 10px #94f9f9; border-radius: 15px;
background-image: url(https://i.pinimg.com/originals/11/7e/d3/117ed3a30f949a6cacbb576ae93e4c38.jpg);
background-position: repeat center fixed][div=background-color: #fff; max-width: 750px !important; padding: 20px; margin: 10px; border: 10px #fff; border-radius: 30%; font-size: 40px; text-align: center; color: black;][FONT=Aldrich]【 Matthew Volt 】[/FONT][/div][div=border-radius: 15px; margin: 10px; padding: 15px; border: 10px #000 solid; background-color: #fff; max-height: 500px; overflow-y: scroll; overflow-x: hidden; max-width: 800px !important;][div="position: center; display:inline-block; border-radius: 4px; width: 750px; height: 32px;"][div="opacity: 0.5; width: 750px; height: 32px; overflow: hidden;"][div="position: center; top: -134px;"][media=youtube]Tc-XxqEyolU[/media][/div][/div][/div]

[imga=left]https://www.iwakuroleplay.com/attachments/volt-jpg.161622/[/imga][imga=right]https://www.iwakuroleplay.com/attachments/voltcostume-jpg.161623/[/imga]

[tabs]
[tab=Basic]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Basic 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;][FONT=Aldrich][SIZE=4][B]Full Name:[/B][/SIZE][/FONT]
[INDENT]Matthew Michael Volt[/INDENT]

[FONT=Aldrich][SIZE=4][B]Current Alias:[/B][/SIZE][/FONT]
[INDENT]Havoc[/INDENT]

[FONT=Aldrich][SIZE=4][B]Nicknames:[/B][/SIZE][/FONT]
[INDENT]Zappy, Shocker[/INDENT]

[FONT=Aldrich][SIZE=4][B]Age:[/B][/SIZE][/FONT]
[INDENT]32[/INDENT]

[FONT=Aldrich][SIZE=4][B]Gender:[/B][/SIZE][/FONT]
[INDENT]Male[/INDENT]

[FONT=Aldrich][SIZE=4][B]Race:[/B][/SIZE][/FONT]
[INDENT]Mutate[/INDENT]

[FONT=Aldrich][SIZE=4][B]Height:[/B][/SIZE][/FONT]
[INDENT]6' - 2"[/INDENT]

[/div][/tab]
[tab=Background]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Background 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;][FONT=Aldrich][SIZE=4][B]History:[/B][/SIZE][/FONT]
[INDENT]Matthew Volt was dropped off at an orphanage when he was just an infant. Growing up out of an orphanage in Detroit was rough. Getting called Zappy due to the fact that he somehow managed to generate enough static electricity to shock quite literally everyone he touched was even worse, and really not helpful due to his unfortunate last name. He became a target to bullies due to his quiet nature, and when he stood his ground he was met with physical violence. He could deal with that. When he was taking the train home, things went far past what he was capable of dealing with.

One of the guys who had been giving him a hard time was involved in some sort of gang. He got jumped on the platform by a small group of gang members, and after taking a severe beating, was thrown down onto the tracks. He hit the third rail, and the entire west side of Detroit blacked out. When he woke up, he was in an interrogation room. Apparently the guys who had attacked him had been electrocuted. He was soon transferred into a training program in order to gain control of his abilities. It was all very obscure, no legitimate names or clear answers. This program turned out to be some sort of military prep school, where he learned a great deal about hand to hand combat, as well as firearms and other weapons. While he thrived in this environment, he was fearful of what their end game was. After all, they were turning empowered kids into highly effective weapons, without much of a moral code.

He didn't do that great in close-combat training, seeing as he was the only kid using restraint. It was noted how his base output voltage level increased drastically when he was under duress. He doesn't like to think about how they figured that out. After several ineffective attempts at training him in using his electrokinesis during close combat, they focused on his technopathy instead.

He was immediately aware of how they were using him. His technopathy training had garnered whoever this group was a great deal of information on several things that anyone in a 'training facility' should not know. He had to give them something, otherwise he'd probably get thrown back into combat training, and with some of the information he got into, he knew that that could be fatal for him. The 'problems' he was given to solve did not originate with this group, and he used this time to gain an understanding of how the facility worked and what he could manipulate within it. He became increasingly aware of the security stationed around the facility, and how it seemed like he and the other students here were being kept in rather than threats being kept out.

Slowly but surely he formed a plan of escape with a couple of other kids that managed to keep their heads on straight, and after the fight of their lives they managed to actually get away. He helped them establish identities online, faking photos and records in order to let them blend in and start new lives, leaving their pasts behind them. He chose to stay off the grid, and exposed the facility when they had a small electrical fire that caused emergency crews to flock to the scenes. Investigations were launched immediately when files leaked out about the treatment of the children at the facility, but the results didn't satisfy the teen. He decided then and there that he'd handle things on his own.

With his newfound freedom, Matthew took on the alias Havoc, in memory of his role in the escape. He began his work as a vigilante, and garnered some fame and infamy for his ability to wipe the slate clean. He helped people who needed it, as he could make them disappear and slide into a new life. He frequently took out major threats when he came into a new area, some being left for police with damning evidence that would keep them in whatever dark hole they got shoved in, and some getting the electric chair for their crimes. He never stayed anywhere for too long, since he was aiming to avoid clashing with other do-gooders.

Of course, he couldn't avoid potential problems forever. He crossed paths with Behemoth a few times while the guy was still with the Justiciars, occasionally fighting with him and occasionally helping him out. It depended on the day, mission, and target. Eventually, Behemoth approached him regarding a new method of fighting crime. One that he was already well versed with. They hadn't killed each other when they were on opposing sides and there was some mutual respect there. He initially disliked the idea of working in a group, since he really didn't want to end up in another situation where his abilities would be abused, but he knew Behemoth well enough to make an educated decision. The guy was a bit of an ass sometimes, but he wasn't that big of an ass, so Havoc became a founding member of the Crusaders.[/INDENT]

[FONT=Aldrich][SIZE=4][B]Personality:[/B][/SIZE][/FONT]
[INDENT]Matthew is a calm individual. Being relaxed under pressure is one of his specialties and he very rarely breaks his composure. He can be sociable when he has to be, though he tends to get worn out by too much contact. He can be a bit sarcastic when he feels like it and enjoys giving people a bit of grief when they do something stupid. Trickery and relatively harmless pranks also have a tendency to occur around him when he gets bored. He likes to believe that he's doing something truly good for the world by working with the Crusaders, and keeps a careful balance between right and wrong in the punishment of criminals.[/INDENT]

[/div]
[/tab]
[tab=Gear]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Gear 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;][B][FONT=Aldrich][SIZE=4]Equipment:[/SIZE][/FONT][/B]
[INDENT]RUBBER GLOVES AND RUBBER SOLED BOOTS - due to the constant charges released by his body, he wears rubber gloves and boots in order to prevent himself from accidentally short circuiting any technological devices when he isn't off saving the world.

SUIT - composed of a self-healing metal and synthetic material weave, this suit is highly conductive to electricity and magnifies his electrokinetic attacks. it's also bullet resistant, not bullet proof. the suit repairs slower than average due to the constant charges being released by him, so if he gets shot multiple times in the same spot in a rapid time frame, the bullets could get through and actually cause injury. the suit doesn't hold up too well against heat, either.
[/indent]
[B][FONT=Aldrich][SIZE=4]Weapons:[/SIZE][/FONT][/B]
[indent]TWIN PISTOLS - in the case of him not being able to use his more combative abilities when he's a little too close to the action.

RIFLE - range is his best friend. give him a vantage point and watch him go.

BOOT KNIFE - for when shit really hits the fan.[/INDENT]
[/div][/tab]
[tab=Skills & Know-How]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Skills and Knowledges 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;]
[FONT=Aldrich][SIZE=4][B]Practical Know-How:[/B][/SIZE][/FONT]
[INDENT]HACKER - he knows all about getting into websites and systems that he really shouldn't be able to without getting caught. he can find information with absolute ease and cause a bit of havoc if building security controls are within his electronic reach.

HAND TO HAND - he doesn't like it, but he knows how to fight up close and personal when he has to. emphasis on doesn't like. putting himself in the "get your head punched off" range is just plain stupid. too much risk, considering that he doesn't have any kind of enhanced strength or durability.

MEDICAL - he knows how to treat injuries from a lot of personal experience. he generally doesn't trust anyone to treat his own injuries, considering the fact that he probably would end up zapping whoever was attempting the feat.
[/indent]
[FONT=Aldrich][SIZE=4][B]Skillset:[/B][/SIZE][/FONT]
[indent]GUNNER - he's had extensive firearms training and has a very keen eye. this comes in handy when his abilities are compromised, since it's relatively easy to negate his more offensive one.

TACTICAL - he was trained during his stint in pseudo-military prep school in order to make plans and adapt to the situation at hand. he doesn't like operating without a game plan and generally refuses to take on a mission until something vaguely reasonable is framed out.

PAIN TOLERANCE - he can operate under duress. ignoring pain and tuning it out until he can actually do something about it is something that he was trained to do. it probably isn't the healthiest thing in the world, but it does the trick during a fight.

[/INDENT]

[FONT=Aldrich][SIZE=4][B]Powers:[/B][/SIZE][/FONT]
[INDENT]TECHNOPATH - he can manipulate technology by utilizing his electrokinesis to access a mental interface from which he can control a given piece of technology. this requires a certain proximity depending on the level of difficulty.

ELECTROKINESIS - his body generates a high level of electricity that he is able to manipulate in order to fry security systems, zap opponents, or occasionally shock people that need a slap on the wrist. it's effective in ranged format as well as close combat, but he really doesn't like getting in close to his opponents.[/INDENT]

[FONT=Aldrich][SIZE=4][B]Weaknesses:[/B][/SIZE][/FONT]
[INDENT]LOW TECH - his technopathy doesn't work on purely mechanical devices, and the older and more outdated the technology is, the harder it is for him to manipulate.

PROXIMITY - his technopathy requires him to be close enough to observe what he is manipulating.

SHORT CIRCUIT - if he attempts to use his electrokinesis when his skin is in contact with water, there is an extremely high risk of him zapping himself instead.

NON-CONDUCTIVE MATTER - materials such as rubber and silicate are extremely resistant to electrical charges and pose some aggravating problems when worn by opponents.

MAGNETS - electrokinesis gets whacky as all hell around magnets. his ability to aim any impulses gets extremely distorted, and there is a risk of him short-circuiting if he makes contact with a strong enough magnet. not to mention his suit is made up of some metal compounds, so he could get stuck on a powerful enough magnet. his technopathy would also get glitchy when exposed to high powered magnets.[/INDENT]

[/div]
[/tab]
[tab=Relational]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Relational 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;][B][FONT=Aldrich][SIZE=4]Affiliations:[/SIZE][/FONT][/B]
[INDENT]The Nobody Kids - a group of empowered people who had escaped a highly questionable government institution and garnered secret identities for themselves, forging backgrounds and starting their lives over again.

The Crusaders[/INDENT]

[FONT=Aldrich][SIZE=4][B]What made him cross the line?[/B][/SIZE][/FONT]
[INDENT]He was always over the line. People don't stop until they are forced to, and while sometimes this force doesn't have to be fatal, sometimes it does. He holds no issue with that fact.[/INDENT][/tab][/tabs]
[/div][/div][/div]

【 Matthew Volt 】

{/slide}
{slide}


  • 《 Basic 》
    Full Name:
    Matthew Michael Volt​

    Current Alias:
    Havoc​

    Nicknames:
    Zappy, Shocker​

    Age:
    32​

    Gender:
    Male​

    Race:
    Mutate​

    Height:
    6' - 2"​


  • 《 Background 》
    History:
    Matthew Volt was dropped off at an orphanage when he was just an infant. Growing up out of an orphanage in Detroit was rough. Getting called Zappy due to the fact that he somehow managed to generate enough static electricity to shock quite literally everyone he touched was even worse, and really not helpful due to his unfortunate last name. He became a target to bullies due to his quiet nature, and when he stood his ground he was met with physical violence. He could deal with that. When he was taking the train home, things went far past what he was capable of dealing with.

    One of the guys who had been giving him a hard time was involved in some sort of gang. He got jumped on the platform by a small group of gang members, and after taking a severe beating, was thrown down onto the tracks. He hit the third rail, and the entire west side of Detroit blacked out. When he woke up, he was in an interrogation room. Apparently the guys who had attacked him had been electrocuted. He was soon transferred into a training program in order to gain control of his abilities. It was all very obscure, no legitimate names or clear answers. This program turned out to be some sort of military prep school, where he learned a great deal about hand to hand combat, as well as firearms and other weapons. While he thrived in this environment, he was fearful of what their end game was. After all, they were turning empowered kids into highly effective weapons, without much of a moral code.

    He didn't do that great in close-combat training, seeing as he was the only kid using restraint. It was noted how his base output voltage level increased drastically when he was under duress. He doesn't like to think about how they figured that out. After several ineffective attempts at training him in using his electrokinesis during close combat, they focused on his technopathy instead.

    He was immediately aware of how they were using him. His technopathy training had garnered whoever this group was a great deal of information on several things that anyone in a 'training facility' should not know. He had to give them something, otherwise he'd probably get thrown back into combat training, and with some of the information he got into, he knew that that could be fatal for him. The 'problems' he was given to solve did not originate with this group, and he used this time to gain an understanding of how the facility worked and what he could manipulate within it. He became increasingly aware of the security stationed around the facility, and how it seemed like he and the other students here were being kept in rather than threats being kept out.

    Slowly but surely he formed a plan of escape with a couple of other kids that managed to keep their heads on straight, and after the fight of their lives they managed to actually get away. He helped them establish identities online, faking photos and records in order to let them blend in and start new lives, leaving their pasts behind them. He chose to stay off the grid, and exposed the facility when they had a small electrical fire that caused emergency crews to flock to the scenes. Investigations were launched immediately when files leaked out about the treatment of the children at the facility, but the results didn't satisfy the teen. He decided then and there that he'd handle things on his own.

    With his newfound freedom, Matthew took on the alias Havoc, in memory of his role in the escape. He began his work as a vigilante, and garnered some fame and infamy for his ability to wipe the slate clean. He helped people who needed it, as he could make them disappear and slide into a new life. He frequently took out major threats when he came into a new area, some being left for police with damning evidence that would keep them in whatever dark hole they got shoved in, and some getting the electric chair for their crimes. He never stayed anywhere for too long, since he was aiming to avoid clashing with other do-gooders.

    Of course, he couldn't avoid potential problems forever. He crossed paths with Behemoth a few times while the guy was still with the Justiciars, occasionally fighting with him and occasionally helping him out. It depended on the day, mission, and target. Eventually, Behemoth approached him regarding a new method of fighting crime. One that he was already well versed with. They hadn't killed each other when they were on opposing sides and there was some mutual respect there. He initially disliked the idea of working in a group, since he really didn't want to end up in another situation where his abilities would be abused, but he knew Behemoth well enough to make an educated decision. The guy was a bit of an ass sometimes, but he wasn't that big of an ass, so Havoc became a founding member of the Crusaders.​

    Personality:
    Matthew is a calm individual. Being relaxed under pressure is one of his specialties and he very rarely breaks his composure. He can be sociable when he has to be, though he tends to get worn out by too much contact. He can be a bit sarcastic when he feels like it and enjoys giving people a bit of grief when they do something stupid. Trickery and relatively harmless pranks also have a tendency to occur around him when he gets bored. He likes to believe that he's doing something truly good for the world by working with the Crusaders, and keeps a careful balance between right and wrong in the punishment of criminals.​



  • 《 Gear 》
    Equipment:
    RUBBER GLOVES AND RUBBER SOLED BOOTS - due to the constant charges released by his body, he wears rubber gloves and boots in order to prevent himself from accidentally short circuiting any technological devices when he isn't off saving the world.

    SUIT - composed of a self-healing metal and synthetic material weave, this suit is highly conductive to electricity and magnifies his electrokinetic attacks. it's also bullet resistant, not bullet proof. the suit repairs slower than average due to the constant charges being released by him, so if he gets shot multiple times in the same spot in a rapid time frame, the bullets could get through and actually cause injury. the suit doesn't hold up too well against heat, either.
    Weapons:
    TWIN PISTOLS - in the case of him not being able to use his more combative abilities when he's a little too close to the action.

    RIFLE - range is his best friend. give him a vantage point and watch him go.

    BOOT KNIFE - for when shit really hits the fan.​

  • 《 Skills and Knowledges 》

    Practical Know-How:
    HACKER - he knows all about getting into websites and systems that he really shouldn't be able to without getting caught. he can find information with absolute ease and cause a bit of havoc if building security controls are within his electronic reach.

    HAND TO HAND - he doesn't like it, but he knows how to fight up close and personal when he has to. emphasis on doesn't like. putting himself in the "get your head punched off" range is just plain stupid. too much risk, considering that he doesn't have any kind of enhanced strength or durability.

    MEDICAL - he knows how to treat injuries from a lot of personal experience. he generally doesn't trust anyone to treat his own injuries, considering the fact that he probably would end up zapping whoever was attempting the feat.
    Skillset:
    GUNNER - he's had extensive firearms training and has a very keen eye. this comes in handy when his abilities are compromised, since it's relatively easy to negate his more offensive one.

    TACTICAL - he was trained during his stint in pseudo-military prep school in order to make plans and adapt to the situation at hand. he doesn't like operating without a game plan and generally refuses to take on a mission until something vaguely reasonable is framed out.

    PAIN TOLERANCE - he can operate under duress. ignoring pain and tuning it out until he can actually do something about it is something that he was trained to do. it probably isn't the healthiest thing in the world, but it does the trick during a fight.


    Powers:
    TECHNOPATH - he can manipulate technology by utilizing his electrokinesis to access a mental interface from which he can control a given piece of technology. this requires a certain proximity depending on the level of difficulty.

    ELECTROKINESIS - his body generates a high level of electricity that he is able to manipulate in order to fry security systems, zap opponents, or occasionally shock people that need a slap on the wrist. it's effective in ranged format as well as close combat, but he really doesn't like getting in close to his opponents.​

    Weaknesses:
    LOW TECH - his technopathy doesn't work on purely mechanical devices, and the older and more outdated the technology is, the harder it is for him to manipulate.

    PROXIMITY - his technopathy requires him to be close enough to observe what he is manipulating.

    SHORT CIRCUIT - if he attempts to use his electrokinesis when his skin is in contact with water, there is an extremely high risk of him zapping himself instead.

    NON-CONDUCTIVE MATTER - materials such as rubber and silicate are extremely resistant to electrical charges and pose some aggravating problems when worn by opponents.

    MAGNETS - electrokinesis gets whacky as all hell around magnets. his ability to aim any impulses gets extremely distorted, and there is a risk of him short-circuiting if he makes contact with a strong enough magnet. not to mention his suit is made up of some metal compounds, so he could get stuck on a powerful enough magnet. his technopathy would also get glitchy when exposed to high powered magnets.​



  • 《 Relational 》
    Affiliations:
    The Nobody Kids - a group of empowered people who had escaped a highly questionable government institution and garnered secret identities for themselves, forging backgrounds and starting their lives over again.

    The Crusaders​

    What made him cross the line?
    He was always over the line. People don't stop until they are forced to, and while sometimes this force doesn't have to be fatal, sometimes it does. He holds no issue with that fact.​

 
so i'm kinda struggling with trying to make my coding look all pretty and stuff but i've figured out some stuff so far!! but i'm stuck lmfao
basically, what i need help with is creating the other textbox that i'd put all of the major info in. i wanted it to be next to the lil box i created and have the scrolling function (which i'm also confused about)
on top of all that, i wanted the teal text (ie appearance, first look, etc) to act as tabs. so you'd click on the words and it'd take you to a different textbook with different info, but i can't figure out how to do that either..

Code:
[div=display: inline-block; height: 500px; width: 220px; vertical-align: top; background-color: #ffffff; margin: auto;][div="flex: 1; background-color: #ffffff;"][IMG]https://images.duckduckgo.com/iu/?u=https%3A%2F%2Fd2evmtiohlxukx.cloudfront.net%2Fuploads%2Fmodel-profile-images%2Fdiego-barrueco%2F1971_DIEGO8371-1-826x850.jpg&f=1[/IMG]  [/div]

 [div=height: 50px; width: 400px; background-color: #fffff; margin: auto; margin-top: -45px; font-family: Chaucer; color: #ffdab9; letter-spacing: 3px;]

[CENTER]luca jaxon amello[/CENTER]
[/div][div=color: #7FFFD4; text-align: center; font-family: Chaucer; font-size: 0.5em;]
A HEARTBREAKING LOSER[/div]
[div= color: #7FFFD4; text-align: center; font-family: Chaucer; letter-spacing: 2px; font-size: .8em;]appearance

first look

digging a little deeper

relationships

history[/div][/div]


iu




luca jaxon amello​

A HEARTBREAKING LOSER

appearance

first look

digging a little deeper

relationships

history


ik im helpless but thank you to anyone who tries to assist me !!

Sounds like what you're looking for is stabs!

Unfortunately, I don't have a guide out for it yet, but I do have a template for the base of it. It's pretty much what I use for all my stabs works xD Template can be found here. It involves a bit of math with the heights, those have to be pretty precise otherwise things may break, but don't let that intimidate you! The formulas you'll be needing are in bold. That template doesn't have the stabs background cheat yet so you're going to have to Frankenstein it up with the stabs background instructions from this post as well.

Try having a go at it and let me know if you have any troubles with it or have any further questions :D

A few extra notes to help you out with understanding the formulas I have in the post:
stabs_height - refers to the height you set the stabs to. It's the second parameter following the 'x' in the stabs bbcode.
content_div_height - this refers to the height of the div found inside the slide slave tag.
num_tabs - number of tabs you plan on having.
height - height of your outermost div.
tab_width - width of your tabs (which can't really be seen in the template cause they're cut off, but it's important to set this to make it mobile friendly!).
outermost_max-width - max-width of your outermost div.

unknown.png


Planning is important for stabs layouts. It's best to know how tall you want your layout to be before proceeding to coding it. Remember, stabs here on iwaku have a limit on their height. The max height of your layout is also dependant on how many tabs you'll be having so plan those ahead as well. It's harder to change the number of tabs you have when you've already started coding your layout.


Hey guys. So I am not new to coding, but I have never had to build my own div code. Usually I've used codes others have provided for me, and I end up altering the code into something new by accident. I tried exploring with in in my own thread recently, and I just don't get it. I recently wanted to recode an old layout for a CS but I am not sure what the proper div codes I need to get what I am looking for. I want the general layout of the CS to remain the same, the only difference is that I don't want there to be an accordion but a text box with a scroll bar. I tried doing it myself and couldn't get the code to work.
Screenshot

The link above is the current layout of the post. None of it is using div. Here is what it looks like when editing the post.
Code:
[LEFT][imga=left]http://i292.photobucket.com/albums/mm10/violaceous/1212121images%201_zpsszqhowwf.png[/imga][/LEFT]
[RIGHT]"Don't let the looks fool you, I was made with more spice than sugar, sugar."
-Ariah[/RIGHT]
[LEFT][/LEFT]
[CENTER][accordion=bright|50%]
{slide=⌈GENERAL INFO⌋|center}
Name
Ariah

Age

Sex

Gender

Orientation

{/slide}

{slide=⌈COMMITTED CRIME(S)⌋|center|open}
Crimes

Level
[1][2][3]

Gang

Position

{/slide}

{slide=⌈APPEARANCE⌋|center|open}
Facial Structure

Body Structure

Eye Color

Hair Color

Height

Weight

Skin Tone

Scars

Tattoos

Piercings

Marks

{/slide}

{slide=⌈PERSONALITY⌋|center|open}
Five Good Traits

Five Bad Traits

Details

Quirks

Like

Dislikes

{/slide}

{slide=⌈STRENGHTS⌋|center|open}
Arsenal

Physical

Mental

Contraband

{/slide}

{/slide}
{slide=⌈WEAKNESSES⌋|center|open}
Fears

Physical

Mental

{/slide}

{/slide}
{slide=⌈RELATIONSHIPS⌋|center|open}

Allies

Enemies

{/slide}

{/slide}
{slide=⌈MISC⌋|center|open}

Theme Song

Extra

{/slide}

[/accordion]
[/CENTER]

Hey there! You mentioned trying to do it yourself before? Could you perhaps post the code of your attempt so we can see what went wrong and how we can fix it? It may better to fix already existing code rather than having you start over from scratch c:


Hello there great and powerful coding wizards. I'm trying to get these two pictures to align side by side in the character sheet below. I somehow managed to do it on another sheet using two different images I was working on while I was drunk, but that attempt didn't work when I applied the same method to this sheet.

Also, how does one center a youtube video that is inside a div box on a sheet?

volt-jpg.161622
voltcostume-jpg.161623


Code:
[div=max-width: 800px !important; max-height: 900px; padding: 10px; margin: auto; border: 10px #94f9f9; border-radius: 15px;
background-image: url(https://i.pinimg.com/originals/11/7e/d3/117ed3a30f949a6cacbb576ae93e4c38.jpg);
background-position: repeat center fixed][div=background-color: #fff; max-width: 750px !important; padding: 20px; margin: 10px; border: 10px #fff; border-radius: 30%; font-size: 40px; text-align: center; color: black;][FONT=Aldrich]【 Matthew Volt 】[/FONT][/div][div=border-radius: 15px; margin: 10px; padding: 15px; border: 10px #000 solid; background-color: #fff; max-height: 500px; overflow-y: scroll; overflow-x: hidden; max-width: 800px !important;][div="position: center; display:inline-block; border-radius: 4px; width: 750px; height: 32px;"][div="opacity: 0.5; width: 750px; height: 32px; overflow: hidden;"][div="position: center; top: -134px;"][media=youtube]Tc-XxqEyolU[/media][/div][/div][/div]

[imga=left]https://www.iwakuroleplay.com/attachments/volt-jpg.161622/[/imga][imga=right]https://www.iwakuroleplay.com/attachments/voltcostume-jpg.161623/[/imga]

[tabs]
[tab=Basic]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Basic 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;][FONT=Aldrich][SIZE=4][B]Full Name:[/B][/SIZE][/FONT]
[INDENT]Matthew Michael Volt[/INDENT]

[FONT=Aldrich][SIZE=4][B]Current Alias:[/B][/SIZE][/FONT]
[INDENT]Havoc[/INDENT]

[FONT=Aldrich][SIZE=4][B]Nicknames:[/B][/SIZE][/FONT]
[INDENT]Zappy, Shocker[/INDENT]

[FONT=Aldrich][SIZE=4][B]Age:[/B][/SIZE][/FONT]
[INDENT]32[/INDENT]

[FONT=Aldrich][SIZE=4][B]Gender:[/B][/SIZE][/FONT]
[INDENT]Male[/INDENT]

[FONT=Aldrich][SIZE=4][B]Race:[/B][/SIZE][/FONT]
[INDENT]Mutate[/INDENT]

[FONT=Aldrich][SIZE=4][B]Height:[/B][/SIZE][/FONT]
[INDENT]6' - 2"[/INDENT]

[/div][/tab]
[tab=Background]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Background 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;][FONT=Aldrich][SIZE=4][B]History:[/B][/SIZE][/FONT]
[INDENT]Matthew Volt was dropped off at an orphanage when he was just an infant. Growing up out of an orphanage in Detroit was rough. Getting called Zappy due to the fact that he somehow managed to generate enough static electricity to shock quite literally everyone he touched was even worse, and really not helpful due to his unfortunate last name. He became a target to bullies due to his quiet nature, and when he stood his ground he was met with physical violence. He could deal with that. When he was taking the train home, things went far past what he was capable of dealing with.

One of the guys who had been giving him a hard time was involved in some sort of gang. He got jumped on the platform by a small group of gang members, and after taking a severe beating, was thrown down onto the tracks. He hit the third rail, and the entire west side of Detroit blacked out. When he woke up, he was in an interrogation room. Apparently the guys who had attacked him had been electrocuted. He was soon transferred into a training program in order to gain control of his abilities. It was all very obscure, no legitimate names or clear answers. This program turned out to be some sort of military prep school, where he learned a great deal about hand to hand combat, as well as firearms and other weapons. While he thrived in this environment, he was fearful of what their end game was. After all, they were turning empowered kids into highly effective weapons, without much of a moral code.

He didn't do that great in close-combat training, seeing as he was the only kid using restraint. It was noted how his base output voltage level increased drastically when he was under duress. He doesn't like to think about how they figured that out. After several ineffective attempts at training him in using his electrokinesis during close combat, they focused on his technopathy instead.

He was immediately aware of how they were using him. His technopathy training had garnered whoever this group was a great deal of information on several things that anyone in a 'training facility' should not know. He had to give them something, otherwise he'd probably get thrown back into combat training, and with some of the information he got into, he knew that that could be fatal for him. The 'problems' he was given to solve did not originate with this group, and he used this time to gain an understanding of how the facility worked and what he could manipulate within it. He became increasingly aware of the security stationed around the facility, and how it seemed like he and the other students here were being kept in rather than threats being kept out.

Slowly but surely he formed a plan of escape with a couple of other kids that managed to keep their heads on straight, and after the fight of their lives they managed to actually get away. He helped them establish identities online, faking photos and records in order to let them blend in and start new lives, leaving their pasts behind them. He chose to stay off the grid, and exposed the facility when they had a small electrical fire that caused emergency crews to flock to the scenes. Investigations were launched immediately when files leaked out about the treatment of the children at the facility, but the results didn't satisfy the teen. He decided then and there that he'd handle things on his own.

With his newfound freedom, Matthew took on the alias Havoc, in memory of his role in the escape. He began his work as a vigilante, and garnered some fame and infamy for his ability to wipe the slate clean. He helped people who needed it, as he could make them disappear and slide into a new life. He frequently took out major threats when he came into a new area, some being left for police with damning evidence that would keep them in whatever dark hole they got shoved in, and some getting the electric chair for their crimes. He never stayed anywhere for too long, since he was aiming to avoid clashing with other do-gooders.

Of course, he couldn't avoid potential problems forever. He crossed paths with Behemoth a few times while the guy was still with the Justiciars, occasionally fighting with him and occasionally helping him out. It depended on the day, mission, and target. Eventually, Behemoth approached him regarding a new method of fighting crime. One that he was already well versed with. They hadn't killed each other when they were on opposing sides and there was some mutual respect there. He initially disliked the idea of working in a group, since he really didn't want to end up in another situation where his abilities would be abused, but he knew Behemoth well enough to make an educated decision. The guy was a bit of an ass sometimes, but he wasn't that big of an ass, so Havoc became a founding member of the Crusaders.[/INDENT]

[FONT=Aldrich][SIZE=4][B]Personality:[/B][/SIZE][/FONT]
[INDENT]Matthew is a calm individual. Being relaxed under pressure is one of his specialties and he very rarely breaks his composure. He can be sociable when he has to be, though he tends to get worn out by too much contact. He can be a bit sarcastic when he feels like it and enjoys giving people a bit of grief when they do something stupid. Trickery and relatively harmless pranks also have a tendency to occur around him when he gets bored. He likes to believe that he's doing something truly good for the world by working with the Crusaders, and keeps a careful balance between right and wrong in the punishment of criminals.[/INDENT]

[/div]
[/tab]
[tab=Gear]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Gear 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;][B][FONT=Aldrich][SIZE=4]Equipment:[/SIZE][/FONT][/B]
[INDENT]RUBBER GLOVES AND RUBBER SOLED BOOTS - due to the constant charges released by his body, he wears rubber gloves and boots in order to prevent himself from accidentally short circuiting any technological devices when he isn't off saving the world.

SUIT - composed of a self-healing metal and synthetic material weave, this suit is highly conductive to electricity and magnifies his electrokinetic attacks. it's also bullet resistant, not bullet proof. the suit repairs slower than average due to the constant charges being released by him, so if he gets shot multiple times in the same spot in a rapid time frame, the bullets could get through and actually cause injury. the suit doesn't hold up too well against heat, either.
[/indent]
[B][FONT=Aldrich][SIZE=4]Weapons:[/SIZE][/FONT][/B]
[indent]TWIN PISTOLS - in the case of him not being able to use his more combative abilities when he's a little too close to the action.

RIFLE - range is his best friend. give him a vantage point and watch him go.

BOOT KNIFE - for when shit really hits the fan.[/INDENT]
[/div][/tab]
[tab=Skills & Know-How]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Skills and Knowledges 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;]
[FONT=Aldrich][SIZE=4][B]Practical Know-How:[/B][/SIZE][/FONT]
[INDENT]HACKER - he knows all about getting into websites and systems that he really shouldn't be able to without getting caught. he can find information with absolute ease and cause a bit of havoc if building security controls are within his electronic reach.

HAND TO HAND - he doesn't like it, but he knows how to fight up close and personal when he has to. emphasis on doesn't like. putting himself in the "get your head punched off" range is just plain stupid. too much risk, considering that he doesn't have any kind of enhanced strength or durability.

MEDICAL - he knows how to treat injuries from a lot of personal experience. he generally doesn't trust anyone to treat his own injuries, considering the fact that he probably would end up zapping whoever was attempting the feat.
[/indent]
[FONT=Aldrich][SIZE=4][B]Skillset:[/B][/SIZE][/FONT]
[indent]GUNNER - he's had extensive firearms training and has a very keen eye. this comes in handy when his abilities are compromised, since it's relatively easy to negate his more offensive one.

TACTICAL - he was trained during his stint in pseudo-military prep school in order to make plans and adapt to the situation at hand. he doesn't like operating without a game plan and generally refuses to take on a mission until something vaguely reasonable is framed out.

PAIN TOLERANCE - he can operate under duress. ignoring pain and tuning it out until he can actually do something about it is something that he was trained to do. it probably isn't the healthiest thing in the world, but it does the trick during a fight.

[/INDENT]

[FONT=Aldrich][SIZE=4][B]Powers:[/B][/SIZE][/FONT]
[INDENT]TECHNOPATH - he can manipulate technology by utilizing his electrokinesis to access a mental interface from which he can control a given piece of technology. this requires a certain proximity depending on the level of difficulty.

ELECTROKINESIS - his body generates a high level of electricity that he is able to manipulate in order to fry security systems, zap opponents, or occasionally shock people that need a slap on the wrist. it's effective in ranged format as well as close combat, but he really doesn't like getting in close to his opponents.[/INDENT]

[FONT=Aldrich][SIZE=4][B]Weaknesses:[/B][/SIZE][/FONT]
[INDENT]LOW TECH - his technopathy doesn't work on purely mechanical devices, and the older and more outdated the technology is, the harder it is for him to manipulate.

PROXIMITY - his technopathy requires him to be close enough to observe what he is manipulating.

SHORT CIRCUIT - if he attempts to use his electrokinesis when his skin is in contact with water, there is an extremely high risk of him zapping himself instead.

NON-CONDUCTIVE MATTER - materials such as rubber and silicate are extremely resistant to electrical charges and pose some aggravating problems when worn by opponents.

MAGNETS - electrokinesis gets whacky as all hell around magnets. his ability to aim any impulses gets extremely distorted, and there is a risk of him short-circuiting if he makes contact with a strong enough magnet. not to mention his suit is made up of some metal compounds, so he could get stuck on a powerful enough magnet. his technopathy would also get glitchy when exposed to high powered magnets.[/INDENT]

[/div]
[/tab]
[tab=Relational]
[div=background-color: #0080ff; margin: 10px; padding: 5px; max-width: 800px !important; font-size: 25px; text-align: left; color: black;][FONT=Aldrich]《 Relational 》[/FONT][/div][div=margin: 10px; padding: 5px; max-width: 800px !important; text-align: left; color: black;][B][FONT=Aldrich][SIZE=4]Affiliations:[/SIZE][/FONT][/B]
[INDENT]The Nobody Kids - a group of empowered people who had escaped a highly questionable government institution and garnered secret identities for themselves, forging backgrounds and starting their lives over again.

The Crusaders[/INDENT]

[FONT=Aldrich][SIZE=4][B]What made him cross the line?[/B][/SIZE][/FONT]
[INDENT]He was always over the line. People don't stop until they are forced to, and while sometimes this force doesn't have to be fatal, sometimes it does. He holds no issue with that fact.[/INDENT][/tab][/tabs]
[/div][/div][/div]

【 Matthew Volt 】

{/slide}
{slide}


  • 《 Basic 》
    Full Name:
    Matthew Michael Volt​

    Current Alias:
    Havoc​

    Nicknames:
    Zappy, Shocker​

    Age:
    32​

    Gender:
    Male​

    Race:
    Mutate​

    Height:
    6' - 2"​


  • 《 Background 》
    History:
    Matthew Volt was dropped off at an orphanage when he was just an infant. Growing up out of an orphanage in Detroit was rough. Getting called Zappy due to the fact that he somehow managed to generate enough static electricity to shock quite literally everyone he touched was even worse, and really not helpful due to his unfortunate last name. He became a target to bullies due to his quiet nature, and when he stood his ground he was met with physical violence. He could deal with that. When he was taking the train home, things went far past what he was capable of dealing with.

    One of the guys who had been giving him a hard time was involved in some sort of gang. He got jumped on the platform by a small group of gang members, and after taking a severe beating, was thrown down onto the tracks. He hit the third rail, and the entire west side of Detroit blacked out. When he woke up, he was in an interrogation room. Apparently the guys who had attacked him had been electrocuted. He was soon transferred into a training program in order to gain control of his abilities. It was all very obscure, no legitimate names or clear answers. This program turned out to be some sort of military prep school, where he learned a great deal about hand to hand combat, as well as firearms and other weapons. While he thrived in this environment, he was fearful of what their end game was. After all, they were turning empowered kids into highly effective weapons, without much of a moral code.

    He didn't do that great in close-combat training, seeing as he was the only kid using restraint. It was noted how his base output voltage level increased drastically when he was under duress. He doesn't like to think about how they figured that out. After several ineffective attempts at training him in using his electrokinesis during close combat, they focused on his technopathy instead.

    He was immediately aware of how they were using him. His technopathy training had garnered whoever this group was a great deal of information on several things that anyone in a 'training facility' should not know. He had to give them something, otherwise he'd probably get thrown back into combat training, and with some of the information he got into, he knew that that could be fatal for him. The 'problems' he was given to solve did not originate with this group, and he used this time to gain an understanding of how the facility worked and what he could manipulate within it. He became increasingly aware of the security stationed around the facility, and how it seemed like he and the other students here were being kept in rather than threats being kept out.

    Slowly but surely he formed a plan of escape with a couple of other kids that managed to keep their heads on straight, and after the fight of their lives they managed to actually get away. He helped them establish identities online, faking photos and records in order to let them blend in and start new lives, leaving their pasts behind them. He chose to stay off the grid, and exposed the facility when they had a small electrical fire that caused emergency crews to flock to the scenes. Investigations were launched immediately when files leaked out about the treatment of the children at the facility, but the results didn't satisfy the teen. He decided then and there that he'd handle things on his own.

    With his newfound freedom, Matthew took on the alias Havoc, in memory of his role in the escape. He began his work as a vigilante, and garnered some fame and infamy for his ability to wipe the slate clean. He helped people who needed it, as he could make them disappear and slide into a new life. He frequently took out major threats when he came into a new area, some being left for police with damning evidence that would keep them in whatever dark hole they got shoved in, and some getting the electric chair for their crimes. He never stayed anywhere for too long, since he was aiming to avoid clashing with other do-gooders.

    Of course, he couldn't avoid potential problems forever. He crossed paths with Behemoth a few times while the guy was still with the Justiciars, occasionally fighting with him and occasionally helping him out. It depended on the day, mission, and target. Eventually, Behemoth approached him regarding a new method of fighting crime. One that he was already well versed with. They hadn't killed each other when they were on opposing sides and there was some mutual respect there. He initially disliked the idea of working in a group, since he really didn't want to end up in another situation where his abilities would be abused, but he knew Behemoth well enough to make an educated decision. The guy was a bit of an ass sometimes, but he wasn't that big of an ass, so Havoc became a founding member of the Crusaders.​

    Personality:
    Matthew is a calm individual. Being relaxed under pressure is one of his specialties and he very rarely breaks his composure. He can be sociable when he has to be, though he tends to get worn out by too much contact. He can be a bit sarcastic when he feels like it and enjoys giving people a bit of grief when they do something stupid. Trickery and relatively harmless pranks also have a tendency to occur around him when he gets bored. He likes to believe that he's doing something truly good for the world by working with the Crusaders, and keeps a careful balance between right and wrong in the punishment of criminals.​



  • 《 Gear 》
    Equipment:
    RUBBER GLOVES AND RUBBER SOLED BOOTS - due to the constant charges released by his body, he wears rubber gloves and boots in order to prevent himself from accidentally short circuiting any technological devices when he isn't off saving the world.

    SUIT - composed of a self-healing metal and synthetic material weave, this suit is highly conductive to electricity and magnifies his electrokinetic attacks. it's also bullet resistant, not bullet proof. the suit repairs slower than average due to the constant charges being released by him, so if he gets shot multiple times in the same spot in a rapid time frame, the bullets could get through and actually cause injury. the suit doesn't hold up too well against heat, either.
    Weapons:
    TWIN PISTOLS - in the case of him not being able to use his more combative abilities when he's a little too close to the action.

    RIFLE - range is his best friend. give him a vantage point and watch him go.

    BOOT KNIFE - for when shit really hits the fan.​

  • 《 Skills and Knowledges 》

    Practical Know-How:
    HACKER - he knows all about getting into websites and systems that he really shouldn't be able to without getting caught. he can find information with absolute ease and cause a bit of havoc if building security controls are within his electronic reach.

    HAND TO HAND - he doesn't like it, but he knows how to fight up close and personal when he has to. emphasis on doesn't like. putting himself in the "get your head punched off" range is just plain stupid. too much risk, considering that he doesn't have any kind of enhanced strength or durability.

    MEDICAL - he knows how to treat injuries from a lot of personal experience. he generally doesn't trust anyone to treat his own injuries, considering the fact that he probably would end up zapping whoever was attempting the feat.
    Skillset:
    GUNNER - he's had extensive firearms training and has a very keen eye. this comes in handy when his abilities are compromised, since it's relatively easy to negate his more offensive one.

    TACTICAL - he was trained during his stint in pseudo-military prep school in order to make plans and adapt to the situation at hand. he doesn't like operating without a game plan and generally refuses to take on a mission until something vaguely reasonable is framed out.

    PAIN TOLERANCE - he can operate under duress. ignoring pain and tuning it out until he can actually do something about it is something that he was trained to do. it probably isn't the healthiest thing in the world, but it does the trick during a fight.


    Powers:
    TECHNOPATH - he can manipulate technology by utilizing his electrokinesis to access a mental interface from which he can control a given piece of technology. this requires a certain proximity depending on the level of difficulty.

    ELECTROKINESIS - his body generates a high level of electricity that he is able to manipulate in order to fry security systems, zap opponents, or occasionally shock people that need a slap on the wrist. it's effective in ranged format as well as close combat, but he really doesn't like getting in close to his opponents.​

    Weaknesses:
    LOW TECH - his technopathy doesn't work on purely mechanical devices, and the older and more outdated the technology is, the harder it is for him to manipulate.

    PROXIMITY - his technopathy requires him to be close enough to observe what he is manipulating.

    SHORT CIRCUIT - if he attempts to use his electrokinesis when his skin is in contact with water, there is an extremely high risk of him zapping himself instead.

    NON-CONDUCTIVE MATTER - materials such as rubber and silicate are extremely resistant to electrical charges and pose some aggravating problems when worn by opponents.

    MAGNETS - electrokinesis gets whacky as all hell around magnets. his ability to aim any impulses gets extremely distorted, and there is a risk of him short-circuiting if he makes contact with a strong enough magnet. not to mention his suit is made up of some metal compounds, so he could get stuck on a powerful enough magnet. his technopathy would also get glitchy when exposed to high powered magnets.​



  • 《 Relational 》
    Affiliations:
    The Nobody Kids - a group of empowered people who had escaped a highly questionable government institution and garnered secret identities for themselves, forging backgrounds and starting their lives over again.

    The Crusaders​

    What made him cross the line?
    He was always over the line. People don't stop until they are forced to, and while sometimes this force doesn't have to be fatal, sometimes it does. He holds no issue with that fact.​


I think the reason why it may have worked previously and not now is because of the image sizes. The image may be too big and thus one of them cuts to the next line. What you can try to do is resize the image in paint or through online photo editors (imgur has a built in one) and see if the smaller images will stay beside each other with your current code.

Alternatively, you can also set it up with divs. Instead of using imga, use the img bbcode and then wrap each of the images in a div that has a width set and display:inline-block; Then wrap another div around those two with a max-width and margin:auto set. The code should look something like this:

Code:
[div=margin:auto; max-width:400px !important;][div=width:200px; display:inline-block;][img]https://www.iwakuroleplay.com/attachments/volt-jpg.161622/[/img][/div][div=width:200px; display:inline-block;][img]https://www.iwakuroleplay.com/attachments/voltcostume-jpg.161623/[/img][/div][/div]

If you want to add a gap between the two images, just add a margin to the two divs around them :)
 
Status
Not open for further replies.