Page components messing up when redeeming the page

Asked

Viewed 53 times

0

I would like to know what is happening to my page because see well I encoded it whole but when I redeem the components climb one on top of the other I know that my page should have media queries but even without the media my page can not do it because medias queries are to fix some details only and build the mobile version of my project I don’t know what I did wrong in my code I will post it whole so you can see what’s going on in my page I tried to put the margin-top with percentage with pixel and nothing if you can say where I am missing thank you because I have no idea what this happens follows the code:

body {
  overflow-x: hidden;
}
a {
  outline: none;
  text-decoration: none;
}
ul li {
  list-style-type: none;
}
input {
  outline: none;
  cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
strong {
  font-family: Gabriola;
}
.text-center {
  text-align: center;
}
/*#video-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  overflow: hidden;
}*/

#bg-video {
  background-image: url(../images/overlay.png);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
#video-bg > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}
/* 1. No object-fit support: */

@media (min-aspect-ratio: 16/9) {
  #video-bg > video {
    height: 300%;
    top: -100%;
  }
}
@media (max-aspect-ratio: 16/9) {
  #video-bg > video {
    width: 300%;
    left: -100%;
  }
}
/* 2. If supporting object-fit, overriding (1): */

@supports (object-fit: cover) {
  #video-bg > video {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.menu {
  text-align: center;
  z-index: 1;
}
.menu li {
  display: inline;
}
nav img {
  max-width: 95%;
  margin-top: 2%;
  margin: 10px auto;
  text-align: center;
}
.menu li a {
  color: #fff;
  font-size: 1.5em;
  margin: 15px;
}
.menu li a:hover {
  color: #f80;
}
#apresentacao-home {
  text-align: center;
  color: #fff;
}
#apresentacao-home h1 {
  font-size: 4em;
  margin-top: 20%;
  max-width: 100%;
}
#apresentacao-home p {
  font-size: 1.3em;
  width: 550px;
  max-width: 95%;
  margin: -20px auto;
}
#apresentacao-home strong {
  color: #f80;
}
#comecar {
  background-image: url(../images/btn-home.png);
  background-repeat: no-repeat;
  background-position: -284px 0;
  display: block;
  color: #000;
  width: 282px;
  height: 86px;
  font-size: 1.5em;
  text-align: center;
  line-height: 80px;
  margin: 0 auto;
  color: #fff;
}
#comecar:hover {
  background-position: 0 0;
  color: #222;
}
#comecar:active {
  background-position: 0 -48px;
}
#comecar.efeito {
  -webkit-transition: background-position 1s;
  /* Safari */
  transition: background-position 1s;
}
#buttonbar #volDn {
  border-radius: 100%;
  border: 4px solid #fff;
  cursor: pointer;
  -webkit-transform: scale(0.3);
  -o-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
  background: transparent;
  outline: none;
}
#buttonbar #volDn:hover {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
#menos {
  -webkit-transform: scale(0.3);
  -o-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
  outline: none;
}
#buttonbar #volUp {
  border-radius: 100%;
  border: 4px solid #fff;
  cursor: pointer;
  -webkit-transform: scale(0.3);
  -o-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
  background: transparent;
  outline: none;
}
#buttonbar #volUp:hover {
  background: rgba(255, 255, 255, 0.06);
}
#buttonbar #btn-mais {
  -webkit-transform: scale(0.3);
  -o-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
}
#buttonbar #mute {
  border-radius: 100%;
  border: 4px solid #fff;
  cursor: pointer;
  -webkit-transform: scale(0.3);
  -o-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
  background: transparent;
  outline: none;
}
#buttonbar #mute:hover {
  background: rgba(255, 255, 255, 0.06);
}
#buttonbar #btn-mudo {
  -webkit-transform: scale(0.5);
  -o-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);
}
#buttonbar {
  position: absolute;
  bottom: 3%;
  right: 0;
  margin-right: 5%;
  outline: none;
  z-index: 3;
}
#buttonbar button {
  margin: -30px;
  outline: none;
}
/*##################################################################
                            CSS SESSAO 1
  ##################################################################*/

#info-geral {
  text-align: center;
  color: #000;
  margin-top: 25%;
}
#info-geral h1 {
  font-size: 3em;
  font-weight: bold;
}
#info-geral > p {
  width: 550px;
  max-width: 85%;
  margin: -30px auto;
  font-size: 1em;
}
.barra-site {
  margin: 50px auto;
  max-width: 95%;
  width: 18%;
  height: 1.5px;
  border: none;
  background-color: #f80;
}
.marca {
  position: absolute;
  z-index: -3;
  width: 650px;
  height: 700px;
  max-width: 95%;
  left: 0;
  margin-top: 150px;
  overflow: hidden;
}
.titulo {
  margin: 0;
  color: #222;
  font-weight: bold;
  font-size: 2em;
}
.info {
  margin: 70px auto;
  padding: 0;
  text-align: center;
}
.info p {
  text-align: center;
  font-size: 1em;
  font-weight: normal;
  margin: 5px auto;
}
.info li {
  display: inline-block;
  width: 300px;
  /* ou se preferires - width: 33.33333%; - este valor significa: 100 a dividir por 3 divs = 33.33333 . 100% é o tamanho total da largura do documento */
  vertical-align: top;
  margin: 30px;
}
.info img {
  width: 30%;
  transition: 0.5s;
}
.info img:hover {
  -webkit-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: scale(1.2);
  transition: 0.5s;
}
.btn {
  background-image: url(../images/btn-2.png);
  background-repeat: no-repeat;
  background-position: -284px 0;
  display: block;
  color: #000;
  width: 284px;
  height: 86px;
  font-size: 1.5em;
  text-align: center;
  line-height: 80px;
  margin: 0 auto;
}
.btn:hover {
  background-position: 0 0;
}
.btn:active {
  background-position: 0 -48px;
}
.btn.efeito {
  -webkit-transition: background-position 1s;
  /* Safari */
  transition: background-position 1s;
}
/*##################################################################
                            CSS SESSAO 2
  ##################################################################*/

#text-games {
  background-image: url(http://www.capasface.com.br/imagens/capas/jogos/capa-facebook-315.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 550px;
  position: absolute;
  left: 0;
  margin-top: 5%;
  z-index: -2;
}
.bg-site {
  background-image: url(../images/overlay.png);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
#intro-games {
  color: #fff;
  text-align: left;
  margin-left: 5%;
}
#intro-games h1 {
  font-size: 3.5em;
}
#intro-games p {
  font-size: 1.3em;
  width: 500px;
  max-width: 95%;
}
#intro-games span {
  color: #f80;
}
.btn-2 {
  background-image: url(../images/btn-home.png);
  background-repeat: no-repeat;
  background-position: -284px 0;
  display: block;
  color: #fff;
  width: 282px;
  height: 86px;
  font-size: 1.5em;
  text-align: center;
  line-height: 80px;
  margin-left: 5%;
}
.btn-2:hover {
  background-position: 0 0;
  color: #222;
}
.btn-2:active {
  background-position: 0 -48px;
}
.btn-2.efeito {
  -webkit-transition: background-position 1s;
  /* Safari */
  transition: background-position 1s;
}
/*##################################################################
                            CSS SESSAO 3
  ##################################################################*/

#parceiros {
  margin-top: 50%;
  position: absolute;
  text-align: center;
  color: #222;
}
#parceiros h1 {
  font-size: 3em;
  font-weight: bold;
}
#parceiros p {
  font-size: 1em;
  width: 450px;
  margin: -30px auto;
}
#parceiros ul li {
  display: inline;
}
#parceiros ul li img {
  width: 30%;
  -o-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
#parceiros ul li img:hover {
  -o-filter: grayscale(0);
  -ms-filter: grayscale(0);
  -moz-filter: grayscale(0);
  -webkit-filter: grayscale(0);
}
.btn-3 {
  background-image: url(../images/btn-2.png);
  background-repeat: no-repeat;
  background-position: -284px 0;
  display: block;
  color: #222;
  width: 282px;
  height: 86px;
  font-size: 1.5em;
  text-align: center;
  line-height: 80px;
  margin: 0 auto;
  margin-top: 3%;
}
.btn-3:hover {
  background-position: 0 0;
  color: #fff;
}
.btn-3:active {
  background-position: 0 -48px;
}
.btn-3.efeito {
  -webkit-transition: background-position 1s;
  /* Safari */
  transition: background-position 1s;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style-home.css" media="screen">
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
  <script src="js/jquery.slide-text-left.js"></script>
</head>

<body>
  <header>
    <nav>
      <ul class="menu">
        <li><a href="#">Sobre</a>
        </li>
        <li><a href="games.html">Games</a>
        </li>
        <li><a href="eventos.html">Evento</a>
        </li>
        <li><a href="team.html">Team</a>
        </li>
        <li><a href="contato.php">Contato</a>
        </li>
        <li><a href="#">Noticias</a>
        </li>
      </ul>
    </nav>


    <div id="apresentacao-home">
      <h1>Olga amigos somos a <strong>Nova Era!</strong></h1>	
      <p>Adipiscing a commodo ante nunc accumsan interdum mi ante adipiscing. A nunc lobortis non nisl amet vis volutpat aclacus nascetur ac non.Lorem curae eu ante amet sapien in tempus ac. Adipiscing id accumsan adipiscing ipsum.</p>
      <a href="#" id="comecar" style="margin-top:5%;">vamos comecar ?</a>
    </div>

    <div id="video-bg">
      <video autoplay loop id="volume-js">
        <!-- Default video source: -->
        <source type="video/mp4" src="video/myvid.mp4" media="(orientation:landscape)">
      </video>
    </div>

    <div id="buttonbar">
      <button id="volDn">
        <img src="images/video/menos.png" id="menos" />
      </button>
      <button id="volUp">
        <img src="images/video/mais.png" id="btn-mais" />
      </button>
      <button id="mute">
        <img src="images/video/som.png" id="btn-mudo" />
      </button>
    </div>
    <div id="bg-video"></div>
  </header>

  <!--####################### SESSAO-1 #######################-->
  <section id="info-geral">
    <h1>Porque nos escolher</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <hr class="barra-site" />
    <ul class="info">
      <li>
        <a href="#">
          <img src="http://png-4.findicons.com/files/icons/2396/emoji/200/emoji15.png" alt="info novaera" />
          <h3 class="titulo">Melhor conserto</h3>
        </a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </li>

      <li>
        <a href="#">
          <img src="http://png-4.findicons.com/files/icons/2396/emoji/200/emoji15.png" alt="info novaera" />
          <h3 class="titulo">Melhor qualidade</h3>
        </a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </li>
      <li>
        <a href="#">
          <img src="http://png-4.findicons.com/files/icons/2396/emoji/200/emoji15.png" alt="info novaera" />
          <h3 class="titulo">O melhor preço</h3>
        </a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </li>
    </ul>

    <a href="#" class="btn">Leia mais...</a>
  </section>

  <!--####################### SESSAO-2 #######################-->
  <section id="text-games">
    <div id="intro-games">
      <h1>Jogamos de tudo &nbsp;<span class="slideText">RPG's</span> </h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque. Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris. Lorem ipsum dolor sit ametconsectetur adipiscing
        elit. Sed at risus neque. Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque. Cras sit amet ligula
        ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.Lorem ipsum dolor sit amet, consectetur</p>
      <a href="#" class="btn-2">Conheça nossos jogos...</a>
    </div>
    <div class="bg-site"></div>
  </section>

  <!--####################### SESSAO-3 #######################-->
  <section id="parceiros">
    <h1>Nossos Parceiros</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque. Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus.</p>
    <hr class="barra-site" />

    <ul>
      <li>
        <a href="http://levelupgames.uol.com.br/levelup/" target="_blank">
          <img src="https://www.epicnodes.com/wp-content/uploads/easy_logo_slider/563791parallels_logo_web_tagline-400x133.png" alt="parceria-novaera" />
        </a>
      </li>
      <li>
        <a href="http://gamehall.uol.com.br/v10/" target="_blank">
          <img src="https://www.epicnodes.com/wp-content/uploads/easy_logo_slider/563791parallels_logo_web_tagline-400x133.png" alt="parceria-novaera" />
        </a>
      </li>
      <li>
        <a href="http://www.gamevicio.com/" target="_blank">
          <img src="https://www.epicnodes.com/wp-content/uploads/easy_logo_slider/563791parallels_logo_web_tagline-400x133.png" alt="parceria-novaera" />
        </a>
      </li>
      <li>
        <a href="">
          <img src="https://www.epicnodes.com/wp-content/uploads/easy_logo_slider/563791parallels_logo_web_tagline-400x133.png" alt="parceria-novaera" />
        </a>
      </li>
      <li>
        <a href="http://www.centralkeys.com.br/" target="_blank">
          <img src="https://www.epicnodes.com/wp-content/uploads/easy_logo_slider/563791parallels_logo_web_tagline-400x133.png" alt="parceria-novaera" />
        </a>
      </li>
      <li>
        <a href="http://www.gametalk.com.br/" target="_blank">
          <img src="https://www.epicnodes.com/wp-content/uploads/easy_logo_slider/563791parallels_logo_web_tagline-400x133.png" alt="parceria-novaera" />
        </a>
      </li>
    </ul>
    </ul>

    <a href="#" class="btn-3">Mais sobre eles...</a>
  </section>
</body>

</html>

Note: I believe that even without media queries she should not mess so much so I find it strange

html5 css3

  • "hmm" I understood then the Absolute only seems that it is good however it ends with Voce after an equal time now" rsrsrs" "hmm"I will make modifications here and I will be obliged

  • By @Kaduamaral I’m sorry the language more Oce is "fuck" vlw same and I here imagining that the position Absolute was my friend kkkk so put there as an answer for me to put as accepted

  • good hahha, I suffered a lot with these positions early in career.

1 answer

1


This happens because you are using position:absolute; this property is not very responsive. Try to build your layout using position:relative; and let the position:absolute; only for cases really necessary.

Browser other questions tagged html5 css3

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