Hoping for a bit of help with a possible attribute misunderstanding

Beginners
1

Hello. So, I’ve got this relatively easy layout I’m setting up, but I’m obviously messing something up with the attributes (and/or misundertanding something).

Hopefully the attached images will be enough to give you the info you need. I’ve stripped away some of the non-relevant attributes, etc, and labeled each section.

So, it’s essentially two image blocks (each 1/2 the screen width) side by side, except in XS and SM screens, where they end up vertically stacked instead. Above it is essentially a spacer (using the VY attribute) to push that down to approximately the middle of the screen. Below the images is a full width row. There’s more elements, etc, but these are the relevant items for this issue.

The left element is a fixed size image (consider it a background/room image), and then there is a second, smaller image element that is to be placed on that image (putting an object ‘in’ the scene). That will be later animated (position).

The right element is a fixed size image, but is vertically smaller than the left image (it’s a title banner), and is to be vertically centered within its column.

So, all that is working fine… except the left side.

I’ve went through a number of different attribute combinations, so the one that I have attached is just the last one I have tried, not the only one (anc certainly not the ‘right’ one).

The assumption was that I would have the ‘background/room’ image set as Position: Absolute, and the ‘object’ image (that is placed over it) as Position:Relative… which works, yet brings other issues. Doing so takes the background/room image out of the flow (due to the Postion:Absolute), and makes the image extend beyond the containing column. Taking away the Position:Absolute causes the object image to be placed underneath (lower vertically, not in Z) the background/room image. So, it seems like a lose-lose!

I tried combinations of Fluid, and setting the div size, etc… but each combo seems to introduce some other issue.

I’m hoping someone can point out where I’m going wrong or indicate how this is best done. Although I’m quite comfortable with HTML/CSS/Bootstrap, I do sometimes get messed up in whether to put attributes within the image tag, or the containing column… and sometimes go in circles with ‘conflicting’ attributes.

IntendedLayout

LayoutCode
LayoutCode1244×548 70 KB

2

i assume you don’t want to use grid since you have bootstrap going already

if you want to position the small floating purple box inside the larger left side image, then you want to use position: relative on the large one and position absolute on the small one.

reason being is the small box will have absolute (0,0) based on the larger box and not the whole page, as long as the next container up has position relative called on it.

3

Ah… It appears I have it reversed!

Okay, that’s the first thing I’ll change and check. Maybe that alone will have everything else fall into place.

I did have it working before, in a previous (different) test. I could have sworn the big image is supposed to be absoute, and the little (overlay) image would be relative… but, then again, I’m the guy with the broken layout! :wink:

Thanks, droidgoo. I’ll try that out and get back to you.

4

Argh… I just tried it, and nope. The object image ends up underneath (vertically) the background image. Are you positive it’s not the other way around? I was sure the background image is supposed to be absolute, and the object image would be relative (to the background). I was never sure why the background image would have to be set to anything, let alone absolute. In my case, that just causes the image to go out of the flow, and (I would assume) is the reason why it no longer keeps contained within the containing column (…bit of a catch-22 there). The object image being relative makes sense, since that allows you to then move it anywhere, relative to the ‘parent’ background image.

So, I’m still confused…

The way I previously had it (BG absolute, object relative) did work… it’s just that it resulted in the BG separating from the containing column (which makes sense, but is a bad thing, nonetheless).

5

Wait, wait, wait!..

Okay, maybe I DID get it to work now.

I forgot to add a positional offset, and that then did allow the object to go on top of the background image.

I have to stress test it, but at least that’s a possibility.

6

Okay, so far… so good… sort of.

The one immediate issue I see, is that as I scale the browser window down, everything scales/re-distributes fine… except the object image doesn’t scale down with the background image.

Now, I’m sure this has something to do with Fluid, or Flex… or one of the many other attributes. This is where I sometimes go around in circles, trying those out, and not being fully sure if I should or not.

I sometimes get tangled in the use of: w-100, mw-100, fluid, Flex, align, etc… as well as whether to use them in the image tag, or the containing column…

Do I need to use something like Fluid on the object image tag?

