Placing elements below responsive header

Hello everyone! I’ve run around in circles trying to figure this out, posting it on the forums was my absolute last option.

I spent a lot of time figuring out how to execute an idea I had: layering responsive text centered over my responsive image for my Tribute site header. There are easier ways to do this, but I wanted to hit all the requirements, so I managed to figure it out! I was proud of it… until I had to start adding more. I believe that through the use of the position properties in my various header elements, I’ve made the rest of the site difficult for myself to finish.

Here it is:

I figured out if I changed any of the positions, it messes the header up somehow. But now I just can’t seem to get any content below my header (which contains the image, title, and img-caption). If I can’t figure out how to do it, I’ll scrap the neat header and go with something simpler.

Any ideas or hints on how I can make this work would be much appreciated!
As well as any general critiques of the code.

When you are making things have position: absolute it takes them out of the flow order. This means you can’t just just add on more elements and expect them follow them.

Maybe you can experiment with relative and translate(). That may retain the “box” format of these things.

If I understand correctly you are saying if you add to the header it will mess up your positioning.

Slip a div in just inside your header and use that for your absolute positioned element. That way image, caption and title all have a box to position off of and you can still add to your header without disrupting your positioning.

OK - I looked at your post again. I misunderstood your problem (although you could maybe make that work with some padding on your content or similar).

I had something like this once and I used background-image property on a div with % width. That might work for you. I can’t find where I kept an example though.

1 Like

That might work. The only problem is that this is for the tribute page, which requires an img tag. So she needs the picture in that tag.

That’s correct—I was able to successfully do this when it was a background image declared in the CSS, but I need it to be its own div to hit the tribute page requirements.

I’m fairly certain I need to fuss around with the positioning some more to get it to work out, but altering any of the existing positions makes the header stop scaling responsively.

I was getting really confused so I started from scratch and built up. Turns out only the title needed to be out of the flow. Taking the image out of flow too was why you were getting problems with your content sneaking up into your header area. With the image still in the flow all that content gets pushed back down where it belongs

Below is very stripped down version of your tribute that passes all but the anchor test - so just add that anchor.

There is link in comments to where I read up on the vert / horiz centering

Good luck. It looks really good.

@alhazen1, wow!! That’s exactly what I was looking for. Thank you so much! Heh, it all seems so simple when you explain it like that but I was running around in circles the whole time. Thanks again!!