Responsive design does not work

Question

Responsive design does not work

Navigation

0

I'm creating a portal in a didactic way, and now in the responsive part I can not align it.

It's all broken, and one big problem is the footer that has "position: absolute" and without that definition it does not occupy the entire screen.

Another important point is that the css is not saving the size that I set for my leftside.

Can anyone help me?

Codes below:

var slideItem = 0;
window.onload = function() {
  setInterval(passarSlide, 2000);
  var slidewidth = document.getElementById("slideshow").offsetWidth;
  var objs = document.getElementsByClassName("slide");
  for (var i in objs) {
    objs[i].style.width = slidewidth + 'px';
  }
}

function passarSlide() {
  var slidewidth = document.getElementById("slideshow").offsetWidth;

  if (slideItem >= 3) {
    slideItem = 0
  } else {
    slideItem++;
  }

  document.getElementsByClassName("slideshow_area")[0].style.marginLeft = "-" + (slidewidth * slideItem) + "px";
}

function mudarSlide(pos) {
  slideItem = pos;
  var slidewidth = document.getElementById("slideshow").offsetWidth;
  document.getElementsByClassName("slideshow_area")[0].style.marginLeft = "-" + (slidewidth * slideItem) + "px";
}

body {
  margin: 0;
  padding: 0;
  font-family: helvetica;
  font-size: 12px;
}

.topo {
  height: 30px;
  background-color: #303030;
}

.topoint {
  width: 100%;
  max-width: 1040px;
  height: 30px;
  margin: auto;
}

.topoleft {
  width: 50%;
  height: 30px;
  float: left;
}

.toporight {
  width: 50%;
  height: 28px;
  float: right;
  text-align: right;
  margin-top: 2px;
}

.topoleft ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.topoleft li {
  float: left;
  height: 30px;
  line-height: 30px;
  margin-left: 8px;
  margin-right: 8px;
}

.topoleft li a {
  text-decoration: none;
  color: #FFF;
}

.topoleft li .ativo {
  color: blue;
}

.topobusca {
  width: 110px;
  height: 26px;
  outline: 0;
}

.toporight a {
  float: right;
}

.toporight input {
  float: right;
}

.toporight img {
  margin-right: 4px;
}

.topo2 {
  height: 95px;
}

.topo2int {
  width: 100%;
  max-width: 1040px;
  height: 95px;
  margin: auto;
}

.logo {
  width: 230px;
  height: 65px;
  float: left;
  margin-top: 30px;
}

.topo2 .banner {
  width: 650px;
  height: 80px;
  float: right;
  margin-top: 7px;
  background-color: #ff0000;
  font-size: 40px;
  color: #fff;
  line-height: 80px;
  text-align: center;
  font-family: roboto;
}

.menu {
  height: 40px;
  background-color: #ff0000;
}

.menuint {
  width: 100%;
  max-width: 1040px;
  height: 40px;
  margin: auto;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
}

.menu li {
  float: left;
  height: 40px;
  line-height: 40px;
  padding-left: 8px;
  padding-right: 8px;
}

.menu li:hover .submenu {
  display: block;
}

.menu a {
  color: #fff;
  text-decoration: none;
}

.submenu {
  width: 140px;
  position: absolute;
  background-color: #ff0000;
  display: none;
}

.submenuitem {
  width: 140px;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
}

.submenuitem:hover {
  background-color: #ff5555;
  width: 130px;
}

.ultimasnoticias {
  height: 40px;
}

.ultimasnoticiasint {
  width: 100%;
  max-width: 1040px;
  height: 40px;
  margin: auto;
}

.ultnoticiasarea {
  height: 28px;
  background-color: #fff;
  border: 1px solid #ccc;
  margin-top: 10px;
  border-radius: 2px;
}

.ultnoticiastitulo {
  background-color: #ff0000;
  color: #fff;
  height: 28px;
  line-height: 28px;
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
  font-size: 16px;
}

