Position absolute overlapping content on resize?

HTML & CSS
1

Hello there,

I am trying to solve this issue… i have this content in the middle my text… when position absolute that and push it down with top: 405px… it works great… but on the resize it’s overlapping my black bar in the bottom…

How can i solve this? try resizing… you wil see that i mean.

http://tinyurl.com/nrumhga

2

Why are you positioning the heroUnit-text box with position:absolute?

.heroUnit-content-text {
    position: absolute;
    top: 305px;
}
3

Hi,

Thats why i am actually trying to ask for help i need that content to stay at the bottom all the time.

4

At the bottom of what?

A more complete description of the page would help. Maybe drawings or screen shots. I am not willing to guess your design intent. Please show me what you want.

5

I’m guessing not the page bottom but that the “black bar” isn’t moving down to stay below the text.

6

http://s18.postimg.org/6dgzp06dj/screen.png

Please take a look…

So as you can see the content with text should stay like 150/20px before… on resize.

Thanks

7

I do not see an image in your post in the forum. (It woud have been easier to drag and drop an image into the post.)

What is the black bar supposed to do? Where is it supposed to be?

Do you want the heroUnit text vertically centered in the space above the black bar, regardless of the size of the viewport, OR is there more content below the black bar???

8

The black bar is going to be the menu and the men will stay fixed so the whole black bar is going to be fixed.

the content need to be aligned at the bottom but not exactly at the bottom around 150px and needs to stay like that when i resizze my screen

Thanks for the help

9

OK, I think I understand your intent, now. Thank you.

10

Please give these files a try and see if they come close to your wishes.

The css file is expected to be in a css folder and the image is expected to be in an images folder. Matched with the HTML file, they should work. I made the black fixed footer 100px tall instead of 52px. The fixed footer requires a fixed height which must also be reflected in the CSS for the position of the bottom of the text in .heroUnit-content-text.

I did not try to tweak anything else, so the page still has many opportunities for improvement such as converting font sizes from px to em.

zpeedy11.css (4.4 KB)
zpeedy11.html (2.4 KB)

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.