Category alignment and div spacing

[Matte]

Jun 3, 2021 12:54:56 GMT -8 Kami said:

Could you please undo those changes (: Put back how you had it

Ok, everything is back to how it was originally.



Super appreciate the help, by the way!

[Kami]

Jun 3, 2021 13:10:02 GMT -8 Matte said:

Jun 3, 2021 12:54:56 GMT -8 Kami said:

Could you please undo those changes (: Put back how you had it

Ok, everything is back to how it was originally.



Super appreciate the help, by the way!

Lovely! And no worries (:

Let's try the same code, but let's be more granular in how they're targeted by calling the specific divs we want to impact.

#content > div.container1, #content > div.container2, #content > div.container3 {
  display: inline-block;
  width: 49%;
}

#content {
  margin: 0px auto;
  width: 100%;
}

Try this; if the padding etc isn't how you like it leave it as-is and I can give you additions to this CSS so you don't have to change anything. (I am assuming here that container1 / container2 / container3 are homepage-specific div classes. If not, please let me know!)

[Matte]

Jun 3, 2021 13:22:40 GMT -8 Kami said:

(I am assuming here that container1 / container2 / container3 are homepage-specific div classes. If not, please let me know!)

Correct. container1 is the categories, container2 is Information & Statistics, container3 is the shoutbox.

The new code works to replace the other container codes in the style sheet. I do need to add float:left to get the categories to line up properly (otherwise, I get this: i.imgur.com/fpZ4xiy.png ), and then we're back to where we started. If I set content div width to 50% and add no padding, it takes up 100% of the content width. But if I have the content div width at 49%, it's no longer centered. And that's with or without the added padding.

[Kami]

Jun 3, 2021 13:50:20 GMT -8 Matte said:

Jun 3, 2021 13:22:40 GMT -8 Kami said:

(I am assuming here that container1 / container2 / container3 are homepage-specific div classes. If not, please let me know!)

Correct. container1 is the categories, container2 is Information & Statistics, container3 is the shoutbox.

The new code works to replace the other container codes in the style sheet. I do need to add float:left to get the categories to line up properly (otherwise, I get this: i.imgur.com/fpZ4xiy.png ), and then we're back to where we started. If I set content div width to 50% and add no padding, it takes up 100% of the content width. But if I have the content div width at 49%, it's no longer centered. And that's with or without the added padding.

ok, give me a little bit to eat lunch and i'll look into this (:

[Kami]

Jun 3, 2021 13:50:20 GMT -8 Matte said:

Jun 3, 2021 13:22:40 GMT -8 Kami said:

(I am assuming here that container1 / container2 / container3 are homepage-specific div classes. If not, please let me know!)

Correct. container1 is the categories, container2 is Information & Statistics, container3 is the shoutbox.

The new code works to replace the other container codes in the style sheet. I do need to add float:left to get the categories to line up properly (otherwise, I get this: i.imgur.com/fpZ4xiy.png ), and then we're back to where we started. If I set content div width to 50% and add no padding, it takes up 100% of the content width. But if I have the content div width at 49%, it's no longer centered. And that's with or without the added padding.

OK hi again, have a clarifying question. Do you need the edges to be 100% lined up with the forum width? or are you OK with the boards being a little narrower?

[Matte]

Jun 3, 2021 15:21:45 GMT -8 Kami said:

OK hi again, have a clarifying question. Do you need the edges to be 100% lined up with the forum width? or are you OK with the boards being a little narrower?

My preference would be for them to line up, but I'd be ok if they didn't depending on the extent of it.

[Kami]

Jun 3, 2021 15:51:12 GMT -8 Matte said:

Jun 3, 2021 15:21:45 GMT -8 Kami said:

OK hi again, have a clarifying question. Do you need the edges to be 100% lined up with the forum width? or are you OK with the boards being a little narrower?

My preference would be for them to line up, but I'd be ok if they didn't depending on the extent of it.

The best way to get them to line up perfectly with the edges would be method 2, which is definitely a not insignificant amount of work (we'd have to redo your HTML & CSS for the home page entirely, basically).

If you're OK with a little gap, add this to the end of the #content > div CSS:

padding-left: 0.6%

(this would go under the last property, but before the closing }.

It should look like this:

#content > div.container1, #content > div.container2, #content > div.container3 {
  display: inline-block;
  width: 49%;
  float: left;
  padding-left: 0.6%;
}

[Matte]

Jun 3, 2021 15:54:02 GMT -8 Kami said:

padding-left: 0.6%

I added this and then continued to move things around and tweak things. What I ended up with:

#content > div.container1, #content > div.container2, #content > div.container3 {
 display: inline-block;
 float: left;
 width: 49%;
 padding: 0 5px;
}

