Evenly distribute boxes across a page


Fred Kotler
 

I have gone through the Xway tutorial and attempted to recreate an existing Freeway site. In general the process was straightforward and the results satisfactory. But one feature of my Freeway site that I could not reproduce was a row of five graphic boxes each containing text and each linked to a different page in the site. I recognize that Xway does not support empty graphic boxes but the larger problem is that I want the boxes spread evenly across the page. Short of creating graphics in a separate program, how can this be accomplished?

Subsequently I found a message on this site “Flex Box Tips” which seemed to be a solution to my problem. Following the instructions, on a blank page, I was able to create boxes that spread evenly across the page but this only worked when the items were directly below the pagediv at the top of the page.

I could not get this to work when I wanted the boxes lower down on the page. Basically I could not create a container box that then had multiple daughter boxes. Is this possible? Will this be possible in a future version of Xway?


Jeremy Hughes
 

Hi Fred,

Flexbox is definitely the way to do this. The boxes don't have to be at the top of the page - we used it for the boxes that are near the bottom of the Xway page on our website:

https://www.softpress.com/xway/

I'd suggest reading:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You can also look at the source for our Xway page.

We are planning to provide direct support for flexbox in a future version of Xway.

Jeremy


Fred Kotler
 

Thanks Jeremy.
I was able to get this to work once I figured out that to create daughter boxes, I first need to click in the parent box before inserting additional boxes. I was successfully able to insert text into each box and link the text to an external page. The one problem I had was that I wanted to link the entire box, not just the text within it. When I did that, the box dimensions when previewed in a browser and the spacing between boxes changed. Is it not possible to link an entire box, am I doing something wrong or is this a bug?

On Jun 15, 2021, at 2:26 PM, Jeremy Hughes <jeremy@...> wrote:

Hi Fred,

Flexbox is definitely the way to do this. The boxes don't have to be at the top of the page - we used it for the boxes that are near the bottom of the Xway page on our website:

https://www.softpress.com/xway/

I'd suggest reading:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You can also look at the source for our Xway page.

We are planning to provide direct support for flexbox in a future version of Xway.

Jeremy


Jeremy Hughes
 

You can set a link on an entire box, but this creates a situation in which the link is the parent of the box. This will probably affect the way that elements are distributed (not a bug, just the way that HTML/CSS works).

The simplest way to work around this could be to embed the linked box within another box - and apply flex attributes to the outer box.

Jeremy


Fred Kotler
 

Thanks again. Your suggestion works perfectly.

On Jun 15, 2021, at 6:07 PM, Jeremy Hughes <jeremy@...> wrote:

You can set a link on an entire box, but this creates a situation in which the link is the parent of the box. This will probably affect the way that elements are distributed (not a bug, just the way that HTML/CSS works).

The simplest way to work around this could be to embed the linked box within another box - and apply flex attributes to the outer box.

Jeremy