.ultnoticiasnoticia {
  color: #000;
  height: 28px;
  line-height: 28px;
  display: inline-block;
  padding-left: 10px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.containerint {
  width: 100%;
  max-width: 1040px;
  margin: auto;
}

.leftside {
  width: 750px;
  float: left;
}

.rightside {
  width: 278px;
  min-height: 300px;
  float: right;
  margin-left: 12px;
}

.widget {
  border: 1px solid #ccc;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 2px;
}

.widget_titulo {
  height: 30px;
  line-height: 30px;
  background-color: #ddd;
  border-bottom: 1px solid #ccc;
  padding-left: 5px;
  font-size: 14px;
}

.widget_conteudo {
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}

.noticia_item {
  font-size: 14px;
  margin: 0px 10px;
  padding: 10px 0px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}

.noticia_item a {
  text-decoration: none;
  color: #000;
}

.slideshow {
  height: 335px;
  overflow: hidden;
  margin-bottom: 20px;
}

.slideshow_area {
  width: 10000px;
  height: 335px;
  transition: all 1s;
}

.slide {
  height: 335px;
  float: left;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.slide img {
  height: 335px;
  width: 750px;
}

.slideinfo {
  position: relative;
  top: -70px;
  height: 70px;
  background-image: url('../images/slideshow_bg.png');
  background-size: auto 70px;
  z-index: 10000;
}

.slideinfo_titulo {
  font-size: 20px;
  color: #fff;
  padding-top: 20px;
  margin-left: 20px;
}

.slideinfo_subtitulo {
  font-size: 13px;
  margin-left: 20px;
  color: #fff;
}

.bolls {
  position: absolute;
  width: 200px;
  height: 15px;
  margin-left: 10px;
  padding-top: 10px;
}

.boll {
  width: 15px;
  height: 15px;
  float: left;
  margin-right: 5px;
  cursor: pointer;
  background-color: #d0d1cc;
  border-radius: 10px;
}

.noticiaarea1 {
  width: 420px;
  height: 420px;
  float: left;
}

.noticiaitem1 {
  height: 220px;
}

.noticia_image {
  width: 390px;
  height: 220px;
  float: left;
  padding: 3px;
  border: 1px solid #ccc;
  margin-top: 4px;
  margin-left: 15px;
}

.texto_descritivo {
  font-size: 30px;
  width: 390px;
  text-align: left;
  margin-left: 15px;
}

.texto_subdescritivo {
  color: #ccc;
  font-size: 12px;
  text-align: left;
  margin-left: 15px;
}

.noticiaarea2 {
  width: 310px;
  height: 420px;
  float: right;
}

.clear {
  clear: both;
}

.noticiaitem {
  text-align: left;
  height: 88px;
  margin-bottom: 14px;
}

.noticia_img {
  width: 80px;
  height: 80px;
  border: 1px solid #ccc;
  padding: 3px;
  margin-top: 4px;
  float: left;
}

.noticiatitulo {
  float: left;
  margin-left: 5px;
  margin-top: 4px;
  font-size: 16px;
  width: 216px;
}

.noticiainfo {
  float: left;
  margin-left: 5px;
  margin-top: 4px;
  color: #999;
  width: 216px;
}

.footer {
  position: absolute;
  height: 35px;
  width: 100%;
  left: 0;
  background-color: #ff0000;
}

.footerint {
  width: 100%;
  max-width: 1040px;
  height: 35px;
  margin: auto;
  background-color: #ff0000;
  font-size: 20px;
  color: #fff;
  text-align: center;
  line-height: 35px;
  font-family: roboto;
}

@media only screan and(max-width:1057px) {
  .topoint,
  .topo2int,
  .menuint,
  .ultimasnoticiasint,
  .containerint,
  .footerint,
  {
    max-width: 890px;
  }
  .leftside,
  {
    width: 620px;
  }
}

<html>

<head>
  <title>Html Portal</title>
  <meta charset="utf-8">
  <meta id="viewport" name="viewport" content="width=device-width, user-scalable=no">
  <link rel="stylesheet" href="assets/css/style.css">
  <script type="text/javascript" src="assets/js/script.js"></script>
</head>

<body>
  <div class="topo">
    <div class="topoint">
      <div class="topoleft">
        <ul>
          <li><a href="./" class="ativo"> Home<a/></li>
              <li><a href="Quem somos">Quem Somos<a/></li>
              <li><a href="Anuncie aqui">Anuncie Aqui<a/></li>
              <li><a href="Contato">Contato<a/></li>
          </ul>
       </div>
          <div class="toporight">
       	    <input type="image" border="0" src="assets/images/lupabranca.png" width="26" height="26" >
       	    <input type="text" name="busca" class="topobusca" placeholder="Busca..." >
            <a href=""><img src="assets/images/youtube.png" border="0" width="26" height="26" /></a>
            <a href=""><img src="assets/images/twitter.png" border="0" width="26" height="26" /></a>
            <a href=""><img src="assets/images/facebook.png" border="0" width="26" height="26" /></a>
            <a href=""><img src="assets/images/googleplus.png" border="0" width="26" height="26" /></a>
            <a href=""><img src="assets/images/rss.png" border="0" width="26" height="26" /></a>
      </div>
    </div>
  </div>
  <div class="topo2">
    <div class="topo2int">
      <div class="logo">
        <img src="assets/images/logo.jpg" border="0" width="230" />
      </div>
      <div class="banner">
        PUBLICIDADE 80 X 650
      </div>
    </div>
  </div>
  <div class="menu">
    <div class="menuint">
      <ul>
        <li><a href="./" class="ativo">Home<a/></li>
          <li><a href="./" >Economia<a/></li>
          <li>
            <a href="./" >Entretenimento<a/>
            <img src="assets/images/arrowdown.png" border="0" width="10"/>
              <div class="submenu">
                  <a href="./"><div class="submenuitem">submenu1</div></a>
          <a href="./">
            <div class="submenuitem">submenu2</div>
          </a>
          <a href="./">
            <div class="submenuitem">submenu3</div>
          </a>
          <a href="./">
            <div class="submenuitem">submenu4</div>
          </a>
          <a href="./">
            <div class="submenuitem">submenu5</div>
          </a>
    </div>
    </li>
    <li>
      <a href="./">Esportes<a/>
            <img src="assets/images/arrowdown.png" border="0" width="10">
              <div class="submenu">
                  <a href="./"><div class="submenuitem">submenu1</div></a>
      <a href="./">
        <div class="submenuitem">submenu2</div>
      </a>
      <a href="./">
        <div class="submenuitem">submenu3</div>
      </a>
  </div>
  </li>
  <li><a href="./">Geral<a/></li>
          <li>
            <a href="./" >Notícias<a/>
            <img src="assets/images/arrowdown.png" border="0" width="10">
              <div class="submenu">
                  <a href="./"><div class="submenuitem">submenu1</div></a>
    <a href="./">
      <div class="submenuitem">submenu2</div>
    </a>
    <a href="./">
      <div class="submenuitem">submenu3</div>
    </a>
    <a href="./">
      <div class="submenuitem">submenu4</div>
    </a>
    </div>
  </li>
  <li><a href="./">policia<a/></li>
          <li><a href="./" >Videos<a/></li>
       </ul>
    </div>
    </div>
       <div class="ultimasnoticias">
        <div class="ultimasnoticiasint">
          <div class="ultnoticiasarea">
             <div class="ultnoticiastitulo">ÚLTIMAS NOTÍCIAS</div>
             <div class="ultnoticiasnoticia">Alguma nótícia de algum texto que vai aparecer aqui...</div>
          </div>
    </div>
  </div>
      <div class="container">
        <div class="containerint">
            <div class="leftside">
                <div class="slideshow" id="slideshow">
                      <div class="bolls">
                          <div class="boll" onclick="mudarSlide(0)"></div>
                          <div class="boll" onclick="mudarSlide(1)"></div>
                          <div class="boll" onclick="mudarSlide(2)"></div>
                          <div class="boll" onclick="mudarSlide(3)"></div>
                      </div>
                     <div class="slideshow_area">
                        <a href="http://br.ufc.com/">
                        <div class="slide">
                             <img src="assets/images/ufc.jpg">
                            <div class="slideinfo">
                         <div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
                       <div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
                    </div>
                 </div>
                 </a>
    <a href="http://sicnoticias.sapo.pt/">
      <div class="slide">
        <img src="assets/images/jornal.jpg">
        <div class="slideinfo">
          <div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
          <div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
        </div>
      </div>
    </a>
    <a href="https://www.nfl.com/">
      <div class="slide">
        <img src="assets/images/nfl.jpg">
        <div class="slideinfo">
          <div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
          <div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
        </div>
      </div>
    </a>
    <a href="http://www.uefa.com/uefachampionsleague/index.html">
      <div class="slide">
        <img src="assets/images/champions.jpg">
        <div class="slideinfo">
          <div class="slideinfo_titulo">Um tiulo de teste para esse slide</div>
          <div class="slideinfo_subtitulo">Subtitulo de teste para esse slide</div>
        </div>
      </div>
    </a>
    </div>
    </div>
    <div class="widget">
      <div class="widget_titulo">NOTÍCIAS</div>
      <div class="widget_conteudo">
        <div class="noticiaarea1">
          <div class="noticiaitem1">
            <div class="noticia_image">
              <img src="assets/images/quadrilha.jpg" border="0" width="390" height="220">
            </div>
            <div class="texto_descritivo">Algum texto descritivo que vai aparecer por aqui abaixo dessa imagem</div>
            <div class="texto_subdescritivo"> 1250 likes 500 comentários</div>
          </div>
        </div>
        <div class="noticiaarea2">
          <div class="noticiaitem">
            <div class="noticia_img">
              <img src="assets/images/jogo.jpg" border="0" width="80" height="80">
            </div>
            <div class="noticiatitulo">Algum titulo qualquer</div>
            <div class="noticiainfo">500 comentários</div>
          </div>
          <div class="noticiaitem">
            <div class="noticia_img">
              <img src="assets/images/rihanna.jpg" border="0" width="80" height="80">
            </div>
            <div class="noticiatitulo">Algum titulo qualquer</div>
            <div class="noticiainfo">500 comentários</div>
          </div>
          <div class="noticiaitem">
            <div class="noticia_img">
              <img src="assets/images/vint Cerf.jpg" border="0" width="80" height="80">
            </div>
            <div class="noticiatitulo">Algum titulo qualquer</div>
            <div class="noticiainfo">500 comentários</div>
          </div>
        </div>
        <div style="clear: both;"></div>
      </div>
    </div>
    <div class="widget">
      <div class="widget_titulo">NOTÍCIAS RECENTES</div>
      <div class="widget_conteudo">
        <div class="noticiaarea1">
          <div class="noticiaitem1">
            <div class="noticia_image">
              <img src="assets/images/empresa.jpg" border="0" width="390" height="220">
            </div>
            <div class="texto_descritivo">Algum texto descritivo que vai aparecer por aqui abaixo dessa imagem</div>
            <div class="texto_subdescritivo"> 1250 likes 500 comentários</div>
          </div>
        </div>
        <div class="noticiaarea2">
          <div class="noticiaitem">
            <div class="noticia_img">
              <img src="assets/images/escritorio.jpg" border="0" width="80" height="80">
            </div>
            <div class="noticiatitulo">Algum titulo qualquer</div>
            <div class="noticiainfo">500 comentários</div>
          </div>
          <div class="noticiaitem">
            <div class="noticia_img">
              <img src="assets/images/paisagem.jpg" border="0" width="80" height="80">
            </div>
            <div class="noticiatitulo">Algum titulo qualquer</div>
            <div class="noticiainfo">500 comentários</div>
          </div>
          <div class="noticiaitem">
            <div class="noticia_img">
              <img src="assets/images/carro.jpg" border="0" width="80" height="80">
            </div>
            <div class="noticiatitulo">Algum titulo qualquer</div>
            <div class="noticiainfo">500 comentários</div>
          </div>
        </div>
        <div style="clear: both;"></div>
      </div>
    </div>
    <footer>
      <div class="footer">
        <div class="footerint">© 2018. Todos os direitos reservados</div>
      </div>
    </footer>
    </div>
    <div class="rightside">
      <div class="widget">
        <div class="widget_titulo">SOCIAL</div>
        <div class="widget_conteudo">
          <a href=""><img src="assets/images/rss.png" border="0" width="26" height="26" /></a>
          <a href=""><img src="assets/images/googleplus.png" border="0" width="26" height="26" /></a>
          <a href=""><img src="assets/images/facebook.png" border="0" width="26" height="26" /></a>
          <a href=""><img src="assets/images/twitter.png" border="0" width="26" height="26" /></a>
          <a href=""><img src="assets/images/youtube.png" border="0" width="26" height="26" /></a>
        </div>
      </div>
      <div class="widget">
        <div class="widget_titulo">ULTIMAS NOTÍCIAS</div>
        <div class="widget_conteudo">
          <div class="noticia_item">
            <a href="./">Alguma notícia de algum site que vai
                         aparecer nesta parte do portal para exemplificar.<a/>
                      </div>
                         <div class="noticia_item">
                         <a href="./">Alguma notícia de algum site que vai
                         aparecer nesta parte do portal para exemplificar.<a/>
                      </div>
                       <div class="noticia_item">
                         <a href="./">Alguma notícia de algum site que vai
                         aparecer nesta parte do portal para exemplificar.<a/>
                      </div>
                       <div class="noticia_item">
                         <a href="./">Alguma notícia de algum site que vai
                         aparecer nesta parte do portal para exemplificar.<a/>
                      </div>
                       <div class="noticia_item">
                         <a href="./">Alguma notícia de algum site que vai
                         aparecer nesta parte do portal para exemplificar.<a/>
                      </div>
                  </div>
             </div>
                <div class="widget">
                   <div class="widget_titulo">PUBLICIDADADE</div>
                  <div class="widget_conteudo">
                      <img src="assets/images/girl.jpg" border="0" width="275" >
                  </div>
             </div>
             <div class="widget">
                   <div class="widget_titulo">ENCONTRE-NOS NO FACEBOOK</div>
                  <div class="widget_conteudo">
                  <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fnike&tabs=timeline&width=272&height=465&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId"width="272" height="465" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
                </div>
             </div>
          </div>
        </div>
      </div>
</body>
</html>

javascript html5 css3

asked by anonymous 17.05.2018 / 16:18

0 answers

How to assign data in a cursor from an exec and not a select Shadow box in React Native image