#content {
 margin: 0px auto;
 width: auto;
 padding-left: 0.6%;
}

I added a 1px border to the #content just to see where the actual edges were at (removed the border afterwards), and at 100% width, the right side was actually cut off somehow, so that's why I set the width there to auto. Overall, this setup seems to get me pretty close to where I want to be, visually. It's not perfect since I'm "forcing" a centered look with padding and percentages (which causes a slight difference in the alignment depending on things like screen resolution), but it's honestly probably something that most visitors wouldn't really notice. I might come asking about that option 2 in the future, but I think I'm content for now. Thanks a ton for all the help.

Unless you have any ideas about my second "problem" listed in the OP, I might edit that one out and post it as a new topic in Coding Help.

[Kami]

Jun 3, 2021 20:41:57 GMT -8 Matte said:

Jun 3, 2021 15:54:02 GMT -8 Kami said:

padding-left: 0.6%

I added this and then continued to move things around and tweak things. What I ended up with:

#content > div.container1, #content > div.container2, #content > div.container3 {
 display: inline-block;
 float: left;
 width: 49%;
 padding: 0 5px;
}

#content {
 margin: 0px auto;
 width: auto;
 padding-left: 0.6%;
}

I added a 1px border to the #content just to see where the actual edges were at (removed the border afterwards), and at 100% width, the right side was actually cut off somehow, so that's why I set the width there to auto. Overall, this setup seems to get me pretty close to where I want to be, visually. It's not perfect since I'm "forcing" a centered look with padding and percentages (which causes a slight difference in the alignment depending on things like screen resolution), but it's honestly probably something that most visitors wouldn't really notice. I might come asking about that option 2 in the future, but I think I'm content for now. Thanks a ton for all the help.

Unless you have any ideas about my second "problem" listed in the OP, I might edit that one out and post it as a new topic in Coding Help.

Sure -- I'd be more than happy to help with option 2, but I think this is a good work around for now.

For context: The problem right now is that PB is inherently not mobile-responsive. It uses fluid widths but within statically defined content as opposed to responsive. When v6 comes around, PB will be fully responsive and flexible grids will be much easier. It's possible now (eg: my site is fully mobile responsive with grid-style boards of varying styles) but it takes a LOT of work because you effectively have to restructure everything from the base HTML.

For the second issue, there's not really a good way to do that easily. It's 100% possible but it's a significant time sink. You'd have to change the way the forum wrapper is done, basically -- the $[content] variable is what is responsible for displaying everything in the HOME template, and if you notice the $[shoutbox] variable is also separate from that. Moreover, the Infocentre is of the .container .stats class while the boards are in the .container .boards class, and are contained in separate divs. Separate divs will always be forced to break into new lines unless you explicitly use CSS to instruct them not to, which this isn't 100% set up to do natively.

If you're interested in doing that, I would say it's worth just going for Method 2 because you'll have to completely redo the HTML and CSS anyway so we can use flexbox instead of trying to float everything.

I work full time, so I can't really promise a significant amount of free time to assist with a full remodel in an expedient manner. It would probably take me at least two weeks to help you with something like this, if not more, as I'll be starting several projects at work next week.

