Ir para conteúdo

Arquivado

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

bruno.globaltec

Organizando Loop

Recommended Posts

Bom dia pessoal, tenho um codigo aqui em php que montei, funciona da seguinte forma, bem simples eu vou adicionando box "produto" e ele vai colocando um a baixo do outro, só que eu quero que ele apareça um do lado do outro e que quando desse 3 em uma linha, quebrasse para a próxima, mais não estou dando conta de fazer isso segue o código;

 

<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <style>
            a:link, a:visited {
                text-decoration: none;
                                }
            a:hover {
                text-decoration: none; 
                color: #f00
                    }
            a:active {
                text-decoration: none;
                    }

            #caixa{
                width:350px;
                height:450px;
                padding:8px;
                background-color:#fff;
                border-radius: 10px;
                border-color:#000000;
                border-color: #2C3E50;
                border-style: solid;
                border-bottom-width: 5px;
                border-top-width: 5px;
                border-right-width: 1px; 
                border-left-width: 1px;
            }


            #caixa:hover{
                width:350px;
                height:450px;
                padding:8px;
                background-color:#fff;
                border-radius: 10px;
                border-color:#000000;
                box-shadow:0 1px 10px #A6A6A6;
                border-color: #2C3E50;
                border-style: solid;
                border-bottom-width: 5px;
                border-top-width: 5px;
                border-right-width: 1px; 
                border-left-width: 1px;
            }

            #texto-superior{
                text-align: center;
                font-size: 11px;
                color:#D5D5D5;
            }

            #titulo-webinar{
                text-align: center;
                color:#2C3E50;
            }

            #topicos{
                text-align: left;
                color:#7C7C7C;
                padding: 2px 0px 0px 20px;

            }

            #botao{
                text-transform: uppercase;
                width:350px;
                height:35px;
                padding: 8px 0px 0px 0px;
                background-color:#DF4000;
                border-radius: 10px;
                text-align: center;
                box-shadow:0 1px 10px #A6A6A6;
                color:#7C7C7C;
                position: absolute;
                color:#FFF;
                font-size: 20px;   
                
            }

            #divisoria{
                padding: 10px 0px 0px 0px;
            }

        </style>

    </head>

    <body>

        <?php
        include("./configuracao/conn.php");

        error_reporting(E_ALL & ~ E_NOTICE & ~ E_DEPRECATED);

        $sql = "SELECT * FROM webinardados WHERE categoria = 'Data prevista'";
        $resultado = mysql_query($sql);
        ?>
        <?php while ($webinar = mysql_fetch_assoc($resultado)) { ?>   
        
            <div id="caixa">            
                <div id="texto-superior">
                    <p> PALESTRA ONLINE </p> 
                </div>
                <div id="titulo-webinar">
                    <h3><?php echo $webinar['titulo']; ?></h3>
                </div>
                <div id="divisoria">
                    <hr width=300 size=1 color=#D5D5D5 noshade>
                </div>
                <div id="topicos">
                    <p><i class="fa fa-calendar" aria-hidden="true"></i> <?php echo $webinar['datawb']; ?></p>
                    <p><i class="fa fa-check-circle-o" aria-hidden="true"></i> <?php echo $webinar['topico1']; ?></p>
                    <p><i class="fa fa-check-circle-o" aria-hidden="true"></i> <?php echo $webinar['topico2']; ?></p>
                    <p><i class="fa fa-check-circle-o" aria-hidden="true"></i> <?php echo $webinar['topico3']; ?></p>

                </div><br><br><br><br>

                <a href="<?php echo $webinar['linkbtn']; ?>" id="botao" target="blank" title="<?php echo $webinar['titulo']; ?>"> 
                    <?php echo $webinar['textobtn']; ?>
                </a>

            </div><br>
        <?php } ?>

    </body>
</html> 

E um código simples, funciona perfeitamente, quando eu adiciono novos produtos, ele e adicionado certinho só que o problema e que ele esta indo para baixo, e eu quero que ele fique lado ao lado e quando der 3 em uma linha ele quebre e comece a ser adicionado a baixo em ordem que os mais recente fiquem na primeira linha, só que não dei conta de fazer esse procedimento rs.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Bruno, bom dia!

O problema está no css na minha opinião o mais fácil seria utilizar um framework como bootstrap (que tem muito material na internet). 

Com o bootstrap seria mais ou menos assim:

<html>
    <head>
      	<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
      
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <style>
            a:link, a:visited {
                text-decoration: none;
                                }
            a:hover {
                text-decoration: none; 
                color: #f00
                    }
            a:active {
                text-decoration: none;
                    }

            #caixa{
                width:350px;
                height:450px;
                padding:8px;
                background-color:#fff;
                border-radius: 10px;
                border-color:#000000;
                border-color: #2C3E50;
                border-style: solid;
                border-bottom-width: 5px;
                border-top-width: 5px;
                border-right-width: 1px; 
                border-left-width: 1px;
            }


            #caixa:hover{
                width:350px;
                height:450px;
                padding:8px;
                background-color:#fff;
                border-radius: 10px;
                border-color:#000000;
                box-shadow:0 1px 10px #A6A6A6;
                border-color: #2C3E50;
                border-style: solid;
                border-bottom-width: 5px;
                border-top-width: 5px;
                border-right-width: 1px; 
                border-left-width: 1px;
            }

            #texto-superior{
                text-align: center;
                font-size: 11px;
                color:#D5D5D5;
            }

            #titulo-webinar{
                text-align: center;
                color:#2C3E50;
            }

            #topicos{
                text-align: left;
                color:#7C7C7C;
                padding: 2px 0px 0px 20px;

            }

            #botao{
                text-transform: uppercase;
                width:350px;
                height:35px;
                padding: 8px 0px 0px 0px;
                background-color:#DF4000;
                border-radius: 10px;
                text-align: center;
                box-shadow:0 1px 10px #A6A6A6;
                color:#7C7C7C;
                position: absolute;
                color:#FFF;
                font-size: 20px;   
                
            }

            #divisoria{
                padding: 10px 0px 0px 0px;
            }

        </style>

    </head>

    <body>
		<div class="container>
        <?php
        include("./configuracao/conn.php");

        error_reporting(E_ALL & ~ E_NOTICE & ~ E_DEPRECATED);

        $sql = "SELECT * FROM webinardados WHERE categoria = 'Data prevista'";
        $resultado = mysql_query($sql);
        $contador = 1;
        while ($webinar = mysql_fetch_assoc($resultado)){
          if($contador == 1){
               echo "<div class='row'>";
          }
      	?>	
      
      		<div id="col-md-4 caixa">            
                <div id="texto-superior">
                    <p> PALESTRA ONLINE </p> 
                </div>
                <div id="titulo-webinar">
                    <h3><?php echo $webinar['titulo']; ?></h3>
                </div>
                <div id="divisoria">
                    <hr width=300 size=1 color=#D5D5D5 noshade>
                </div>
                <div id="topicos">
                    <p><i class="fa fa-calendar" aria-hidden="true"></i> <?php echo $webinar['datawb']; ?></p>
                    <p><i class="fa fa-check-circle-o" aria-hidden="true"></i> <?php echo $webinar['topico1']; ?></p>
                    <p><i class="fa fa-check-circle-o" aria-hidden="true"></i> <?php echo $webinar['topico2']; ?></p>
                    <p><i class="fa fa-check-circle-o" aria-hidden="true"></i> <?php echo $webinar['topico3']; ?></p>

                </div><br><br><br><br>

                <a href="<?php echo $webinar['linkbtn']; ?>" id="botao" target="blank" title="<?php echo $webinar['titulo']; ?>"> 
                    <?php echo $webinar['textobtn']; ?>
                </a>

            </div><br>
        <?php 
            if($contador == 1){
                echo "</div>";
            }
            $contador = ($contador==3)?1:$contador++;
        } ?>

    	<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
      </div>  
  </body>
</html> 

Bruno adicionei ao seu código o CDN do bootstrap e coloquei uma div class container uma div row e uma col-md-4, dá uma analisada no código e vê se resolve. Se não quiser usar um framework vai ter que ser com recursos direto do css e é bem mais complicado.

Boa sorte.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Rsrs... o problema deve ter sido alguma tag.  É o seguinte mantem o CDN como está deve estar relacionado com a lógica do while ou do for. Vou te colocar o código aqui como seria com o bootstrap para deixar 3 colunas somente o html e você adapta ao seu código verificando o fechamento das tags pois é aí que deve estar o problema:

<div class='container'>
  	<div class='row'>
      <div class='col-md-4'>
      	"Aqui é a primeira linha primeira coluna'
      </div>
      <div class='col-md-4'>
      	"Aqui é a primeira linha segunda coluna'
      </div>
      <div class='col-md-4'>
      	"Aqui é a primeira linha terceira coluna'
      </div>
    </div>
   <div class='row'>
      <div class='col-md-4'>
      	"Aqui é a segunda linha primeira coluna'
      </div>
      <div class='col-md-4'>
      	"Aqui é a segunda linha segunda coluna'
      </div>
      <div class='col-md-4'>
      	"Aqui é a segunda linha terceira coluna'
      </div>
    </div>
</div>
      

Com o exemplo acima adaptado ao seu código a cada 3 col-md-4 você abre outra div 'row'. Olhando o código que modifiquei no seu original na em div clas="container" faltou a aspas de fechamento, esse erro provavelmente pode ser isso ou alguma tag html colocada em lugar errado, mas essa é a lógica.

Boa sorte.

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 minutos atrás, Sibilio disse:

Rsrs... o problema deve ter sido alguma tag.  É o seguinte mantem o CDN como está deve estar relacionado com a lógica do while ou do for. Vou te colocar o código aqui como seria com o bootstrap para deixar 3 colunas somente o html e você adapta ao seu código verificando o fechamento das tags pois é aí que deve estar o problema:


<div class='container'>
  	<div class='row'>
      <div class='col-md-4'>
      	"Aqui é a primeira linha primeira coluna'
      </div>
      <div class='col-md-4'>
      	"Aqui é a primeira linha segunda coluna'
      </div>
      <div class='col-md-4'>
      	"Aqui é a primeira linha terceira coluna'
      </div>
    </div>
   <div class='row'>
      <div class='col-md-4'>
      	"Aqui é a segunda linha primeira coluna'
      </div>
      <div class='col-md-4'>
      	"Aqui é a segunda linha segunda coluna'
      </div>
      <div class='col-md-4'>
      	"Aqui é a segunda linha terceira coluna'
      </div>
    </div>
</div>
      

Com o exemplo acima adaptado ao seu código a cada 3 col-md-4 você abre outra div 'row'. Olhando o código que modifiquei no seu original na em div clas="container" faltou a aspas de fechamento, esse erro provavelmente pode ser isso ou alguma tag html colocada em lugar errado, mas essa é a lógica.

Boa sorte.

