Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

richard nicson

Criar 3 Colunas responsiva

Recommended Posts

Olá,eu tenho um portal de notícias onde desejo inserir 3 colunas simples para inserir 10 notícias mais lidas do "mês","semana" e "dia",precisava que ficasse uma do lado da outra apenas e caso acessado de celular ou tablet ela ficasse responsiva.

Alguém poderia me ajudar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

a principio elas teriam largura relativa de +-33% e com float left

ao começar a ficar muito estreitas você tira o float left e dê a largura 100%

 

mas vai do seu gosto

 

 

ex

@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Carlos Antoliv
      Então, eh algo até simples, problema de lógica e tudo.  Eu tinha feito, mas o codigo sumiu do nada e nao lembro mais da lógica que eu empregara.
       
      O enredo éh assim
       
      tabela_grupo_produtos
      e
      tabela tabela_produtos
       
      Na tabela_grupo_produtos tem:
      - informatica;
      - eletrodomestico;
      - brinquedos;
       
      na  tabela_produtos tem os podutos que são ligados a tabela de grupo de grupo de produtos:
       
      - informatica->notebook
      - informatica->computador
      - informatica->roteador
       
      - eletrodomestico->geladeira
      - eletrodomestico->microondas
      - eletrodomestico->fogao
       
      - brinquedos->lego
      - brinquedos->boneca
      - brinquedos->carrinhos
       
      O que estou tentando fazer é o seguinte:
       
      - informatica->notebook
                              ->computador
                              ->roteador
       
      - eletrodomestico->geladeira
                                     ->microondas
                                     ->fogao
       
      - brinquedos- >lego
                             -> boneca
                             ->carrinhos
       
       
      Ou seja, mostra na tela pelo "GRUPO" de produtos.
       
      fiz um select no banco....
      e tambem um foreach, mas tem algo que ta errado.
       
      Cheguei até executar dois selects distintos:
      EXEMPLO:

      <!--#################### CÓDIGO SESSÃO ################################ --> 
      <?php     session_start();     echo "Usuario: ". $_SESSION['usuarioNome'];         echo "<br>";     echo "Codigo:  ". $idSessao = $_SESSION['usuarioId']; ?>
      <br>
       
      <a href="sair.php">Sair</a> <!-- #####################FIM CODIGO SESSÃO ############################### --> <?php      $servername = "localhost"; $username = "root"; $password = ""; $database = ""; try {     $conexao2 = new PDO('mysql:host=localhost;dbname=banco', $username, $password);       $conexao2->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);   } catch(PDOException $e) {       echo 'ERROR: ' . $e->getMessage();   }          $sql2 = "SELECT pdos.fk_usuarios, pdos.nome_prod, pdo.nome_produto, nome_grupo_prod, pdos.foto, pdos.desc_prod, pdos.peso_liq_prod, pdos.qtd_prod, pdos.id_prod, pdos.un_medida     FROM tb_produtos AS pdos     JOIN tb_produto AS pdo ON pdos.nome_prod = pdo.id_produto     JOIN tb_grupo_prod AS gpdo      ON gpdo.id_grupo_prod = pdos.fk_tb_grupo_prod      INNER JOIN usuarios As usu     ON pdos.fk_usuarios = usu.id  ";     $stm2 = $conexao2->prepare($sql2);     $stm2->execute();     $kit3 = $stm2->fetchAll(PDO::FETCH_OBJ); ?> <?php require 'database/conexao.php'; // Recebe o termo de pesquisa se existir $termo = (isset($_GET['termo'])) ? $_GET['termo'] : ''; // Verifica se o termo de pesquisa está vazio, se estiver executa uma consulta completa if (empty($termo)):     $conexao = conexao::getInstance();     $sql = 'SELECT DISTINCT item.fk_tb_produtos, usu.nome, prod.nome_produto, prods.desc_prod, prods.peso_liq_prod, prods.un_medida, item.fk_tb_kit, kit.nome_kit, kit.preco_kit, prods.qtd_prod, kit.id_nome_kit, kit.desc_kit FROM tb_itemprodkit item /* tb_itemprodkit*/ INNER JOIN usuarios usu        /* usuarios*/ ON item.fk_usuarios = usu.id INNER JOIN tb_produtos prods  /* tb_produtos */ ON item.fk_tb_produtos = prods.id_prod INNER JOIN tb_kit kit       /*tb_kit */ ON item.fk_tb_kit = kit.id_nome_kit INNER JOIN tb_produto prod ON prods.nome_prod = prod.id_produto  WHERE fk_usuario = 5 GROUP BY kit.id_nome_kit  ';     $stm = $conexao->prepare($sql);     $stm->execute();     $kit = $stm->fetchAll(PDO::FETCH_OBJ); else:     // Executa uma consulta baseada no termo de pesquisa passado como parâmetro     $conexao = conexao::getInstance();     $sql = 'SELECT * FROM tb_kit WHERE nome_kit LIKE :nome_kit OR desc_kit LIKE :desc_kit';     $stm = $conexao->prepare($sql);     $stm->bindValue(':nome_kit', $termo.'%');     $stm->bindValue(':desc_kit', $termo.'%');     $stm->execute();     $kit = $stm->fetchAll(PDO::FETCH_OBJ); endif; ?> <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>Listagem KITs </title>     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">     <link rel="stylesheet" type="text/css" href="css/custom.css"> </head> <body>     <div class='container'>         <fieldset>             <!-- Cabeçalho da Listagem -->             <legend><h1>Listagem de Kits</h1></legend>             <!-- Formulário de Pesquisa -->             <form action="" method="get" id='form-contato' class="form-horizontal col-md-10">                 <label class="col-md-2 control-label" for="termo">Pesquisar</label>                 <div class='col-md-7'>                     <input type="text" class="form-control" id="termo" name="termo" placeholder="Infome o Nome ou E-mail">                 </div>                 <button type="submit" class="btn btn-primary">Pesquisar</button>                 <a href='index.php' class="btn btn-primary">Ver Todos</a>             </form>             <!-- Link para página de cadastro -->             <a href='kit_cadastro.php' class="btn btn-success pull-right">Cadastrar Kit</a>             <div class='clearfix'></div>             <?php if(!empty($kit)):?>                 <!-- Tabela de Clientes -->                 <table class="table table-striped">                     <tr class='active'>                         <th>Foto</th>                         <th>produto</th>                         <th>Nome</th>                         <th>Descrição</th>                         <th>Preço</th>                         <th>Ação</th>                     </tr>                     <?php foreach($kit as $kit2):?>                         <tr>                             <td><img src='fotos/<?=$kit2->foto?>' height='40' width='40'></td>                                                                                      <?php foreach($kit3 as $kit4):?>                             <td>                                  <?=$kit4->nome_produto.'<br>'; ?>                                                                                     </td><?php endforeach; ?>                                                                                      <td><?=$kit2->nome_kit?></td>                                 </td>                             <td><?=$kit2->desc_kit?></td>                             <td><?='R$ '.$kit2->preco_kit.',00'?></td>                                                          <td>                                 <a href='kit_editar.php?id_nome_kit=<?=$kit2->id_nome_kit?>' class="btn btn-primary">Editar</a>                                 <a href='javascript:void(0)' class="btn btn-danger link_exclusao" rel="<?=$kit2->id_nome_kit?>">Excluir</a>                             </td>                         </tr>                                                                                                                                                    <?php endforeach;?>                 </table>             <?php else: ?>                 <!-- Mensagem caso não exista clientes ou não encontrado  -->                 <h3 class="text-center text-primary">Não existe Kit cadastrados!</h3>             <?php endif; ?>         </fieldset>     </div>     <script type="text/javascript" src="js/custom.js"></script> </body> </html>  
      ....se alguem puder ajudar...
       
    • Por BelleFisio
      Olá! Bom dia!
       
      Tenho uma imagem que fica responsiva na maioria dos navegadores, porém no internet explore ela não fica responsiva. No iexplore ela tbm sai da posição correta, então fiz um codigo especifico para o iexplore (o posicionamento ficou correto, porém a imagem não esta responsiva)
       
      Teria alguma forma de corrigir isso?
       
      O codigo esta assim:
      <div class="conteudo"> <div id="cabeçalho"> <div class="logotipo"> <img src="arquivo/img/logotipo.png"> </div> </div> </div>  O CSS:
      .cabeçalho{width:90%;margin-left:auto;margin-right:auto;} .logotipo {width:100%;max-width:1000px;}} .logotipo img{width:100%!important;height:auto;max-width:180px;}  
      Obrigada
       
       
    • Por guirufino
      Então estou tentando deixa um galeria q achei na net responsiva, só que não intendo nada de javascript, acho que é aqui que esta o problema mais n tenho certeza.
      segue código:
      HTML:
      <div id="games">
      <!--Link para Imaguem-->
          <a href="noticia4.html">
      <!--Aqui colocar a imaguem 900x500-->
          <img src="img/Imaguemsparadownload/NeedForSpeedPayback.png" width="900" height="500" alt="Need For Speed Payback" />
      <!--Colocar o Texto!-->
              <span>
                  <b><font face="Arial">Need For Speed Payback</font></b><br />
                  <i>Saiu analize de Need For Speed Payback, clique e confira.</i>
              </span>
          </a>
      </div>
       
      <!--Aqui para configurar o tamanho e os efeitos Galeria-->
      <script> $('#games').coinslider({ width : 900 , height: 500 , navigation : false , delay : 5000 , navigation: true , effect: 'rain' } ) ;  </script>
       
      Entao nessa parte do script que começa a zuera.... se eu muda o "width:100%" ate funciona mais e como se ele n existi-se não consigo clikar na imagem, se eu colocar "height:100%" não funciona a imagem some....
       
      vo coloca parte do codigo da galeira que eu acho que seja relevante:
      Javascript:
       
      (function($) {
          var params         = new Array;
          var order        = new Array;
          var images        = new Array;
          var links        = new Array;
          var linksTarget = new Array;
          var titles        = new Array;
          var interval    = new Array;
          var imagePos    = new Array;
          var appInterval = new Array;
          var squarePos    = new Array;
          var reverse        = new Array;
          $.fn.coinslider= $.fn.CoinSlider = function(options){
              init = function(el){
                  order[el.id]         = new Array();    // order of square appereance
                  images[el.id]        = new Array();
                  links[el.id]        = new Array();
                  linksTarget[el.id]    = new Array();
                  titles[el.id]        = new Array();
                  imagePos[el.id]        = 0;
                  squarePos[el.id]    = 0;
                  reverse[el.id]        = 1;
                  params[el.id] = $.extend({}, $.fn.coinslider.defaults, options);
                  // create images, links and titles arrays
                  $.each($('#'+el.id+' img'), function(i,item){
                      images[el.id]         = $(item).attr('src');
                      links[el.id]         = $(item).parent().is('a') ? $(item).parent().attr('href') : '';
                      linksTarget[el.id]     = $(item).parent().is('a') ? $(item).parent().attr('target') : '';
                      titles[el.id]         = $(item).next().is('span') ? $(item).next().html() : '';
                      $(item).hide();
                      $(item).next().hide();
                  });

                  // set panel
                  $(el).css({
                      'background-image':'url('+images[el.id][0]+')',
                      'width': params[el.id].width,
                      'height': params[el.id].height,
                      'position': 'relative',
                      'background-position': 'top left'
                  }).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />");

                  // create title bar
                  $('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position: absolute; bottom:0; left: 0; z-index: 1000;'></div>");
                  $.setFields(el);
                  if(params[el.id].navigation)
                      $.setNavigation(el);
                  $.transition(el,0);
                  $.transitionCall(el);
              }
              // squares positions
              $.setFields = function(el){
                  tWidth = sWidth = parseInt(params[el.id].width/params[el.id].spw);
                  tHeight = sHeight = parseInt(params[el.id].height/params[el.id].sph);
                  counter = sLeft = sTop = 0;
                  tgapx = gapx = params[el.id].width - params[el.id].spw*sWidth;
                  tgapy = gapy = params[el.id].height - params[el.id].sph*sHeight;
                  for(i=1;i <= params[el.id].sph;i++){
                      gapx = tgapx;
                          if(gapy > 0){
                              gapy--;
                              sHeight = tHeight+1;
                          } else {
                              sHeight = tHeight;
                          }
                      for(j=1; j <= params[el.id].spw; j++){
                          if(gapx > 0){
                              gapx--;
                              sWidth = tWidth+1;
                          } else {
                              sWidth = tWidth;
                          }
                          order[el.id][counter] = i+''+j;
                          counter++;
                          if(params[el.id].links)
                              $('#'+el.id).append("<a href='"+links[el.id][0]+"' class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></a>");
                          else
                              $('#'+el.id).append("<div class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></div>");
                          // positioning squares
                          $("#cs-"+el.id+i+j).css({
                              'background-position': -sLeft +'px '+(-sTop+'px'),
                              'left' : sLeft ,
                              'top': sTop
                          });
                          sLeft += sWidth;
                      }
                      sTop += sHeight;
                      sLeft = 0;
                  }

                  $('.cs-'+el.id).mouseover(function(){
                      $('#cs-navigation-'+el.id).show();
                  });
                  $('.cs-'+el.id).mouseout(function(){
                      $('#cs-navigation-'+el.id).hide();
                  });
                  $('#cs-title-'+el.id).mouseover(function(){
                      $('#cs-navigation-'+el.id).show();
                  });
                  $('#cs-title-'+el.id).mouseout(function(){
                      $('#cs-navigation-'+el.id).hide();
                  });
                  if(params[el.id].hoverPause){
                      $('.cs-'+el.id).mouseover(function(){
                          params[el.id].pause = true;
                      });
                      $('.cs-'+el.id).mouseout(function(){
                          params[el.id].pause = false;
                      });
                      $('#cs-title-'+el.id).mouseover(function(){
                          params[el.id].pause = true;
                      });
                      $('#cs-title-'+el.id).mouseout(function(){
                          params[el.id].pause = false;
                      });
                  }

              };

       
    • Por mcflymito
      há um jeito de separar valores inseridos dentro de uma coluna
      e exibi-los também separados, ex: os valores 120, 160 estão salvos na mesma coluna, mas quero exibilos separadamente, tipo: valor1, valor2
       
      eu só consigo exibir eles juntos, como se fossem um só numero
       
       
       

    • Por Joseph Renato
      OLÁ CAROS AMIGOS. PRECISO QUE EM UMA TABELA A PRIMEIRA COLUNA CHAMADA ALUNO FIQUE FIXA. E QUE O RESTO CONTINUE O MESMO.
      SEGUE ABAIXO OS CÓDIGOS:
       
      <!DOCTYPE html>
      <html>
      <title>LISTA DE ALUNO</title>
          <thead>
                              
      <head>
          <meta http-equiv="Content-type" content="text/html; charset=utf-8">
          <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
          <title>LISTA DE ALUNO.</title>
          <link rel="shortcut icon" type="image/png" href="/media/images/favicon.png">
          <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
          <link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=19472395a2969da78c8a4c707e72123a">
          <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
          <style type="text/css" class="init">
          
          tfoot input {
              width: 125%;
              padding: 1px;
              box-sizing: border-box;
          }
          </style>
          <script type="text/javascript" src="/media/js/site.js?_=5e8f232afab336abc1a1b65046a73460"></script>
          <script type="text/javascript" src="/media/js/dynamic.php?comments-page=examples%2Fapi%2Fmulti_filter.html" async></script>
          <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
          <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
          <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
          <script type="text/javascript" class="init">
          
      $(document).ready(function() {
          // Setup - add a text input to each footer cell
          $('#example tfoot th').each( function () {
              var title = $(this).text();
              $(this).html( '<input type="text" placeholder="procurar'+title+'" />' );
          } );
          // DataTable
          var table = $('#example').DataTable();
          // Apply the search
          table.columns().every( function () {
              var that = this;
              $( 'input', this.footer() ).on( 'keyup change', function () {
                  if ( that.search() !== this.value ) {
                      that
                          .search( this.value )
                          .draw();
                  }
              } );
          } );
      } );

          </script>
      </head>
      <body class="wide comments example">
          <a name="top" id="top"></a>
          <div class="fw-background">
              <div></div>
                      
                      </div>
                  </div>
              </div>
              
                  </div>
              </div>
              <div class="fw-body">
                  <div class="content">
                      
                      </div>
                      <table id="example" class="display" style="width:100%">
                          <thead>
                              <tr>
                          <th>ALUNO</th>
                                              <th>CURSO</th>
                          <th>PERIODO</th>
                          <th>MATERIA</th>
                                              <th>BIMESTRE</th>
                                              <th>NOTAS</th>
                          
                                              
                                              
                                              
                      </tr>
                          </thead>
                          
                          
      </tbody>
      <TR>
      <TD>JORGE</TD>
      <TD>ADMINISTRAÇÃO</TD>
      <TD>NOITE</TD>
      <TD>CONTABILIDADE</TD>
      <TD>SEGUNDO</TD>
      <TD>7</TD>
      <TR>
      <TD>PEDRO</TD>
      <TD>ADMINISTRAÇÃO</TD>
      <TD>MANHÃ</TD>
      <TD>GESTÃO</TD>
      <TD>TERDEIRO</TD>
      <TD>9</TD>
      </TR>

      </tbody>

                          <tfoot>
                              <tr>
                          <th>ALUNO</th>
                                              <th>CURSO</th>
                          <th>PERIODO</th>
                          <th>MATERIA</th>
                                              <th>BIMESTRE</th>
                                              <th>NOTAS</th>
                          
                                              
                                              
                                              </tr>
                          </tfoot>
      <thead>
                          <th>ALUNO</th>
                                              <th>CURSO</th>
                          <th>PERIODO</th>
                          <th>MATERIA</th>
                                              <th>BIMESTRE</th>
                                              <th>NOTAS</th>
                          
                                              
                                              
                                              </tr>
                          </thead>

      <html>

      </html>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.