If that's OK with you, I can tackle this starting tomorrow but it'll be a constant state of progress. I would request if you can to export this theme and attach it to a post here (the pbt file that's generated, that is) so that I can install it in my test forum and start playing around.

[Matte]

Jun 3, 2021 22:45:57 GMT -8 Kami said:

If that's OK with you, I can tackle this starting tomorrow but it'll be a constant state of progress. I would request if you can to export this theme and attach it to a post here (the pbt file that's generated, that is) so that I can install it in my test forum and start playing around.

I very much appreciate it! I've attached the theme here. Take as much time as you need, I'm in no rush.

And a heads up, I did move the previous code (from a couple posts up) back to the Home template because I realized the #content padding was applying to the sub-board lists on pages other than the home page.

Attachments:

testing theme for Matte 1.pbt (121.83 KB)

[Kami]

Jun 3, 2021 23:49:09 GMT -8 Matte said:

Jun 3, 2021 22:45:57 GMT -8 Kami said:

If that's OK with you, I can tackle this starting tomorrow but it'll be a constant state of progress. I would request if you can to export this theme and attach it to a post here (the pbt file that's generated, that is) so that I can install it in my test forum and start playing around.

I very much appreciate it! I've attached the theme here. Take as much time as you need, I'm in no rush.

And a heads up, I did move the previous code (from a couple posts up) back to the Home template because I realized the #content padding was applying to the sub-board lists on pages other than the home page.

Ah yeah. Well we're going to remove that entirely anyway so it shouldn't be a problem (and fwiw, we could have gone even more granular with the main-page classes so you didn't need to put that in the home page ;x ). I'll give this a play over tomorrow / the weekend and check back in after.

How many boards do you have total? I want to try and recreate your forum structure as far as # of containers go so i can create as accurate of a facsimile as possible.

[Matte]

Jun 4, 2021 0:06:21 GMT -8 Kami said:

How many boards do you have total? I want to try and recreate your forum structure as far as # of containers go so i can create as accurate of a facsimile as possible.

My structure currently looks like this:

CATEGORY 1
- BOARD 1
- BOARD 2
- BOARD 3
- BOARD 4

CATEGORY 2
- BOARD 5

CATEGORY 3
- BOARD 6
- BOARD 7
- BOARD 8

INFORMATION & STATISTICS

SHOUTBOX

[Kami]

Just a quick update: still figuring out some of the spacing / width issues, but you can view progress here: kamitest8.proboards.com/

I've kind of got it done, but i'm still fine-tuning; if this works for you, let me know — the reasons these gaps exist is because everything is done on a grid. You can fiddle with negative margins and such to close the gap, but since your forum width is responsive, negative margins will always wind up overlapping when you shrink the screen. I'll see if I can find a more elegant solution during the week, or if you are ok with this we can keep it as-is.

Alternatively, if your biggest goal is just to make everything line up nicely and not specifically to have a two-column page, we can do that. OR we can adjust how categories / boards display so that everything is an even grid. Let me know!

[Matte]

Jun 6, 2021 14:55:05 GMT -8 Kami said:

I've kind of got it done, but i'm still fine-tuning; if this works for you, let me know — the reasons these gaps exist is because everything is done on a grid. You can fiddle with negative margins and such to close the gap, but since your forum width is responsive, negative margins will always wind up overlapping when you shrink the screen. I'll see if I can find a more elegant solution during the week.

Looking good! The spacing is something I would really want to try to tighten the gaps on if possible. Other than that, is there a way to rearrange the categories/boxes? I liked the layout where the Infocenter and Shoutbox were both at the bottom.

[Kami]

Jun 6, 2021 19:39:58 GMT -8 Matte said:

Jun 6, 2021 14:55:05 GMT -8 Kami said:

I've kind of got it done, but i'm still fine-tuning; if this works for you, let me know — the reasons these gaps exist is because everything is done on a grid. You can fiddle with negative margins and such to close the gap, but since your forum width is responsive, negative margins will always wind up overlapping when you shrink the screen. I'll see if I can find a more elegant solution during the week.

Looking good! The spacing is something I would really want to try to tighten the gaps on if possible. Other than that, is there a way to rearrange the categories/boxes? I liked the layout where the Infocenter and Shoutbox were both at the bottom.

Yeah we can do that! Super simple. It does, however, put us exactly back where we were to start with the gap between the first category and the info centre.

I think you'll always have the problem of slightly uneven vertical, if only because the way these grid layouts work is that they're in evenly spaced grids -- in other words, if you have a 2x2 grid space, each "cell" of the grid occupies roughly the same amount of space. There are ways to stack them differently of course, like what's there now: the first category is specified to have a row span of 2, so it takes up two cells in the grid; then the bits in the second column are a rowspan of 1 each. Unless you get the dimensions exact for each, you'll always have a little discrepancy here and there.

It's doable, to a degree, within each row. So for example, [my forum] has a grid layout where certain categories are lined up in different ways with different grids. You could also do something like this (see screenshot, can't link to it since it's another service but HTML & CSS are HTML & CSS so it's still applicable) where within the row there's more unique configurations, but you'll notice it's on a per-row basis.

What we could, theoretically do, is get more granular by changing how the boards are laid out within the categories (either the first category only, to fill up that space, or for all categories for a uniform look). That would be more work and if you were to add any additional categories, they would look a bit weird. But if you have no intention of adding more boards/categories to the home page, then we can do it this way.

What is the height of your chatbox?

Attachments: