Misc Others A bit of help with HTML please?

[jeffyTheHomebrewer]

So, I'm porting my old wix site over to neocities, and I'm having some trouble with the logo. Essentially, it's 3 gifs on top of each other; I know, a little stupid, but this is much, much easier than trying to make them into ONE gif for now.
So, I went to stack overflow (here's my thread there about this btw) and didn't really get a good answer to fix this so far.
Sure, it kinda works, but not really.

What I want in the end is for the 3 gifs to be in a div that I can just center with align="center", and just not need to worry about it at all after that.
So, here's the page's code as of writing this post:

<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;
  center: 0
}

.image1 {
  position: absolute;
  center: 0
}

.image2 {
  position: absolute;
  center: 0
}

.image3 {
  position: absolute;
  center: 0
}
</style>

<div class="logo" align="center">
  <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>

Now, here's what that results in:

It's KINDA centered, but not actually! What the fuck? (and no, using the <center> tag doesn't change anything, it just gives the same result)
I know I'm still new to CSS and generally don't use divs when I make pages, but what the fuck am I doing wrong? It all looks correct, so why doesn't it just be centered?
Oh, and you can click here to see the page update in real time as you guys help me out.

 

[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.

.logo {
  position: relative;
}

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

 

[jeffyTheHomebrewer]

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.

.logo {
  position: relative;
}

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

Holy shit, this works pretty much perfectly! (granted changing the align="<value>" still only controls the first image, but whatever, I only ever wanted it centered anyhow)

 

[zoyaa10]

My suggestion is to use a combination of CSS and HTML to achieve the desired effect. You can use the position property in CSS to place the three images on top of each other and then use the center property to align them. You can also use the div tag to wrap the images and set the align attribute to "center" to center the whole logo. In addition, you can also use media queries to make the logo responsive. This way, the logo can be displayed correctly across different screen sizes.

For example, you can use the following code:

<style>
.logo {
  position: relative;
  center: 0;
}

.image1 {
  position: absolute;
  center: 0;
}

.image2 {
  position: absolute;
  center: 0;
}

.image3 {
  position: absolute;
  center: 0;
}

@media (max-width: 700px) {
  .logo {
    width: 100%;
  }
}
</style>

<div class="logo" align="center">
  <img class="image1" src

 

[jeffyTheHomebrewer]

Problem's already been solved by

shaunj66, but still thank you!​

Post automatically merged: Dec 15, 2022

oh god damn it. why does copying plaintext also copy the formatting? eh, whatever