Components of pages cluttering when you resize the page

Question

Components of pages cluttering when you resize the page

Navigation

#1 by (1 votes)

0

I would like to know what is going on with my page because I see that I coded it all, but when I redimension the components go up one on top of the other, I know that my page should have media queries, even without the stockings, my page can not do this because half queries are to fix some details only and build the mobile version of my project I do not know what I did wrong in my code I will post it all so you can see what is happening on my page already tried to put margin-top com pixel percentage and nothing if they can say where I am wrong thank you therefore I have no idea what is going on following 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><scriptsrc="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>

html5 css3

asked by anonymous 23.07.2015 / 13:48

1 answer

Execute PHP code inside a jQuery condition SOLUTION for JAVA 8 error - windows 8

score 1 · Accepted Answer

This happens because you are using position:absolute; this property is not very friendly to responsiveness. Try building your layout using position:relative; and leave position:absolute; only for really needed cases.