CODEWITHSUNDEEP
htmlcss
Lukasz
Lukasz

Reputation: 409

div element moves when i resize. issue about positioning

i am beginner and i have a little problem i couldn't be able to fix for last three hours. so i think it's safe to ask.

I placed a fixed menu and video header to my page successfully.

But when I wanted to place a text after video header, i had problem with that text when i resize. Here is the picture, see the blue text please;

https://i.sstatic.net/5ivwR.jpg

When i watch the page fullscreen, it is perfect.

but the more i resize, the more the blue text goes down and looks ugly.

Here you can see my css and html codes;

body {
  background: #F0F0F0;
  margin: 0px;
}

.header {
  height: 10%;
  background: #fff;
  position: fixed;
  margin: 0px auto;
  top: 0;
  width: 100%;
  overflow: hidden;
  opacity: 0.8;
}

.basicf {
  position: absolute;
  top: 80%;
  color: blue;
}

.basic {
  color: red;
  position:absolute;
  top: 100%;
}

#video-container {
    position: absolute;
    top:10%;
    left:0%;
    height: 70%; 
    width:100%;
    overflow: hidden;
    z-index:-1;
}

video.fillWidth {
    width: 100%;
}

html:

<div class="header">menu here.</div>

<div id="video-container">
    <video autoplay loop class="fillWidth">
        <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"/>
        <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"/>
        Your browser does not support the video tag. I suggest you upgrade your browser.
    </video>
</div><!-- end video-container -->

<div class="basicf">please start just after video header.</div>

<div class="basic">Where is this text?</div>

In div element basicf i tried top: 80%; or padding: 80% 0 0 0 0 it's only good when it's fullscreen. I also tried some position: absolute, relative etc. but I couldn't fix.

Upvotes: 1

Views: 90

Answers (4)

Sushmit Patil
Sushmit Patil

Reputation: 1465

body {
  background: #F0F0F0;
  margin: 0px;
}

.header {
  height: 10%;
  background: #fff;
  position: fixed;
  margin: 0px auto;
  top: 0;
  width: 100%;
  overflow: hidden;
  opacity: 0.8;
}

.basicf {
  color: blue;
}

.basic {
  color: red;
}

#video-container {
    margin-top:10%;
    height: 70%; 
    width:100%;
    overflow: hidden;
    z-index:-1;
}

video.fillWidth {
    width: 100%;
}
<div class="header">menu here.</div>

<div id="video-container">
    <video autoplay loop class="fillWidth">
        <source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4"/>
        <source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm"/>
        Your browser does not support the video tag. I suggest you upgrade your browser.
    </video>
</div><!-- end video-container -->

<div class="basicf">please start just after video header.</div>

<div class="basic">Where is this text?</div>

Upvotes: 1

knocked loose
knocked loose

Reputation: 3304

You could try removing your absolute positioning and use relative with a clear on the text to keep it below, like this.

.basicf {
position: relative;
color: blue;
    clear:both;
}

#video-container {
    position: relative;
    margin-top:10%;
    left:0%;
    height: 70%; 
    width:100%;
    overflow: hidden;
    z-index:-1;
}

Upvotes: 0

Rvervuurt
Rvervuurt

Reputation: 8963

Your webpage is breaking because you are using position wrong. Don't go and position everything absolute and fixed, unless you know exactly what you're doing.

When you don't use position anywhere, HTML will just render as you have written it, top to bottom. By positioning stuff, you kill that order and it will be positioned as you position it. So, since the text got top:80%, it will always get 80% on top. In other words: it is stuck on the page and will not move with if you resize horizontally, only vertically.

Here's your edited CSS:

body {
    background: #F0F0F0;
    margin: 0px;
}
.header {
    height: 50px;
    background: #fff;
    margin: 0px auto;
    width: 100%;
    overflow: hidden;
    opacity: 0.8;
}
.basicf {
    color: blue;
}
.basic {
    color: red;
}
#video-container {
    margin-top: 0px;
    height: 70%;
    width:100%;
    overflow: hidden;
}
video.fillWidth {
    width: 100%;
}

And a working Fiddle.

Upvotes: 0

Jonas
Jonas

Reputation: 2249

Dont use position: absolute in your case.

Try this:

.basicf {
position: relative;
color: blue;
vertical-align: top;
}

#video-container {
position: relative;
top:10%;
left:0%;
height: 70%; 
width:100%;
overflow: hidden;
z-index:-1;
}

The reason your basic is not showing is because you do everything with absolute and your elements hide each other if they overlap.

Upvotes: 0

Related Questions