BONUS QUESTION: If I am intending to animate the position using GSAP, should I do the initial positioning of the object image via the CSS position, padding or buffer attributes?

7

or course not, you took it out of the normal flow when you make it pos abs… it has no idea about the other objects any more.

i’m glad you sorted out your z positioning, but if you want to have a responsive small box ur probably going too need to code size into the shape as well as position using that GSAP thingy you mentioned… i’ve have no idea what that is.

8

Weird thing is, I had it working before, when I first asked about it a week or so ago.

The background image seems to be behaving. It’s just the object one. It’s like it’s a different size with each screen size (relative to the background)… sometimes it’s larger than it should be, other times it’s right. Kind of a weird non-pattern to the scaling.

I’ll have to explore the attributes some more. I’m sure it’s just a missing or present attribute that’s holding me back here…

9

sounds like ur close

i did a little experiment with flexbox and you will get an item to respond to the size of the container, even after you have taken it out of the flow using pos: abs, but it will no longer carry the flex behavior it had while it was in the flow because flex only affects the immediate children of the container, and this child has gone missing as far as flexbox is concerns. So none of those handy shrink / grow properties of flext box will be available to you

however, the general html rules still apply so can get it to respond when it’s margins are being pushed on by the shrinking container.

perhaps that means you need to use margins in your GASP thingy.

10

Well, I’m not at the GSAP stage. I’m still just building the Bootstrap structure.

Ya, I’m current close. It’s a comical situation where fixing one thing results in something else busting…

What would solve it, is if there was some way to set an image size based on the screen size (like you can do with various other attributes, using the Bootstrap XS, SM, MD, etc tables).

But, it doesn’t appear that sort of thing is available, either in Bootstrap or CSS, as far as what I see in the Bootstrap and CSS palettes in Pinegrow.

I’ve always been a bit confused about when to use things like Fluid, Flex, etc… and, again, whether to apply them to the element directly, or the containing column.

There’s got to be a way to do this… People are doing infinitely more complex things than this. The responsive and relative positioning seem to be fighting each other.

It’s weird… The object image is the right size in the XL and MD sizes, but is oversized in the others. I’d think it would just be ‘right’ in the XL, and then too big in the other sizes, including MD.

I highly suspect it is related to things like Fluid, mw-100, w-100, etc. I just haven’t figured out the right combo.

11

your predicament is exactly why i chose to go my own way with grid, rather than try and untangle a bunch of boostrap code.

if you were in plain-ol html world, you could set the size of the little box as % of the container, say 10%.

and then even if you take that shape out of the flow it’s still bound by the container it’s in and would respond to it changing size with the screen size.

i just tried this on my little mock up and it works.

12

AH!!! I think I may have got it to work… or certainly something far better.

I removed any position tag from the background image (…I never understood why it needs to have any positional tag, since it’s the object image that gets offset, and the attribute only serves to take it out of the flow, and make it leak out of the column)… and then I set the object image height to 50% (just as an experiment, as I figured if I couldn’t have it scale down based on the screen size, I could at least scale it down to a size where it never overflowed out of the image area).

It appears that MAYBE by giving the height attribute ANY kind of percentage value, it now conforms to the background element.

It WORKS at least! I’m saving that version off and storing it in a lead box.

13

save save save and always just save again to be sure.

but if you remove the pos: rel on the container you will no longer be able to use it for reference on positioning the smaller box, which is where i thought you wanted to go.

14

Ya, actually I only heard of CSS Grid a week or so ago… and didn’t know at the time if it was something new or old. I thought Bootstrap 4 was the latest and greatest… and then I read about how CSS grid is (arguably) better for some things (…seems to be a heated debate on that, actually… so, who knows).

This is just for a front/landing page for my new site… so it’s a small/simple page, and I could certainly redo it using CSS Grid, if that proves to be a better route. I’ll probably look into it. I can always try it, since it’s not like I’d be erasing the Bootstrap version in order to try it. Might as well try both, right?

15

Oh, trust me… I constantly save, make iterative versions, make backups, etc. No worries there…

The container doesn’t have anything… if you mean the literal/Boostrap container. The ‘background/room’ image originally did, as did the ‘object’ image that was to go on top of it.

