RESOURCE BBCode Help

Discussion in 'THE CODING LAB' started by rissa, Oct 13, 2017.

  1. 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

     
    • Love Love x 12
  2. 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 :)
     
  3. The name fits now but the text is on her face instead of at the bottom
     
  4. 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.



    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]




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



    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]

     
    • Thank Thank x 1
  5. 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]
    
     
  6. You could use a flexbox?

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


    Show Spoiler
    [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 Bucket of Rainbows x 1
  7. oh is that what those do? cool, thank ^^
    Any thoughts on how I could do columns? I'm still p new to divboxing ^^"
     
  8. 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]
    















    Attribute Points Class Gains Multiplier Total
    Strength 20 2 80
    Intelligence 240 1 240
    Vitality 60 2 120
    Constitution 90 1 90
    Wisdom 95 1 95
    Endurance 100 1.5*2 300
    Dexterity 15 1 15
    Agility 15 1 15
    Luck 15 1 15
    Charisma 45 1 45
    Perception 70 1.5*2 210
    Faith 60 1 60
    Karma 15 1 15
     
  9. 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

    Attribute Points Class Gains Multiplier Total
    Strength 20 2 80
    Intelligence 240 1 240
    Vitality 60 2 120
    Constitution 90 1 90
    Wisdom 95 1 95
    Endurance 100 1.5*2 300
    Dexterity 15 1 15
    Agility 15 1 15
    Luck 15 1 15
    Charisma 45 1 45
    Perception 70 1.5*2 210
    Faith 60 1 60
    Karma 15 1 15


    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]
     
    • Useful Useful x 1
  10. I figured it out: there's a code for columns in CSS that wasn't in the Divtionary
     
    • Like Like x 1
    • Nice execution! Nice execution! x 1
  11. 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!)
     
  12. 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:
     
    #171 darkflames13, Jul 11, 2018
    Last edited: Jul 11, 2018
    • Thank Thank x 1
  13. 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 )
     
  14. 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 :)
     
  15. Thank you again! I added the "vertical-align: top;" to my first box, and it worked!
     
    • Like Like x 1
  16. 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.
     
  17. Not sure but, maybe try wrapping them around a div with a max-width set?
     
  18. 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..

    el code (open)
    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]


    el what i want (open)
    code2.PNG


    [​IMG]




    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 !!
     
    #177 oerba, Jul 14, 2018 at 3:01 AM
    Last edited: Jul 14, 2018 at 3:24 AM