Printable Version of Topic

Posted by: Brian Chandler Jul 25 2021, 06:48 AM

I have a puzzle search page here:
OLD: https://imaginatorium.org/shop/show.php?genre=both&p2000=x&sfx=any&orient=any
This outputs the puzzles found in a table, with four columns.

Flexbox is basically a huge improvement, because of course I don't really want to use a table. But here is the new version:
NEW: https://imaginatorium.com/show.php?genre=both&p2000=x&sfx=any&orient=any

I just produce a string of boxes, and they get laid out nicely, except...

In a table, vertical_align aligns the content of a TD in the vertical direction, and of course it does what I what, putting the content (thumbnail image and bits of text) centred. But this does not work in a flexbox, so I arrive at the following :
https://www.w3schools.com/css/css3_flexbox_container.asp#align-items
(These pages are pretty bad, but there are handy 'Try it' pages set up to check stuff.)


Now this "align-items" turns out to mean vertically (I suppose it would be too much to ask for anyone competent in the English language to be involved in any of this), and indeed, if I put "center" my thumbnail containing box appears vertically centred. But this means that the frame of the box is of many different sizes; the default setting of "stretch" seems to be the only way to make the boxes of consistent size.

So I try putting the actual content inside another div (the temporary red border in NEW above). Then I find I have no idea whether it is even possible to make a div centred vertically within another div. Setting "margin: auto 0" does not appear to work. Any suggestions?

Posted by: Brian Chandler Jul 25 2021, 09:16 AM

Well, so I went on looking, and amongst it all I found a *website* called http://howtocenterincss.com (unbelievable: imagine a website called "howtocopythevalueofonevariabletoanotherinc.com") ... and it sort of clicked. You just make div soup, but make the including div be a flexbox, so you get a usable set of primitives, even if they are labelled in broken English. Here's the new style file: https://imaginatorium.com/css/show.css ... it's DIV.thumbs DIV.thumbbox DIV.thumb (the inner red border is temporary, of course).

Various other long-forgotten nightmares resurfaced... something about putting padding-top: 50% on the outer box and margin: -5% on the inner box. Hmm

Posted by: pandy Jul 25 2021, 02:39 PM

Fatal error: Cannot redeclare ej() (previously declared in /usr/www/users/horigome/shop2/show.php:30) in /usr/www/users/horigome/lib2/util.inc on line 26

Posted by: Brian Chandler Jul 26 2021, 11:01 AM

Sorry, this is all under development; temporary problem gone away. Basically I am happy with the current version, but it does have a layer of divs just for display. Less worse than previously.

Posted by: pandy Jul 27 2021, 05:43 PM

I don't understand. Everything seems to be centered in all directions here https://imaginatorium.com/show.php?genre=both&p2000=x&sfx=any&orient=any . And I don't see any red border.

Posted by: Brian Chandler Jul 27 2021, 11:21 PM

Yes, I have done it now: the point is that the answer is "div soup", or nested divs for no reason other than that the formatting power of a single div layer is not enough. (I want the content centred, but the border filling the frame.)}

The aha! moment was realising that the flexbox provides a better implementation of div than plain div does...