Why doesn’t the footer stay hidden and mess up the page

Question

Why doesn’t the footer stay hidden and mess up the page

Asked 9 years, 1 month ago

Viewed 131 times

2

I need the footer to stay hidden and appear as I scroll the page, but something is going wrong I don’t know why. In that link is the example of how it should work.

Follows my code:

 a {
   text-decoration: none;
 }
 ul li {
   list-style-type: none;
 }
 .text-center {
   text-align: center !important;
 }
 .menu {
   text-align: center;
 }
 .menu li {
   display: inline;
 }
 .menu li a {
   margin: 10px;
   color: #fff;
   font-family: Gabriola;
   font-size: 1.5em;
 }
 .menu li a:hover {
   color: #f80;
 }
 .seta-menu {
   margin-top: 3%;
 }
 #texto-header {
   margin-top: 20%;
 }
 header h1 {
   color: #fff;
   text-align: center;
   font-family: Gabriola;
   font-size: 5em;
 }
 header strong {
   color: #f80;
 }
 header p {
   color: #fff;
   text-align: center;
   font-family: gabriola;
   font-size: 1.2em;
   margin-top: -3%;
 }
 .botao-circulo {
   background: transparent;
   width: 50px;
   height: 50px;
   -webkit-transform: scale(1.5);
   -o-transform: scale(1.5);
   -ms-transform: scale(1.5);
   -moz-transform: scale(1.5);
   transform: scale(1.5);
   border-radius: 50px;
   border: 1px solid #fff;
   position: absolute;
   margin-top: 10%;
 }
 .botao-circulo:hover {
   background: rgba(255, 255, 255, 0.06);
 }
 .botao-circulo img {
   -webkit-transform: scale(0.2);
   -o-transform: scale(0.2);
   -ms-transform: scale(0.2);
   -moz-transform: scale(0.2);
   transform: scale(0.2);
   margin-left: -42px;
   margin-top: -17px;
 }
 #video {
   width: 100%;
   height: 100%;
 }
 video {
   height: 100%;
   width: 100%;
   z-index: -100;
   position: absolute;
   top: 0;
   left: 0;
   -webkit-transform: scaley(1.72);
   -o-transform: scaley(1.72);
   -ms-transform: scaley(1.72);
   -moz-transform: scaley(1.72);
   transform: scaley(1.72);
 }
 #bg-video {
   position: absolute;
   top: 0;
   left: 0;
   z-index: -50;
   width: 100%;
   height: 100%;
   opacity: 0.55;
 }
 #main-teste {
   position: relative;
   z-index: 2;
   min-height: 80%;
   margin: 0 0 600px;
   background-color: #fff;
 }
 #main-footer {
   position: fixed;
   bottom: 0;
   height: 70%;
   width: 100%;
   background-size: 100% 100%;
   background-color: aquamarine;
 }
 .content-teste {
   position: relative;
   display: block;
   margin: 0;
 }

<div id="main-teste">
  <div class="content-teste">
    <header>
      <ul class="menu">
        <li><a href="">Home</a>
        </li>
        <li><a href="">Sobre</a>
        </li>
        <li><a href="">Games</a>
        </li>
        <li><a href="">Eventos</a>
        </li>
        <li><a href="">Team</a>
        </li>
        <li><a href="">Contato</a>
        </li>
        <li><a href="">Ajuda</a>
        </li>
        <li><a href="">Forum</a>
        </li>
      </ul>

      <img src="http://tapproom.com/testing/tapp/bg.png" id="bg-video">

      <div id="video">
        <video id="Video1" width="100%" height="100%" loop>
          <source src="video/League-warrios.mp4" type="video/mp4" />
        </video>
      </div>

      <div id="texto-header">
        <h1>Lorem Ipsum <strong>Dolor</strong></h1>
        <p>dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
          <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.</p>
      </div>
    </header>
    <div>
      <div>
        <footer id="main-footer">


        </footer>

i have downloaded your code and the footer conforms to the template. If what you are referring to is the box where the video would appear, instantiated as video-footer? If so, it’s quite simple.

– Michel Simões

2015/05/21 at 14:25
OK I’ve deleted friend

– Felipe Henrique

2015/05/21 at 16:11
looking better, try to separate so, body of the site that overlaps the footer, and separate from it the footer, the footer fixed under the body of the site and the body of the site with padding of the size q you want to appear of the footer, should work

– Michel Simões

2015/05/21 at 20:20

3 answers

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.

by Michel Simões • **1,236** points · Answer 1 · 2015-05-21T14:30:05+00:00

Look, I edited the html, where Voce put it <div><div> before the footer is </div></div>

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">



            <style>


