How do I lay 3 gifs on top of each other in a div, then have the position of each gif be relative to the div in HTML?

Question

So, I'm moving from Wix to Neocities. And I can't really just take the pages from Wix and paste them into Neocities, so I need to remake a few things by hand now. I already asked google about this and got this as an answer: How do I position one image on top of another in HTML? Which, for only TWO images works, sort of fine, aside from the fact that it literally just breaks if I add align="center" to the div. It also just... doesn't really allow me to put more than the first two on top?

Here's the full code in the page:

<title>Work in progress...</title>
<link rel="icon" type="image/x-icon" href="/pages/images/favicons/main.png">
<link rel="stylesheet" type="text/css" href="/style.css">
<!-- CSS and div to make the site logo look the same as the Wix version, modified from https://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html
I might just put this into the main style.css, not sure.-->
<style>
.logo {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
}
.image2 {
  position: relative;
  top: 0;
  left: 0;
}
.image3 {
  position: absolute;
  top: 0px;
  left: 0px;
}
</style>

<div class="logo">
  <img class="image1" src="/pages/images/general/logo/1.gif" />
  <img class="image2" src="/pages/images/general/logo/2.gif" />
  <img class="image3" src="/pages/images/general/logo/3.gif" />
</div>

Since this stupid dumb site needs me to have 10 rep to even post images, you'll just have to take these links instead. At least I don't have to break the links like on GBATemp back when I was new there. I get that it's to prevent spam, but isn't there a better way?

Expected result: https://i.stack.imgur.com/suFVh.png

Actual result: https://i.stack.imgur.com/suXC7.png (screenshot left slightly uncropped to show that it's starting at the top-left of the page, not the absolute-regardless-of-window-size center like I want. plus the 3rd image (filename 3.gif) is completely outside of the div!)

I feel like a valve developer working on TF2. This shit doesn't work!! Why? Has I ever? In all seriousness, I'm still new to CSS and just want to know what the hell is wrong because doing it the HTML way would be WAY WAY easier for me than the "just put them all into one gif" way.

What I want in the end is for the div to just control the position of all 3 images inside of it, so that I can just put align="center" into the div's opening tag and have it just work.

Oh, and I'll put a live preview of the site at https://catboybeebop.neocities.org/pages/main_new.html, so you guys can see this all in action to better help me through this.

@kennarddh What do you mean? The screenshot links in my post, or the tags? If you mean the ones in the img tags, no, all the image links are valid as far as I can tell since they DO still load in the page.. — JeffersonTheCoder, Nov 09 '22 at 03:04
@kennarddh Ah, right. Yeah, that was intentional since at first I figured this place would try to remove links to just images to prevent people from skirting past the 10 reputation thing, but nope. Hence the edit. Anyway, any idea on what I should do to fix this stupidness? — JeffersonTheCoder, Nov 09 '22 at 03:07

score 0 · Answer 1 · answered Nov 09 '22 at 03:17

0

.logo {
  position: relative;
  top: 0;
  left: 0;
}

.image1 {
  position: absoulute;
  top: 0;
  left: 0;
}

.image2 {
  position: absolute;
  top: 0;
  left: 0;
}

.image3 {
  position: absolute;
  top: 0;
  left: 0;
}

<div class="logo">
  <img class="image1" src="https://catboybeebop.neocities.org/pages/images/general/logo/1.gif" />
  <img class="image2" src="https://catboybeebop.neocities.org/pages/images/general/logo/2.gif" />
  <img class="image3" src="https://catboybeebop.neocities.org/pages/images/general/logo/3.gif" />
</div>

answered Nov 09 '22 at 03:17

kennarddh

2,186
2
6
21

Well, that works but it still doesn't fix the problem with adding align="center" to the div... (after the class part specifically) Oh, and I think "absoulute" was a typo. – JeffersonTheCoder Nov 09 '22 at 03:24
Okay, that KINDA works now, but it's still not quite centered, it's off to the right? WTF? @kennarddh just mentioning you since afaik SO doesn't do that automatically. – JeffersonTheCoder Nov 09 '22 at 03:29

score 0 · Answer 2 · edited Nov 15 '22 at 06:37

So, I made a sister thread about this on gbatemp and actually got a working answer pretty quickly! To quote shaunj66:

Get rid of the center property on each CSS declaration. It's not valid.

Remove position from image1 so it gives the parent logo div a calculated height so that any following content added later will be below the logo div.

Add left and right rules to image2 and image3 so the browser knows there to position them then add margin 0 auto (0 margins top and bottom, automatic margins left and right) to centrally position them.

CSS:

.logo {
  position: relative;
}

.image2, .image3 {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

How do I lay 3 gifs on top of each other in a div, then have the position of each gif be relative to the div in HTML?

2 Answers2