Jump to content
guirufino

tentando criar site responsivel

Recommended Posts

Site:http://platformwar.epizy.com

 

Estou tentando fazer um site responsivo, mas estou tendo problemas com o (height:) o height: da galeira nao quer funcionar com a " % " não funciona, ja procurei de tudo na net e nao achei resposta.

 

Eu peguei o código da galeira na internet, e comecei a modificar... só que tem esse código:

Ta no Hmtl:

<script>
        $('#games').coinslider({ width : "100%" , height: 500 , navigation : false , delay : 5000 , navigation: true , effect: 'rain' } ) ;
  </script>

 

Aqui to tentando colocar 50% mais não funciona... eu queria que ele diminui-se confirme diminui a tela. (não sei nada de javascript).

Se precisarem de algum Código eu mando

 

CSS:

#games  {position: relative; margin-top: 70px;  z-index: 0; margin-left: auto;  margin-right: auto; }
.coin-slider {float: none; top:50%; left:50%; text-align: center; }
.coin-slider { overflow: hidden; zoom: 0; position: static; }
.coin-slider a{ text-decoration: none; outline: none; border: none;  }
.cs-buttons {font-size: 0%; padding: 1%; float: left; position: relative; }
.cs-buttons a {margin-left:5px; background:url(../cores-roleta/contadorcompleto.png);  height: 29px; width: 29px; float: left; text-indent: -1000px;}
.cs-active { background:url(../cores-roleta/contador10.png); height: 29px; width: 29px; float: left; }

