The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Flexbox positioning
Brian Chandler
post Jul 25 2021, 06:48 AM
Post #1


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



I have a puzzle search page here:
OLD: https://imaginatorium.org/shop/show.php?gen...&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=bo...&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_...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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Jul 25 2021, 09:16 AM
Post #2


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 25 2021, 02:39 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



QUOTE(Brian Chandler @ Jul 25 2021, 01:48 PM) *

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=bo...&orient=any


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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Jul 26 2021, 11:01 AM
Post #4


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



QUOTE(pandy @ Jul 26 2021, 04:39 AM) *

QUOTE(Brian Chandler @ Jul 25 2021, 01:48 PM) *

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=bo...&orient=any


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


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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jul 27 2021, 05:43 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I don't understand. Everything seems to be centered in all directions here https://imaginatorium.com/show.php?genre=bo...&orient=any . And I don't see any red border.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Brian Chandler
post Jul 27 2021, 11:21 PM
Post #6


Jocular coder
********

Group: Members
Posts: 2,460
Joined: 31-August 06
Member No.: 43



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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th March 2024 - 05:17 AM