Help Haven't coded in two years almost..

[houseplant]

Like I said, last time I coded was almost two years ago when BBCODE+ was a thing and I knew how to code then but all my codes are broken and i can't use them and divs are not a thing anymore and I am so lost trying to learn how to code again.

How can I get the, 'houseplant's garden' to sit up top halfway on the white border and halfway off it? Does anyone have an tips on things like margins and hidden scrolls? I tried to mess with them but messed the whole code up in the progress and had to delete it.

[bg=height:200px;width:400px;border-bottom:100px solid white;border-top:100px solid white;background:#aec6cf;height:500px;margin:auto;][/bg]
[bg=0px;color:#274472;font-family:Pacifico;font-size:30px;float:center;]houseplant's garden[/bg]

 

[Uxie]

important thing to remember is that basically the only difference between bbcode+ and present bbcode is that there are no scripts nor classes. all the other forms of css-injection have been made possible simply by replacing [div=] with [border] or [bg]. so for any of your old codes, turning classes into border/bgs will allow it to work again. an added note that all bgs and borders have an automatic padding:10px;, so you'd want to set padding:0; or box-sizing:border-box; to ensure your heights and widths are as you want it; divs did not have automatic padding!

for the code that you've asked specifically, i'd recommend setting a position:relative; on the first border then using position:absolute; to shift it up, working off what you've already done! this is because you've used borders to create the area that your text will be overlapping with! see below:

[bg=height:200px;width:400px;border-bottom:100px solid white;border-top:100px solid white;background:#aec6cf; padding:0; margin:auto; position:relative;]
[bg=0px;color:#274472;font-family:Pacifico;font-size:30px;padding:0;position:absolute; top:-25px; left:0; color:#000;]houseplant's garden[/bg][/bg]

houseplant's garden

another method is to use another border to create the space, then using a negative margin-top or margin-top to shift it up. this will allow other elements within your box to recognise your text as an item, whereas the first method would have items ignore the text completely.

[bg=0; height:200px;width:400px;border-bottom:100px solid white;background:#aec6cf; padding:0; margin:auto; position:relative;][border=transparent; height:100px; width:100%; padding:0; background: #fff;
/*the negative margin*/ margin-bottom:-25px;][/border][bg=0px;color:#274472;font-family:Pacifico;font-size:30px;padding:0; color:#000;]houseplant's garden[/bg][/bg]

houseplant's garden

do note that to achieve either of these methods, you'd need to place the text bg within the bg of the other. in the code you gave, they were completely separate!
i've also taken the liberty to add padding:0; to your biggest container as well as remove some of the additional elements i found unnecessary, such as a repeated height value.

let me know if anything's confusing! (o˘◡˘o)

 

[houseplant]

important thing to remember is that basically the only difference between bbcode+ and present bbcode is that there are no scripts nor classes. all the other forms of css-injection have been made possible simply by replacing [div=] with [border] or [bg]. so for any of your old codes, turning classes into border/bgs will allow it to work again. an added note that all bgs and borders have an automatic padding:10px;, so you'd want to set padding:0; or box-sizing:border-box; to ensure your heights and widths are as you want it; divs did not have automatic padding!

for the code that you've asked specifically, i'd recommend setting a position:relative; on the first border then using position:absolute; to shift it up, working off what you've already done! this is because you've used borders to create the area that your text will be overlapping with! see below:

[bg=height:200px;width:400px;border-bottom:100px solid white;border-top:100px solid white;background:#aec6cf; padding:0; margin:auto; position:relative;]
[bg=0px;color:#274472;font-family:Pacifico;font-size:30px;padding:0;position:absolute; top:-25px; left:0; color:#000;]houseplant's garden[/bg][/bg]

houseplant's garden

another method is to use another border to create the space, then using a negative margin-top or margin-top to shift it up. this will allow other elements within your box to recognise your text as an item, whereas the first method would have items ignore the text completely.

[bg=0; height:200px;width:400px;border-bottom:100px solid white;background:#aec6cf; padding:0; margin:auto; position:relative;][border=transparent; height:100px; width:100%; padding:0; background: #fff;
/*the negative margin*/ margin-bottom:-25px;][/border][bg=0px;color:#274472;font-family:Pacifico;font-size:30px;padding:0; color:#000;]houseplant's garden[/bg][/bg]

houseplant's garden

do note that to achieve either of these methods, you'd need to place the text bg within the bg of the other. in the code you gave, they were completely separate!
i've also taken the liberty to add padding:0; to your biggest container as well as remove some of the additional elements i found unnecessary, such as a repeated height value.

let me know if anything's confusing! (o˘◡˘o)

Ahhhh! Thank you so much. I'll play around with it!