a {
  text-decoration: none;
}
ul li {
  list-style-type: none;
}
.text-center {
  text-align: center !important;
}
.menu {
  text-align: center;
}
.menu li {
  display: inline;
}
.menu li a {
  margin: 10px;
  color: #fff;
  font-family: Gabriola;
  font-size: 1.5em;
}
.menu li a:hover {
  color: #f80;
}
.seta-menu {
  margin-top: 3%;
}
#texto-header {
  margin-top: 20%;
}
header h1 {
  color: #fff;
  text-align: center;
  font-family: Gabriola;
  font-size: 5em;
}
header strong {
  color: #f80;
}
header p {
  color: #fff;
  text-align: center;
  font-family: gabriola;
  font-size: 1.2em;
  margin-top: -3%;
}
.botao-circulo {
  background: transparent;
  width: 50px;
  height: 50px;
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -moz-transform: scale(1.5);
  transform: scale(1.5);
  border-radius: 50px;
  border: 1px solid #fff;
  position: absolute;
  margin-top: 10%;
}
.botao-circulo:hover {
  background: rgba(255, 255, 255, 0.06);
}
.botao-circulo img {
  -webkit-transform: scale(0.2);
  -o-transform: scale(0.2);
  -ms-transform: scale(0.2);
  -moz-transform: scale(0.2);
  transform: scale(0.2);
  margin-left: -42px;
  margin-top: -17px;
}
#video {
  width: 100%;
  height: 100%;
}
video {
  height: 100%;
  width: 100%;
  z-index: -100;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: scaley(1.72);
  -o-transform: scaley(1.72);
  -ms-transform: scaley(1.72);
  -moz-transform: scaley(1.72);
  transform: scaley(1.72);
}
#bg-video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -50;
  width: 100%;
  height: 100%;
  opacity: 0.55;
}
#main-teste {
  position: relative;
  z-index: 20;
  min-height: 80%;
  margin: 0 0 600px;
  background-color: #fff;
}
#main-footer {
  position: fixed;
  bottom: 0;
  height: 70%;
  z-index:1;
  width: 100%;
  background-size: 100% 100%;
  background-color: aquamarine;
}
.content-teste {
  position: relative;
  display: block;
  margin: 0;
}

            </style>

    </head>

    <body>

<div id="main-teste">
  <div class="content-teste">
    <header>
      <ul class="menu">
        <li><a href="">Home</a>
        </li>
        <li><a href="">Sobre</a>
        </li>
        <li><a href="">Games</a>
        </li>
        <li><a href="">Eventos</a>
        </li>
        <li><a href="">Team</a>
        </li>
        <li><a href="">Contato</a>
        </li>
        <li><a href="">Ajuda</a>
        </li>
        <li><a href="">Forum</a>
        </li>
      </ul>

      <img src="http://tapproom.com/testing/tapp/bg.png" id="bg-video">

      <div id="video">
        <video id="Video1" width="100%" height="100%" loop>
          <source src="video/League-warrios.mp4" type="video/mp4" />
        </video>
      </div>

      <div id="texto-header">
        <h1>Lorem Ipsum <strong>Dolor</strong></h1>
        <p>dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
          <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.</p>
      </div>
    </header>
    </div>
    </div>

        <footer id="main-footer">


        </footer>
    </body>

</html>

by Disner • 56 points · Answer 2 · 2019-10-03T12:18:35+00:00

Was missing z-index in footer css, and the first two Ivs were not closed properly.

a {
	text-decoration: none;
}
ul li {
	list-style-type: none;
}
.text-center {
	text-align: center !important;
}
.menu {
	text-align: center;
}
.menu li {
	display: inline;
}
.menu li a {
	margin: 10px;
	color: #fff;
	font-family: Gabriola;
	font-size: 1.5em;
}
.menu li a:hover {
	color: #f80;
}
.seta-menu {
	margin-top: 3%;
}
#texto-header {
	margin-top: 20%;
}
header h1 {
	color: #fff;
	text-align: center;
	font-family: Gabriola;
	font-size: 5em;
}
header strong {
	color: #f80;
}
header p {
	color: #fff;
	text-align: center;
	font-family: gabriola;
	font-size: 1.2em;
	margin-top: -3%;
}
.botao-circulo {
	background: transparent;
	width: 50px;
	height: 50px;
	-webkit-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	-moz-transform: scale(1.5);
	transform: scale(1.5);
	border-radius: 50px;
	border: 1px solid #fff;
	position: absolute;
	margin-top: 10%;
}
.botao-circulo:hover {
	background: rgba(255, 255, 255, 0.06);
}
.botao-circulo img {
	-webkit-transform: scale(0.2);
	-o-transform: scale(0.2);
	-ms-transform: scale(0.2);
	-moz-transform: scale(0.2);
	transform: scale(0.2);
	margin-left: -42px;
	margin-top: -17px;
}
#video {
	width: 100%;
	height: 100%;
}
video {
	height: 100%;
	width: 100%;
	z-index: -100;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: scaley(1.72);
	-o-transform: scaley(1.72);
	-ms-transform: scaley(1.72);
	-moz-transform: scaley(1.72);
	transform: scaley(1.72);
}
#bg-video {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -50;
	width: 100%;
	height: 100%;
	opacity: 0.55;
}
#main-teste {
	position: relative;
	z-index: 2;
	min-height: 80%;
	margin: 0 0 600px;
	background-color: #fff;
	z-index: 2;
}
#main-footer {
	position: fixed;
	bottom: 0;
	height: 70%;
	width: 100%;
	background-size: 100% 100%;
	background-color: aquamarine;
}
.content-teste {
	position: relative;
	display: block;
	margin: 0;
}

