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?
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?
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?
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?
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:
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.