.cs-title { width: 100%; padding: 2%; background-color:#000000; color: #FFFFFF; }

.cs-prev,
.cs-next { background-color: Transparent; color: #000; padding: 0px 10px; }
 

Share this post


Link to post
Share on other sites

Não precisa e nem é o ideal que manipule isso com javascript piorou ainda usando jQuery...

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <style>
    * {
      box-sizing: border-box
    }
    body {
      margin: 0;
      padding: 0
    }
    .imagem-ajustavel {
      min-height: 200px; /* A imagem nunca terá menos de 200px */
      max-height: 500px; /* A imagem nunca terá mais de 500px, sendo ela maior a isso ou igual */
      width: 100% /* A imagem terá total extensão do seu elemento pai */
    }
  </style>
  <body>
    <img src="sua_imagem.formato" class="imagem-ajustavel"/>
  </body>
</html>

 

Share this post


Link to post
Share on other sites
21 minutos atrás, Omar~ disse:

Não precisa e nem é o ideal que manipule isso com javascript piorou ainda usando jQuery...


<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <style>
    * {
      box-sizing: border-box
    }
    body {
      margin: 0;
      padding: 0
    }
    .imagem-ajustavel {
      min-height: 200px; /* A imagem nunca terá menos de 200px */
      max-height: 500px; /* A imagem nunca terá mais de 500px, sendo ela maior a isso ou igual */
      width: 100% /* A imagem terá total extensão do seu elemento pai */
    }
  </style>
  <body>
    <img src="sua_imagem.formato" class="imagem-ajustavel"/>
  </body>
</html>

 

Tentei coloca o codigo e nao funciono.

O codigo e meio complicado entao vo explica tudo!

<script>
        $('#games').coinslider({ width : "100%" , height: 500 , navigation : false , delay : 5000 , navigation: true , effect: 'rain' } ) ;
   </script>

esse código aqui e pra chama a galeria, se eu muda o "height:50%" buga tudo e não aparece imagem.

Então eu deixei "height:500", ai eu queria um solução pra contorna isso e pode criar a galeira responsiva.

 

E o codigo CSS eu consigo manipula um pouco a galeria mais tbm nao consigo muda o "height".

Se quiser o codigo do js se quiserem da uma olhada.

Agradeço!

 

A nao sei se muda alguma coisa:

<!--Codigo da Galeria de Imagens ate /script-->
    <div id="games">
<!--Link para Imaguem-->
    <a href="">
<!--Aqui colocar a imaguem 900x500-->
<img src="img/Imaguemsparadownload/nogame.jpg" width="900" height="500" no-repat/>
<!--Colocar o Texto!-->
    <span>
      <b><font face="Arial">NO GAME NO LIFE</font></b><br />
          <i>Sem Jogo Sem Vida!!!</i>
    </span>
    </a>

 

Se eu conseguir colocar a imagem responsiva a galeria n estaria responsiva acho...

 

E assim q eu coloco a imagem na galeria não sei se ajuda..

Share this post


Link to post
Share on other sites

Olá amigo, sou novo no desenvolvimento web, então não sei lhe dar uma resposta exata para seu problema, mas, já tentou usar o bootstrap 4? Eu fiz uns testes nele e ele deixar seu site responsivo "automaticamente", acho que você pode conseguir integrar essa característica do bootstrap no seu site, fazendo assim algo que demoraria horas em alguns minutos. É bem fácil de criar páginas front-end e com ele, seus códigos já se adaptam para qualquer monitor sem escrever várias linhas de comando. Sei que é importante passar por alguns problemas e aprender a resolver para agregar conhecimento e experiência, mas tente usar o bootstrap para agilizar seu serviço, pode ser uma grande ajuda.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Anonicah
      Olá preciso de ajuda com esse exercício. Montei até a parte de formulário + validação de javascrip no dreamweaver mas buguei com o resto. O que eu fiz:
       

      <html>
      <head>
      <title> Formulário CPF validado com Java Script </title>
          
          <script language="javascript" type="text/javascript">
      function validar() {
      var cpf = form1.cpf.value;
          
      if (cpf == "") {
      alert('Preencha o campo com seu cpf');
      form1.cpf.focus();
      return false;
      }
          
      }
      </script>
          
          
      </head>
      <body>
      <form name="form1" action="enviar.php" method="post">
      CPF:
      <input name="cpf" type="text"><br /><br />
      <input type="submit"  onclick="return validar()">
      </form>
      </body>
      </html>
       
       
      EXERCÍCIO
      Criar um formulário simples em html com um único campo CPF;
      Fazer uma validação em javascript antes de fazer o post;
      Consumir o WS https://bi.vidaclass.com.br/utils para consultar informações do CPF enviado pelo form;
      Do retorno obtido exibir na tela:
      Nome, email, telefone
      Se tem compra em saude: Sim | Não
      Quantas compras: (5) ex.
      Se tem farma: Sim | Não
      Se tem dependente: Sim | Não
      Qtd. de dependentes: (2) ex.

      Obtem o token para consumir os endpoints;
      https://bi.vidaclass.com.br/auth
      {
          "company_id": 1,
          "username": "webmaster@vidaclass.com.br",
          "password": "Teste20170705"
      }
      Endpoint para consultar o CPF
      https://bi.vidaclass.com.br/utils
      {
          "action": 4,
          "key": {
              "cpf": 25383193820
          }
      }
    • By iagomonteiro
      Estou criando um jogo de cartas em web, o jogo é bem estilo HS, e estou tendo problemas para adicionar condições de movimentação no drag and drop. Como vocês podem ver eu tenho uma variável mana, e a movimentação das cartas só seria possível de acordo com ela, porém quando adiciono as condições o D&D acaba nem se movimentando mais, pensei em chamar cada função do d&d dentro de uma condição, mas também não funcionou, alguém pode ajudar?
       
      JS
      // Jogador 1
      const fillplace1 = document.querySelector('#fillplace1');
      const fillplace2 = document.querySelector('#fillplace2');
      const fillplace3 = document.querySelector('#fillplace3');
      var fill;
      const empties = document.querySelectorAll('.empty');
      fillplace1.addEventListener('dragstart', enterstart);
      fillplace2.addEventListener('dragstart', enterstart);
      fillplace3.addEventListener('dragstart', enterstart);
      for (const empty of empties) {
          empty.addEventListener('dragover', dragOver);
          empty.addEventListener('dragenter', dragEnter);
          empty.addEventListener('dragleave', dragLeave);
          empty.addEventListener('drop', dragDrop);
      }
      function enterstart(){
          fill = this;
      }
      function dragOver(e) {
          e.preventDefault();
      }
      function dragEnter(e) {
          e.preventDefault();
          this.className += ' hovered';
      }
      function dragLeave() {
          this.className = 'empty';
      }
      function dragDrop(id) {
          this.className = 'empty';
          this.append(fill);
      }
       
      HTML
      <link rel="stylesheet" href="../css/jogar.css" />
       
      <div id="barraGeneral">
          <img src="../imagens/Campo/barraGeneralalfa.png" id="imggeneral" />
      </div>
       
      <div id="persona">
          <img src="../imagens/Personagem/cucapersonagem.png" id="imgpersonagem" />
      </div>
       
      <button id="btpassar" onclick="cont();">Passar Rodada</button>

      <H1 id="campomana">1</H1>
       
      <!-- Mesa das cartas jogador 1-->
      <div class="empty" id="emptyplace1">
      </div>
      <div class="empty" id="emptyplace2">
      </div>
      <div class="empty" id="emptyplace3">
      </div>
      <div class="empty" id="emptyplace4">
      </div>
      <div class="empty" id="emptyplace5">
      </div>
       
      <!-- Mão do jogador 1 -->
      <div class="emptyhand1">
          <div class="fill" draggable="true" id="fillplace1">
              <img src='../imagens/Sorteio/aa.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand2">
          <div class="fill" draggable="true" id="fillplace2">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
      <div class="emptyhand3">
          <div class="fill" draggable="true" id="fillplace3">
              <img src='../imagens/Sorteio/aa2.png' draggable='true'>
          </div>
      </div>
       
    • By Anderson Maciel
      Boa tarde pessoal,

      Estou quebrando a cabeça para resolver um problema, tenho uma div dinâmica que carrega uma <table> em uma das colunas deveria apresentar o componente Switchery, esta <table> é montada a partir de uma função PHP que faz o select em uma tabela do banco de dados conforme abaixo:
       
      echo '<table class="table table-hover"> <thead> <tr> <th>Nome</th> <th>Agrupamento</th> <th>Ativo</th> </tr> </thead> <tbody>'; foreach($data as $row) { If ($row['ativo'] == 1) {$vativochk = "checked";} else {$vativochk = "";} echo '<tr> <td>'.$row['nome'].'</td> <td>'.$row['agrupamento'].'</td> <td><input type="checkbox" name="ativo_grid" class="js-switch" '.$vativochk.' disabled="disabled"></td> </tr>'; } echo ' </tbody> </table>'; Aqui está o Ajax que chama e retorna atualizando a DIV:
      //funcoes do grid dos graficos function atualiza_grid_graficos() { $.ajax({ type: "POST", url: "hubfuncind.php", data: { id_tabindicadores_paineis: $('#id_tabindicadores_paineis').val(), acao: "gridgraficos" }, success: function(data) { $('#conteudo').html(data); } }); } O retorno vem certinho, mas apenas o componente Switchery está vindo desconfigurado, ou seja vem um checkbox normal (html).

      O que é mais incrível é que neste mesmo formulário mais acima tenho este mesmo componente funcionando normalmente, somente dentro da DIV dinâmica é que fica desconfigurado conforme imagem anexa.

      Será que alguém já passou por isso?

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.