Ok, vou tentar aqui obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por landerbadi
      Boa tarde pessoal. Estou tentado fazer uma consulta no banco de dados porém estou tendo dificuldades. Tenho uma tabela chamada "itens" com os seguintes campos: id, item, ativo. Nela tem cadastrado vários itens. No campo ativo eu coloco a letra "S" para informar que este item está ativo no sistema. Por exemplo: 1, casa, S 2, mesa, S 3, cama, S 4, moto S 5, rádio O quinto registro "radio" não está ativo no sistema pois não tem um "S" no campo ativo. E outra tabela chamada "produtos" com os seguintes campos (id, item1, item2, item3) com os seguintes registros: 1, casa, mesa, moto 2, mesa, casa, cama 3, rádio, cama, mesa Eu preciso fazer uma busca na tabela produtos da seguinte maneira: Eu escolho um registro na tabela "itens", por exemplo "mesa". Preciso fazer com que o php me liste todos os registros da tabela "produtos" que contenham a palavra "mesa". Até aqui tudo bem eu consigo listar. Estou fazendo assim: <?php $item = "mesa" $sql = mysqli_query($conn, "SELECT * FROM produtos WHERE item1 LIKE '$item' OR item2 LIKE '$item' OR item3 LIKE '$item' LIMIT 10"); while($aux = mysqli_fetch_assoc($sql)) { $id = $aux["id"]; $item1 = $aux["item1"]; $item2 = $aux["item2"]; $item3 = $aux["item3"]; echo $id . " - " . $item1 . ", " . $item2 . ", " $item3 . "<br>"; } ?> O problema é que está listando todos os registros que contém o item mesa. Eu preciso que o php verifique os demais item e me liste somente os registro em que todos os registros estejam ativos no sistema. No exemplo acima ele não deveria listar o registro 3. pois nesse registro contém o item "radio" e este item não está ativo no sistema. Ou seja, o registro "radio" na tabela itens não possui um "S" na coluna "ativo". Alguém sabe como resolver isso?
    • Por ILR master
      Fala galera.
      Espero que todos estejam bem.
      Seguinte: Tenho um arquivo xml onde alguns campos estão com : (dois pontos), como o exemplo abaixo:
       
      <item>
      <title>
      d sa dsad sad sadasdas
      </title>
      <link>
      dsadas dsa sad asd as dsada
      </link>
      <pubDate>sadasdasdsa as</pubDate>
      <dc:creator>
      d sad sad sa ad as das
      </dc:creator>
      </item>
       
      Meu código:
       
      $link = "noticias.xml"; 
      $xml = simplexml_load_file($link); 
      foreach($xml -> channel as $ite) {     
           $titulo = $ite -> item->title;
           $urltitulo = $ite -> item->link;
           print $urltitulo = $ite -> item->dc:creator;
      } //fim do foreach
      ?>
       
      Esse campo dc:creator eu não consigo ler. Como faço?
       
      Agradeço quem puder me ajudar.
       
      Abs
       
       
    • Por First
      Olá a todos!
       
      Eu estou criando um sistema do zero mas estou encontnrando algumas dificuldades e não estou sabendo resolver, então vim recorrer ajuda de vocês.
      Aqui está todo o meu código: https://github.com/PauloJagata/aprendizado/
       
      Eu fiz um sistema de rotas mas só mostra o conteúdo da '/' não sei porque, quando eu tento acessar o register nada muda.
      E eu também quero que se não estiver liberado na rota mostra o erro de 404, mas quando eu tento acessar um link inválido, nada acontece.
      Alguém pode me ajudar com isso? E se tiver algumas sugestão para melhoria do código também estou aceitando.
       
       
      Desde já, obrigado.
    • Por landerbadi
      Olá pessoal, boa tarde
       
      Tenho uma tabela chamada "produtos" com os seguintes campos (id, produto) e outra tabela chamada "itens" com os seguintes campos (id, prod_01, prod_02, prod_03, prod_04).
       
      Na tabela produtos eu tenho cadastrado os seguintes produtos: laranja, maçã, uva, goiaba, arroz, feijão, macarrão, etc.
       
      Na tabela itens eu tenho cadastrado os itens da seguinte maneira:
       
      1, laranja, uva, arroz, feijão;
      2, maçã, macarrão, goiaba, uva;
      3, arroz, feijão, maçã, azeite
       
      Meu problema é o seguinte: 
      Eu escolho um produto da tabela "produtos", por exemplo "uva".  Preciso fazer uma consulta na tabela "itens" para ser listado todos os registros que contenham o produto "uva" e que todos os demais produtos estejam cadastrados na tabela "produtos".
       
      No exemplo acima seria listado apenas dois registros, pois o terceiro registro não contém o produto "uva". 
       
      Alguém pode me ajudar? Pois estou quebrando a cabeça a vários dias e não consigo achar uma solução.
    • Por landerbadi
      Boa tarde pessoal. Estou tentado fazer uma consulta no banco de dados porém estou tendo dificuldades. Tenho uma tabela chamada "itens" com os seguintes campos: id, item, plural, ativo. Nela tem cadastrado vários itens e seu respectivo plural. No campo ativo eu coloco a letra "S" para informar que esta palavra está ativa no sistema. Por exemplo: 1, casa, casas, S 2, mesa, mesas, S 3, cama, camas, S 4, moto, motos, S 5, rádio, rádios O quinto registro "radio" não está ativo no sistema pois não tem um "S" no campo ativo. E outra tabela chamada "variações" com os seguintes campos (id, item1, item2, item3) com os seguintes registros: 1, casa, camas, moto 2, mesas, casas, radio 3, rádio, cama, mesa Eu preciso fazer uma busca na tabela variações da seguinte maneira: Eu escolho um registro na tabela "itens", por exemplo "casa". Preciso fazer com que o php me liste todos os registros da tabela "variações" que contenham a palavra "casa". Porém se tiver algum registro com a palavra "casas" também tem que ser listado. Neste caso ele irá encontrar dois registros. Agora eu preciso que o php verifique os demais itens e faça a listagem apenas dos item que estão ativos (que contenham um "S" no campo ativo. Neste caso ele irá encontrar apenas um registro, pois o segundo registro contém a palavra "rádio". E "rádio" não está ativo na tabela itens. Como faço isso?
×

Informação importante

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