0

gostaria de saber oque está havendo com a minha página porque veja bem eu codifiquei ela inteira porem quando redimenciono os componentes sobem um em cima do outro sei que minha página deve ter media queries porem mesmo sem as medias minha página não pode fazer isso porque medias queries são para consertar alguns detalhes somente e construir a versão mobile do meu projeto eu não sei oque fiz de errado no meu código vou postar ele inteiro para que vocês possam ver oque esta havendo na minha pagina já tentei colocar o margin-top com porcentagem com pixel e nada se puderem dizer onde estou errando agradeço pois não faço ideia do que esta havendo segue o código:

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>

Obs: Creio eu que mesmo sem media queries ela não deveria bagunçar tanto assim por isso acho estranho

3
  • "hmm" entendi então a absolute somente parece que e boa porem ela acaba com voce depois de um tempo igual agora" rsrsrs" "hmm"farei modificações aqui e testarei obrigado 23/07/2015 às 12:03
  • poxa @KaduAmaral me desculpa o linguajar mais voce é "foda" vlw mesmo e eu aqui imaginando que a position absolute era minha amiga kkkk então coloca ai como resposta para eu colocar como aceita 23/07/2015 às 12:12
  • hahha de boa, eu sofri muito com esses positions no início de carreira.
    – KaduAmaral
    23/07/2015 às 12:53

1 Resposta 1

1

Isso acontece porque está usando position:absolute; essa propriedade não é muito amiga da responsividade. Tente construir seu layout usando position:relative; e deixe o position:absolute; apenas para casos realmente necessários.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .