Closed Super beginner inquiries

[Ayama]

Okay, trying to learn BBCode from scratch is clearly a painful process, so I apologize in advance for the idiocy of the following questions- particularly if the answers are already floating around here somewhere and I just somehow missed them.

From what I can gather, whereas creating boxes or containers in BBCode+ was done with divs, in regular BBCode it is done either with

[border][/border]

or with

[bg][/bg]

I wanted to try a simple experimental layout, just to make sure I at least had the basics covered, and immediately started encountering problems.

The idea was to make one large container centered left to right on the page, with two smaller containers inside it side by side.

The large container followed the width definition just fine, but didn't follow the one for height until I added the transparent value- why is that?

Then once I put the smaller container inside the larger one, there were somehow top and left margins already in place, but since I did not code them I have no idea what their value is, which means that to offset them on the bottom of the container requires a bunch of trial and error, and I figured there had to be a better way to do this than eyeballing it pixel by pixel. So where did these margins come from and how can I replace them with margins of my own?

What it looks like so far:

 

[Novelight]

The large container followed the width definition just fine, but didn't follow the one for height until I added the transparent value- why is that?

I would recommend using border over bg. It's just easier all around, despite having to default the padding to 0 manually. BG also offers several inconsistencies that will not favor your code.

What you are most likely going for:​

I imagine that the problems came from the lack of box-sizing: border-box and the use of bg instead of border.

Remember that when you are defining a width or a height, apply box-sizing: border-box to have it properly show the width and the height. Otherwise, it'll go over the parent container.

The imaginery margin was born becaused the child border contained a height of 410px opposed to its parent border, which was 430px. I believe [bg] applies default margines, but I'm not too sure. It's best to just use border to avoid these problems, anyway.

 

[weldherwings]

edit: damn serobliss beat me to it LOOOL

howdy! so to answer for your margin question - that would be the padding~! If you don't set the padding on the bg or border, it automatically puts a padding on it (i think its 5px or 10px? i can't remember).
So your code should look like this instead with a set value of 5px for your first bg

[bg=transparent; padding:5px;margin: auto; height: 430px; width: 430px; border: 5px solid #ffffff;][bg=transparent; padding:0;height: 410px; width: 200px; border: 5px solid #ffffff;][/bg][/bg]

personally, i only use bg when i'm messing with accordions cause borders dont work for them. i find that bg often breaks codes sometimes, so i use borders. your code would look like this using a border tag;

[border=0; padding:0;margin: auto; height: 430px; width: 430px; border: 5px solid #ffffff;][border=0; padding:0;height: 410px; width: 200px; border: 5px solid #ffffff;][/border][/border]

if you want, i have a bbcode server (not associated with rpn) where you can ask questions like this! we try and do tutorials when we have the time to and show off what were working with

Join the 𝙇𝙀𝙑𝙀𝙇 𝙐𝙋! 𝘽𝘽𝘾𝙊𝘿𝙀𝙍𝙎 Discord Server!

Check out the 𝙇𝙀𝙑𝙀𝙇 𝙐𝙋! 𝘽𝘽𝘾𝙊𝘿𝙀𝙍𝙎 community on Discord - hang out with 31 other members and enjoy free voice and text chat.

discord.gg

 

[Novelight]

too slow nerd

 

[weldherwings]

too slow nerd

 

[Ayama]

Novelight weldherwings I appreciate the help!

Couple follow-ups:

1) As I don't use Discord, I must be stuck with threads and PMs like a caveperson- my apologies! xD

2) Thank you for the tip about border > bg; I will definitely try to keep that in mind as I learn more!

3) What does border=0 or bg=transparent actually mean, and how come I need to have them in there in order for the height value to work?

4) Thank you so much for letting me know that border and bg both give you a default padding (of 10px, as it turns out)- now I know to factor that in or replace it with customized margins of my own (but if I may, what is the difference between padding and margins? :/ )

5) I can't seem to get the second box to go next to the first rather than right under it. I tried a couple different things with positioning and margins but it didn't budge- am I looking at this the wrong way?

Here is my code right now:

[border=0; margin: auto; height: 430px; width: 450px; border: 5px solid #ffffff;][border=0; height: 400px; width: 200px; border: 5px solid #ffffff;][/border][border=0; height: 400px; width: 200px; border: 5px solid #ffffff;][/border][/border]

 

[Novelight]

3) What does border=0 or bg=transparent actually mean, and how come I need to have them in there in order for the height value to work?

The height value will work regardless. Border=0 means that the border lines will remain empty, opposed to "border=1px solid #2980b9" which I believe is the default value.
BG=transparent means that the background will be transparent, as how the original property works.

(but if I may, what is the difference between padding and margins? :/ )

Padding is the space within the border. Margin is the opposite, as it's the spacing outside the border.

5) I can't seem to get the second box to go next to the first rather than right under it. I tried a couple different things with positioning and margins but it didn't budge- am I looking at this the wrong way?

It's because the height is fixed on the container, and all borders go downwards opposed to side by side. To prevent this, you must apply display: flex to the container.

CSS Flexbox (Flexible Box)

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[Ayama]

The height value will work regardless. Border=0 means that the border lines will remain empty, opposed to "border=1px solid #2980b9" which I believe is the default value.
BG=transparent means that the background will be transparent, as how the original property works.


Padding is the space within the border. Margin is the opposite, as it's the spacing outside the border.


It's because the height is fixed on the container, and all borders go downwards opposed to side by side. To prevent this, you must apply display: flex to the container.

CSS Flexbox (Flexible Box)

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

So you said the height value will work regardless, but without putting in bg=transparent or border=0, the height of the box is only one line of text, rather than the defined value of 430px :/ That's why I was confused on what exactly those two values meant.

That makes so much sense- sorry if my questions are derpy ^^"

Wow you were so right about border being better than bg- I used the flex property with bg before and couldn't get it to work at all xD

 

[Uxie]

So you said the height value will work regardless, but without putting in bg=transparent or border=0, the height of the box is only one line of text, rather than the defined value of 430px :/ That's why I was confused on what exactly those two values meant.

That makes so much sense- sorry if my questions are derpy ^^"

Wow you were so right about border being better than bg- I used the flex property with bg before and couldn't get it to work at all xD

now, a disclaimer that i have no idea if this is correct or not because i am not the creator of bbcode nor do i have real experience in coding, but my best guess to the necessity of transparent/0 is that because border and bg tags are bbcode tags, it will only read purposed values for anything right after the first =, e.g. [border=2px solid red][/border]. css injection seems to only work after the first semi-colon.

i'm guessing your original code had your height property immediately after the = sign, something like this? [bg=height: 430px;][/border] the tag isn't able to read it, because it's not a possible value for the actual bbcode tag, so the transparent/0 is necessary to both to close off the value to ensure the rest of your css injection works ensure the actual tag isn't used (¯▿¯) i believe bg and border can default to some specific colour if left blank! you can see it if you add a background instead of a border using weldherwings' code, where i've gotten rid of the 0 but left the semi-colon: [border=; padding:0;margin: auto; height: 430px; width: 430px; background:red;][/border])

and just in case, since i'm not sure how well-versed you are with flex (because it's another can of worms to open for people who haven't done coding before!), you can also arrange two boxes next to each other by adding float:left; (or right, both work) or display:inline-block; to them! see below:

[border=0; margin: auto; height: 430px; width: 450px; border: 5px solid #ffffff; padding:0;][border=0; height: 400px; width: 200px; border: 5px solid #ffffff; float:left; padding:0;][/border][border=0; height: 400px; width: 200px; border: 5px solid #ffffff; float:left; padding:0;][/border][/border]

and lastly, a reminder to set either padding:0; or box-sizing:border-box; if you choose not to remove the fixed padding-- the second property makes sure padding doesn't change the set size of your box, i.e. a box with height 430px with padding 10px would actually be 450px in height in total, even if you don't change any values!, as it'll result in some boxes being larger than you expect, which can be annoying when working with px values for height and width (⌒ω⌒)

 

[Ayama]

Uxie

Wow that makes so much sense- thank you!