[Pro] Aligning to the base of a HTML box

Hi all, I think I’m having a ‘DOH!’ moment and it’s refusing to go away.

If someone could have a look at the above link and about half-way down the page there are 6 pale blue introduction boxes to different pages, with dark blue ‘more’ links in each one of them.

Is there any way to align the ‘More’ boxes to the base (minus the padding) so that visually they all look the same level rather than following on from the variable copy above and settling in at different heights?

Once again, many thanks in advance.

Trev

http://tizzard.me/index.php


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hi all, just bumping this one to see if anyone has a suggestion.
Cheers
Trev

On 19 Jul 2016, at 10:24, Trevreav email@hidden wrote:

Hi all, I think I’m having a ‘DOH!’ moment and it’s refusing to go away.

If someone could have a look at the above link and about half-way down the page there are 6 pale blue introduction boxes to different pages, with dark blue ‘more’ links in each one of them.

Is there any way to align the ‘More’ boxes to the base (minus the padding) so that visually they all look the same level rather than following on from the variable copy above and settling in at different heights?

Once again, many thanks in advance.

Trev

http://tizzard.me/index.php


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Yes, but it will require you to “get out and push” quite a bit. First, you will need to make the More box position: absolute, and its nearest parent position:relative. Next, you will need to reserve space so that absolute More box (which cannot reserve space for itself – that’s a key feature of absolute positioning) won’t crash into the text above it.

Can you post a link to the page? This relies quite a lot on what your actual HTML and CSS already are.

Walter

On Jul 19, 2016, at 5:24 AM, Trevreav email@hidden wrote:

Hi all, I think I’m having a ‘DOH!’ moment and it’s refusing to go away.

If someone could have a look at the above link and about half-way down the page there are 6 pale blue introduction boxes to different pages, with dark blue ‘more’ links in each one of them.

Is there any way to align the ‘More’ boxes to the base (minus the padding) so that visually they all look the same level rather than following on from the variable copy above and settling in at different heights?

Once again, many thanks in advance.

Trev

http://tizzard.me/index.php


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hi Walter, thanks for the answer - do you mean the live page? in which case:

http://tizzard.me/index.php

or the Freeway page?

Trev

On 21 Jul 2016, at 12:00, Walter Lee Davis email@hidden wrote:

Yes, but it will require you to “get out and push” quite a bit. First, you will need to make the More box position: absolute, and its nearest parent position:relative. Next, you will need to reserve space so that absolute More box (which cannot reserve space for itself – that’s a key feature of absolute positioning) won’t crash into the text above it.

Can you post a link to the page? This relies quite a lot on what your actual HTML and CSS already are.

Walter

On Jul 19, 2016, at 5:24 AM, Trevreav email@hidden wrote:

Hi all, I think I’m having a ‘DOH!’ moment and it’s refusing to go away.

If someone could have a look at the above link and about half-way down the page there are 6 pale blue introduction boxes to different pages, with dark blue ‘more’ links in each one of them.

Is there any way to align the ‘More’ boxes to the base (minus the padding) so that visually they all look the same level rather than following on from the variable copy above and settling in at different heights?

Once again, many thanks in advance.

Trev

http://tizzard.me/index.php


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hi Trev,

There is what I think of as a better alternative… though it is purely a CSS one.

http://cssway.thebigerns.com/workbench/trev-align-with-flexbox/

It’s not a full-blown tutorial or anything… it will likely take a while to sink in. I’ve included in the Workbench article a link to the reference page that I use when using flexbox CSS. It’s very well supported in the modern browsers, but not by Freeway’s Preview (or anything else that leans on the OS for that process).

The alternative would be to do something like what Walter is describing-- or set up some additional structure inside the boxes just to artificially make the height before the “buttons” predictable. Something that I think is impractical. So, check out the flex box CSS method as it is very flexible in accomplishing what you are trying to do.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Many thanks Ernie, it may take me a while to digest, but much appreciated.

Trev

On 22 Jul 2016, at 00:00, The Big Erns email@hidden wrote:

Hi Trev,

There is what I think of as a better alternative… though it is purely a CSS one.

http://cssway.thebigerns.com/workbench/trev-align-with-flexbox/

It’s not a full-blown tutorial or anything… it will likely take a while to sink in. I’ve included in the Workbench article a link to the reference page that I use when using flexbox CSS. It’s very well supported in the modern browsers, but not by Freeway’s Preview (or anything else that leans on the OS for that process).

The alternative would be to do something like what Walter is describing-- or set up some additional structure inside the boxes just to artificially make the height before the “buttons” predictable. Something that I think is impractical. So, check out the flex box CSS method as it is very flexible in accomplishing what you are trying to do.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options