But, like I said, I never understood why the background image needed any kind of position value.

Seems it works without it, and as a result, it conforms to the column containing it… and now it scales properly too. (… Got to stress test that further, but so far it seems really good…)

16

Yup… It works. The object image scales with the background image.

“Am I crying?.. I - I think I’m actually crying…”

1 Like
17

glad it worked out

if you want to know more about grid, you can start here



https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163
18

Well… It was working up to the point where we last talked, but since then, I started adding some other elements, and the limitations hit me again. Perhaps no so much limitations, as possibly conflicting properties/coding…

I added an additional ‘overlay’ image, which starts at the bottom of the ‘background’ image, at a random horizontal position, and animateds straight upwards to the top of the background image.

Problem is, that overlay element doesn’t seem to scale (or scales differently than expected on various Bootstrap screen sizes), so that (on certain screen sizes) it will travel past the top of the background image.

Trying all kinds of combos of things… each partially promising, but introducting a conflicting/limiting aspect that throws off some other thing.

I’m considering trying a CSS grid version… although (currently) I’m not entirely sure it will solve the problem.

I’m confused… Is there no standard way to have a number of smaller images sitting on top of a larger image… all referencing the same coordinate system (sharing the same origin)… which then ALL scales together in a responsive layout?

19

LayoutQuestion
LayoutQuestion800×530 180 KB

Here’s an updated outline of the intended layout.

The main difference here, is that within that main left image, there are several smaller images that start at a random horizontal position at the bottom of the image, and animate straight up, until they hit the top of the image (without going out of it), where they then respawn (new random horizontal position) at the bottom of the image again.

I have the coding for all of this working fine… except that the animated images are travelling a set distance… which works until the size of the large image changes (as a result of going to a different viewing screen size), often causing the smaller images to animate past the top edge.

Bit of a catch-22… On one hand, the smaller images need to have a common coordinate system, ideally based on the large image (…so, position:relative or postion:absolute kind of thing)… yet making them absolute throws them out of the flow, breaking stuff, and also causing them not to scale with the image. Setting the as relative seemed promising, but then broke other things… I think the containing column’s height gets extended far below the main image… probably as a result of the smaller images who (although being positioned overtop of the main image via offsets) would normally (due to the flow) be placed below the main image, and still (despite the offset) cause the column to stretch as if they weren’t offset. My theory, at least…

I need some way to have the two main images behave in a responsive page way (which I have managed fine), yet ALSO have the smaller (animating) images locked (as if parented) to the larger image, so any scaling that happens to it results in the entire ‘group’ being scaled (including keeping the common coordinate system they all use, relative to the main image, intact. On top of all that, the positional animation of the small images (which I’m doing via GSAP) would probably need to be percentage based, otherwise the distance travelled by the animation tweens wold be a fixed set of pixels, and therefore only be good for ONE of the screensizes (…resulting in the images animating out past the top edge of the main image).

Again, I got it all working great, except that (with my current build) the animation has to be pixel based (not percentage) and so the smaller images animate past the top of the main image on smaller screen sizes.

Seems if I could get the animation percentage-based, I might be able to have the distance travelled by the animation consistant, regardless of screen size… But the more I tinker with it, trying to find some solution, the more OTHER things break (size of columns, alignments, etc),… for a variety of different reasons.

So, I’m trying to find some way to have a bunch of smaller images, on top of a larger image, sharing a common coordinate system, so that if the large image scales, the animation and smaller images scale properly with it… and the whole page still being able to be responsive. Again, seems like a catch-22, as the two don’t seem to want to co-exist… at least not the ways I’ve been trying so far. So many different (and probably conflicting) item property combinations…

Are there any other recommended sites where I might be able to have someone make suggestions for this? This issue is not specifically a Pinegrow thing, so I’m curious if there’s a better place to ask…

20

using % for the size of the moving images will make it responsive to container size but shouldn’t stop you from using px for position in your animation routine.

as for keeping everything in the borders of the larger container, that’s always going to be a challenge… to hide any slop you can set a div border, or some other elemement(s) to create a “frame” with a very high z-order so that anything that get up against it will go behind it, then the little errors won’t show.

it’s a hack, i realize.