Help with coding (layout)?

Thanks for the tip! Is it okay if I tag you in the thread where I posted the images of my wanted layout ?

This is the base. It is my inspiration for the text boxes too. I wanted to ask if it was possible to go off of it? (Also sorry if im tough with pleasing im working on stopping being picky so sorry about it aha)

Kinda, yeah… plus headers that go for the whole box’s length bc idk how to do that, but it’s really not much work I think. Would that be okay? (I’m just clueless about coding and needed help)

What do you mean by headers? You already have titles, and those you can type in. Do you mean dividers? If you want graphics (and you probably should, with an image background) then I'm probably not much help, sorry.

I guess I don't really understand. Those header boxes are already pretty long, but you want them longer except also not fully the length of the box?

Also I don't know if I have the time to fully make a layout or even fully modify one for your needs. I can give some advice and help you make the modifications if you have questions, tho, esp because you already have a working base that looks very nearly identical to what you wanted in your sketch?

Sorry, but floats like that aren't possible with how the layout is currently coded. The headers are already floats, and making a text box a float (basically pulling it "up" on the z-axis) breaks the rest of the code unless you... do a lot of weird stuff. I honestly don't know how the headers could overlap the floated box at all without breaking a bunch of really funky edge cases in creative ways (like maybe making an open box with a negative margin?) but it would likely be very temperamental and require the box itself to be restricted to a certain height/can only contain a limited amount of text

also it really won't work with an image background, because a lot of the "weird stuff" and manipulating would be to contain those floats in a separate div than the background, which would mean either:

a) not having an image at all (or at least for only that portion)
b) limiting the layout to a certain height and cutting the image to seam together properly at the exact pixel of the break
c) splicing the image so that it starts over after the break

I'm gonna be honest... unless you are very dead set on having that feature, it is not worth the tears you will shed over making it function properly with this current base (or one with any sort of float header that overlaps the text box)

Maybe someone with more experience can have a better way of making it work, but with my current knowledge of html, it would be a HUGE pain that is very likely to break the rest of the code if you edit it wrong for a relatively minor feature (and this is coming from someone who takes great trouble to make such things work). but even if you look at some of my other "complex" code, I'm usually trying to work around such difficulties instead of trying to push through them

E: yeah, I just looked into some z-layer and float syntax to make sure I wasn't missing something dumb. But it would be very hard to do that with the headers you have, and even without them, making the boxes the same height and/or not just... breaking free of the background will be challenging to impossible depending on how you want them to function...

making two boxes on the same line isn't hard:


(also that things get stuck in the places in between if you aren't careful to space the rest of the layout around them properly; you might not even notice text getting stuck on your device, only to find that it is unreadable on mobile or a different resolution monitor)


the problem comes when you want to put stuff in them:







(I have to put five blank spaces so this text doesn't run into the floats. A minor annoyance, and shouldn't be a huge issue if you're planning on putting them last in the post)
Ya see that strip of light grey? that's the background box. The other boxes are floating on top of it, so it doesn't realize that anything is going further than the first line. Also, if you don't set boundaries for your boxes, they will not be the same height if one has more content than the other, which typically doesn't look very good for content boxes.

you can fix both these problems by setting heights:



but you are limited to having a scroll box in one or both boxes using this.

The only way I can think to make titles look half decent in a layout using this would be to put them above. I suppose you can use margins and padding to center them, or offset them, or make them look a bit better. But there's also the issue of padding + floats: even if all floats are set to 40%, changing the padding will change the apparent width of the box. so you'll either have to keep padding equal in all boxes, offset the title boxes to be smaller than the text so the difference looks intentional instead of "slightly wrong", or make the title text very small.

This is the cleanest version of the code, though, and perhaps the most stable. but does require tinkering. as long as you keep all your float divs on one line, they should sit side by side properly.




If you copy some of the style of the original onto this, then use the containing box to set your width and centering, you probably can get it to work in the base.

LAST QUESTION HOPEFULLY. In text boxes- I put the margain to be negative and it went to the left. What would I type to make it go into the right? Is it also margain related? Brownie

I ended up having a hard time with what you showed me (im sorry, I have a hard time understanding a lot of things. No idea how im gifted with how slow I understand things) and used my own text boxes (the ones I showed you) and played around with them and found that the margain being negative made it go to the left and thought maybe I could just not have them on the same line and it would be just fine, but had no idea how to draw it to the right. (I’m done being locked on having them in the same line, I want it to be one under the other line like right higher left taller is there a way to do it? With the boxes I have rn)