<div id="main-teste">
  <div class="content-teste">
    <header>
      <ul class="menu">
        <li><a href="">Home</a> </li>
        <li><a href="">Sobre</a> </li>
        <li><a href="">Games</a> </li>
        <li><a href="">Eventos</a> </li>
        <li><a href="">Team</a> </li>
        <li><a href="">Contato</a> </li>
        <li><a href="">Ajuda</a> </li>
        <li><a href="">Forum</a> </li>
      </ul>
      <img src="http://tapproom.com/testing/tapp/bg.png" id="bg-video" alt="">
      <div id="video">
        <video id="Video1" width="100%" height="100%" loop>
          <source src="video/League-warrios.mp4" type="video/mp4" />
        </video>
      </div>
      <div id="texto-header">
        <h1>Lorem Ipsum <strong>Dolor</strong></h1>
        <p>dolor sit amet, consectetur adipiscing elit. Sed at risus neque. <br>
          Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.</p>
      </div>
    </header>
  </div>
</div>
<footer id="main-footer"> </footer>

by João Pedro • 81 points · Answer 3 · 2016-03-31T12:00:24+00:00

 a {
   text-decoration: none;
 }
 ul li {
   list-style-type: none;
 }
 .text-center {
   text-align: center !important;
 }
 .menu {
   text-align: center;
 }
 .menu li {
   display: inline;
 }
 .menu li a {
   margin: 10px;
   color: #fff;
   font-family: Gabriola;
   font-size: 1.5em;
 }
 .menu li a:hover {
   color: #f80;
 }
 .seta-menu {
   margin-top: 3%;
 }
 #texto-header {
   margin-top: 20%;
 }
 header h1 {
   color: #fff;
   text-align: center;
   font-family: Gabriola;
   font-size: 5em;
 }
 header strong {
   color: #f80;
 }
 header p {
   color: #fff;
   text-align: center;
   font-family: gabriola;
   font-size: 1.2em;
   margin-top: -3%;
 }
 .botao-circulo {
   background: transparent;
   width: 50px;
   height: 50px;
   -webkit-transform: scale(1.5);
   -o-transform: scale(1.5);
   -ms-transform: scale(1.5);
   -moz-transform: scale(1.5);
   transform: scale(1.5);
   border-radius: 50px;
   border: 1px solid #fff;
   position: absolute;
   margin-top: 10%;
 }
 .botao-circulo:hover {
   background: rgba(255, 255, 255, 0.06);
 }
 .botao-circulo img {
   -webkit-transform: scale(0.2);
   -o-transform: scale(0.2);
   -ms-transform: scale(0.2);
   -moz-transform: scale(0.2);
   transform: scale(0.2);
   margin-left: -42px;
   margin-top: -17px;
 }
 #video {
   width: 100%;
   height: 100%;
 }
 video {
   height: 100%;
   width: 100%;
   z-index: -100;
   position: absolute;
   top: 0;
   left: 0;
   -webkit-transform: scaley(1.72);
   -o-transform: scaley(1.72);
   -ms-transform: scaley(1.72);
   -moz-transform: scaley(1.72);
   transform: scaley(1.72);
 }
 #bg-video {
   position: absolute;
   top: 0;
   left: 0;
   z-index: -50;
   width: 100%;
   height: 100%;
   opacity: 0.55;
 }
 #main-teste {
   position: relative;
   z-index: 2;
   min-height: 80%;
   margin: 0 0 600px;
   background-color: #fff;
 }
 #main-footer {
   position: absolute;
   bottom: 0;
   height: 30px;
   width: 100%;
   background-size: 100% 100%;
   background-color: aquamarine;
 }
 .content-teste {
   position: relative;
   display: block;
   margin: 0;
 }

 <div id="main-teste">
  <div class="content-teste">
    <header>
      <ul class="menu">
        <li><a href="">Home</a>
        </li>
        <li><a href="">Sobre</a>
        </li>
        <li><a href="">Games</a>
        </li>
        <li><a href="">Eventos</a>
        </li>
        <li><a href="">Team</a>
        </li>
        <li><a href="">Contato</a>
        </li>
        <li><a href="">Ajuda</a>
        </li>
        <li><a href="">Forum</a>
        </li>
      </ul>

      <img src="http://tapproom.com/testing/tapp/bg.png" id="bg-video">

      <div id="video">
        <video id="Video1" width="100%" height="100%" loop>
          <source src="video/League-warrios.mp4" type="video/mp4" />
        </video>
      </div>

      <div id="texto-header">
        <h1>Lorem Ipsum <strong>Dolor</strong></h1>
        <p>dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
          <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.</p>
      </div>
    </header>
<div>
<div>
        <footer id="main-footer">


        </footer>