Help new to coding: beginner's questions

[merrbles]

So I've been messing around with BBC code and my very limited CSS knowledge a bit as well as scrounging the forums and internet for information, but I have a very particular question:
I'd like to have an accordion styled in a way that displays the slides next to each other in columns instead of stacked on top of each other like with the basic BBC command.
Is this possible at all, and if so, can anyone tell me how I could achieve this in the most basic way? Many thanks in advance (even if it's just for telling me this doesn't work ).

 

[wqeq453243]

It is possible, here's a simple example (mobile-friendly):

Slide 1

hi

Slide 2

hi again

Slide 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Spoiler: code

[div=display: flex; flex-flow: row wrap; gap: 1em] [div=flex: 0 1 300px;] [accordion=100%] {slide= Slide 1 | center } hi {/slide} [/accordion][/div][div=flex: 0 1 300px;] [accordion=100%] {slide= Slide 2 | center } hi again {/slide} [/accordion][/div][div= flex: 0 1 300px; ] [accordion=100%] {slide= Slide 3 | center } Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. {/slide} [/accordion][/div][/div]

Feel free to edit it as you wish, let me know if you need any further help.

 

[merrbles]

It is possible, here's a simple example (mobile-friendly):

Slide 1

hi

Slide 2

hi again

Slide 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Spoiler: code

[div=display: flex; flex-flow: row wrap; gap: 1em] [div=flex: 0 1 300px;] [accordion=100%] {slide= Slide 1 | center } hi {/slide} [/accordion][/div][div=flex: 0 1 300px;] [accordion=100%] {slide= Slide 2 | center } hi again {/slide} [/accordion][/div][div= flex: 0 1 300px; ] [accordion=100%] {slide= Slide 3 | center } Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. {/slide} [/accordion][/div][/div]

Feel free to edit it as you wish, let me know if you need any further help.

oh, thank you so much! I ended up figuring that I might have to work with a flex container and looked them up, but I'd still have struggled for a good long while trying to integrate it into BBC code, this is super helpful.

 

[merrbles]

I thought I'd use this thread to post some other questions I have as well, since I've been messing around some more.

I've forayed into flex containers a bit, but right now I'm having issues with making things line up/wrap properly, as well as making hidden scrolls work and be hidden at all, even after trying several different ways from various tutorials.

What I'd like to do essentially would look something like this:



the black background is only there to signify that I've tried to put a flex container there, if possible I'd like the elements to wrap in a mobile friendly way as well, so maybe they'd display on top of each other on mobile instead of next to each other?

In any case, the code I've come up displays like a total mess:

ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum

Spoiler: code

[border=0; display: flex; flex-flow: row wrap; padding: 0px; align-items: center; justify-content: center; height: 200px; width: 80%; background: black; overflow: hidden;]
[border=0; display: flex; flex: 0 1; max-width: 150px; max-height: 150px; box-sizing: border-box; background: url('https://via.placeholder.com/150'); background-size: cover;  position: relative;]
[border=2px; box-sizing: border-box; display: flex; flex: 0 1; padding: 10px; padding-right: 30px; overflow: scroll; width: 100%; height: 100%;]
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
[/border] [/border] [/border]

