Help Coding HTML Box

[Keen - Summit of Legends]

Hello again ^-^ I sure seem to use this support a lot XD

This time I am creating a custom page to use as the home page for my forum. I want an HTML box in the center of the page, which it is. However, I want the inside of the box to not be blank XD

I want to have the back story and lore of my world posted there in that HTML box, but I want it to look nice too.

What is the best way to make the HTML box match the rest of the site's coding?

EDIT
Got a screen shot and more of an idea what I want help with.

First, how can I keep the text justified but still move it over to where it is centered in this zone? I marked with an arrow what I am referring to.


Second, I would like to change the background of the zone without putting it in a container, because I do not want the container's title bar there. How can I do this?

Third, is there a way to match the text color to the rest of the website without having to go in to each page and change it when I change the theme?

[Teg]

Hi Keen - Summit of Legends, can you provide a link to this page you are needing help with so I can take a look at the actual HTML? Please and Thank you

[Keen - Summit of Legends]

summitoflegends.boards.net/

Just my home page for now, thank you ^-^

[Kami]

If your zones are side-by-side all zones have a "float" property when you switch to the HTML versus the preview tab. You can reduce the padding there or add additional inline CSS to style the zone content and container.

If you input content in the second zone, you'll see that the "space" you're seeing is a gap between blocks of text / whatever you put in the second zone.

[Keen - Summit of Legends]

The text is in the second zone, so I dont understand what you mean. The text is justified, but set to the left side of the column instead of the center of it. I tried changing the padding already and a couple other things but nothing worked, so I put them all back the way they were.

[Kami]

Ah, sorry, I thought those were side bars. Why don't you put content in the third box (the empty one) so we can see the behaviour it exhibits.

[Keen - Summit of Legends]

There is content in all three zones X3

*edit*

here is a ss of my home page. there are three zones, left, right, and center. all three have content, but the HTML box is not centering the width-limited justified text.

[Kami]

Apr 22, 2017 15:35:11 GMT -8 Keen - Summit of Legends said:

There is content in all three zones X3

*edit*

here is a ss of my home page. there are three zones, left, right, and center. all three have content, but the HTML box is not centering the width-limited justified text.

Ohhh I see. Okay, thank you for explaining! It looked like a 4 zone content to me so let me see.

What it's looking like is that the HTML says:

max-width:500px;text-align:justify;

That "max-width:500px;" is saying that the widest that section could ever be is 500px, and that is how wide the content goes regardless.

If I change that in the console to be "max-width:100%;" or even "width:100%;" the content spans the whole box:

[Keen - Summit of Legends]

I do not like how it looks if it spans the whole box, so what I would like it to do is center the text inside the zone, if that makes sense. I edited the screen shot i made to show how i would like it to look.

[Kami]

Apr 22, 2017 15:48:23 GMT -8 Keen - Summit of Legends said:

I do not like how it looks if it spans the whole box, so what I would like it to do is center the text inside the zone, if that makes sense. I edited the screen shot i made to show how i would like it to look.

try adding this to the div style: margin-left:auto; margin-right:auto;

[Keen - Summit of Legends]

okay ill try it!

*edit*
it worked! you are a wonderful person! thank you <333

[Kami]

Apr 22, 2017 15:51:03 GMT -8 Keen - Summit of Legends said:

okay ill try it!

*edit*
it worked! you are a wonderful person! thank you <333

Glad we got there in the end lmao xD You're welcome!

[Former Member]

yep, Kami is a wonderful person(*sometimes) lol

[Keen - Summit of Legends]

ah ha ha!