Multiple images position/align/float

[phppup]

Quote

 

Quote

 

Battlig with this code all weekend, and not getting the result I want.

This bit of code should offer an understanding, but I'll explain more after removing the FAILED efforts.

Quote

<div  id='one of many'>

<div style="z-index: -9; position: absolute">

         <img src="red.jpg" " >

           <img src="red.jpg" >

</div>

<div  style="z-index: -6; position: relative; float: right" >

     <img src="red.jpg" >

      <img src="red.jpg" >

</div>

</div>

This sort of works, but really doesn't because when the code is REPEATED to create a second, third, etc. row, images are dislodged and hidden or lost completely.

 

The end result that I am trying to achieve is:

A set of images beginning from left to right.

A set of images on the SAME axis/line beginning at right to left (heading for a collision midway).

The ability to repeat this SINGLE double-ended row multiple times consecutively while maintaining the location of the images.

NOTE: currently I have kinda achieved my goal with <br /> but this is NOT acceptable because other elements on the page get shifted rather than being layers that are positioned accordingly on the page.

The ability to successfully repeat the process has been the kink that unravels the process.

Edited January 11, 2021 by phppup
Clean up post

[requinix]

Well... the most obvious answer to "I want a bunch of images on the same line and then repeated for multiple lines" would be to put the images (as inline or inline-block) inside a block DIV for each line.

How about a more thorough description of what you're trying to do? Possibly with screenshots or some rudimentary diagrams?

[phppup]

Probably as rudimentary as things can get, but I'll give it a try:

On a webpage where X,Y,& Z each represent individual images.

 

Left side ........................... Right side

X X X                                      X Z X 

X Z X                                      Y Y X 

X Y Y                                      Y Z X 

etc.

with each side beginning at it's extreme end of page.

Some overlap may occur, so a z-index capacity is necessary.

 

 

Edited January 11, 2021 by phppup
Forgot item

[requinix]

About z-index, if you want images to the right overlapping images to the left (ie, in document order) then you don't have to worry about z-indexes.

Still not sure what the problem is. Making them overlap is one thing, but beyond that it just sounds like you're talking about having multiple images inline with each other. And that doesn't require doing anything more than having multiple images without using line breaks or wrapping.
As in

<div>
  <img ...>
  <img ...>
  <img ...>
  <img ...>
</div>

What you might not be mentioning is that you want certain images on each line. Or a certain quantity of images. In other words, something that depends on knowing the width of the screen...

[phppup]

At this point, which images to use, their size, etc. is not a concern (which is why I wanted a design that could offer flexibility later).

What is a concern, is the ability of placing a table, form, or larger image in the center of the webpage as a central overlay.

Additionally, if I wanted the lines of images to overlap (similar to the slats on a set of window blinds), then i believe the z-index comes into play (and is not functional without a "position" reference [think I read that somewhere].

I've gotten a reasonable result from the code that I posted initially. BUT, when I place a second container (id='second of many') into the mix [essentially duplicating the code], the entire flow goes haywire.

I'm guessing it has to do with my use of ABSOLUTE and RELATIVE, but I cannot seem to find the correct combination on my own 

 

 

Edited January 11, 2021 by phppup
Typos

[requinix]

Are the images supposed to go "behind" the main table/form/image, or do they flow around it?

Can you put this in a jsfiddle or similar?

[phppup]

Sorry, I never used Fiddle, etc.

The images would go behind.

Going back to the "window blinds" metaphor, imagine you extended a closed blind on the ground. Now you place a pizza box on top of it.

The slats may overlap top to bottom (that's my secondary issue), but you will visibly see the right and left portions of each slat running from either end toward the center.

The positioning and sizing is not the problem, yet.

The real issue is establishing a single container with a right wing and a left wing that is positioned as a single unit.

One instance (slat) is fine.

But, repetitions jumble or hide the images when the code is like this:

Quote

<div  id='one of many'>

<div style="z-index: -9; position: absolute">

         <img src="red.jpg" " >

           <img src="red.jpg" >

</div>

<div  style="z-index: -6; position: relative; float: right" >

     <img src="red.jpg" >

      <img src="red.jpg" >

</div>

</div>

<div  id='two of many'>

<div style="z-index: -9; position: absolute">

         <img src="red.jpg" " >

           <img src="red.jpg" >

</div>

<div  style="z-index: -6; position: relative; float: right" >

     <img src="red.jpg" >

      <img src="red.jpg" >

</div>

</div>

It will function with ten <br> between each container, but the <br> causes displacement in other areas of the page.

My thinking is that there's a triggering based on the size of the small image I am using. Once I 'clear' a certain placement. That is why I feel the problem is my use of ABSOLUTE and RELATIVE, but I haven't found a solution.

Edited January 12, 2021 by phppup

[requinix]

Don't layer the background behind the foreground. Layer the foreground on top of the background.

Take a DIV of whatever size you want and position it on the page wherever you want the container of all this to be. position: relative but that's basically it.
Then add your background images to it. position: absolute and left/top and/or right/bottom however you need. Do a bit of math on the backend to figure it out (or hardcode it, as the case may be).
Then add the foreground image. position: absolute so it appears where you want. You shouldn't have to z-index it or anything else.

Example

It's a bit more hands-on with the positioning than I would like; some fancy CSS might be able to fix that.