I know the initial container's height restriction won't work if I want the items to stack on mobile, but my priority right now is to make them sit next to each other at all instead of on top of each other, as well as making that scroll work and hide it (it worked at some point, though it wasn't hidden, but I forgot what I changed).

I hope my rambling makes some sense and I'd be super grateful if anyone can explain my mistakes to me and how I could go about fixing them. I'm sorry if I'm being incredibly stupid, I feel pretty out of my depth, but I'm eager to learn.

 

[wqeq453243]

Here's something that I hope accomplishes what you were looking for:

ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum

Spoiler: Code

[border=0; margin: 0 auto; display: flex; flex-flow: row wrap; gap: 10px; align-items: center; justify-content: center; width: 100%; max-width: 400px; background: black; overflow: hidden;]
[border=0; flex: 0 0 150px; height: 150px; box-sizing: border-box; background: url('https://via.placeholder.com/150'); background-size: cover;  position: relative;][/border]
[border=0; flex: 1 0 200px; height: 150px;] [div=height: 100%; width: 100%; overflow-x: hidden; overflow-y: scroll; padding-right: 50px;]ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
[/border] [/border]

Your main problems were: Divs 1 and 2 in your flex container weren't separated, meaning their content was jumbled together, which also created some other problems.
The wrapping problem was caused by missing flex-basis. flex: 0 0 150px <- This number
Your container was set to width: 80%. This means, even if you give the hidden scroll box some padding, the scroll bar will never disappear, unless the elements contained exceed 80% of your browser's width. To counteract this, I set a max-width of 400px and gave it a margin of 0 auto to center the whole thing. There are other ways around this, like using overflow: hidden on one of the divs in the container, but I feel like having a small container makes for a more elegant solution overall, especially considering the wrapping behavior.
Thirdly, you had a typo in your code which unfortunately prevented the overflow:scroll.

Also, for max-width to work, you first need to set a width, for example width: 100%.

I changed some other stuff around to clean up the code.

Hopefully this could help, and feel free to tell me if there's anything else you'd like to know!

 

[merrbles]

thank you so much!!

The wrapping problem was caused by missing flex-basis. flex: 0 0 150px <- This number

if it's okay to ask, what exactly does this flex basis value in px do? I've seen it used on here, but not explained in the tutorials/lessons I've found so far.

 

[wqeq453243]

It sets the initial size of the element, before flex-grow and flex-shrink, the first and second values, come into play.

When the flex-direction is set to row (items are arranged from left to right), it will define the element's initial width.
When the flex-direction is set to column (items are arranged from top to bottom), it will define the element's initial height.

So in this case, it acts as an element's initial width. This is comparable to simply using the width property. However, if a flex-basis is specified, it will override an element's width value. (But not the max-width).

I prefer using flex-basis instead of width when it comes to flex-elements, because it's quick and neat.

flex is a shorthand property combining three separate ones - flex-grow, flex-shrink, and flex-basis.

The default values are flex: 0 1 auto;

In your case, when using the line

 flex: 0 1

the value for flex-basis is omitted, and in this case, the flex-basis will change to 0.
This will make your element 0 pixels wide, i. e. make it shrink to its min-content size. (In combination with flex-grow: 0)

So you'd have to A: set a flex-basis or B: forego this line alltogether and let the default values take over.

I recommend reading the articles on css-tricks and mozilla's dev blog - they give pretty good explanations on the workings of flex-box.

You're free to send me a PM if you ever run into trouble, I'll be glad to help.

 

[merrbles]

It sets the initial size of the element, before flex-grow and flex-shrink, the first and second values, come into play.

When the flex-direction is set to row (items are arranged from left to right), it will define the element's inital width.
When the flex-direction is set to column (items are arranged from top to bottom), it will define the element's initial height.

So in this case, it acts as an element's intial width. This is comparable to simply using the width property. However, if a flex-basis is specificed, it will override an element's width value. (But not the max-width).

I prefer using flex-basis instead of width when it comes to flex-elements, because it's quick and neat.

flex is a shorthand property combining three separate ones - flex-grow, flex-shrink, and flex-basis.

The default values are flex: 0 1 auto;

In your case, when using the line

 flex: 0 1

the value for flex-basis is omitted, and in this case, the flex-basis will change to 0.
This will make your element 0 pixels wide, i. e. make it shrink to its min-content size. (In combination with flex-grow: 0)

So you'd have to A: set a flex-basis or B: forego this line alltogether and let the default values take over.

I recommend reading the articles on css-tricks and mozilla's dev blog - they give pretty good explanations on the workings of flex-box.

You're free to send me a PM if you ever run into trouble, I'll be glad to help.

thank you very much for explaining and helping me out!

I'll check out the resource you recommended and probably take you up on the offer to PM you sooner or later!