Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá! Tudo bem? :)
Sou leigo em PHP mas consegui criar um sistema de exibição de postagens, entretanto me bateu uma dúvida.
Meu código repete tudo que tenho no banco de dados mas no layout, eu gostaria de fazer algumas divs diferente de outras. Isso é possível?
Eu tenho a div-news ( <div class="div-news"></div>) que está sendo repetida. Tem como fazer por exemplo uma div-news_2 no meio disso e mesmo assim continuar replicando o banco de dados normalmente?
Segue meu código:
<?php
$sqli = "SELECT * from tb_postagens WHERE exibir='Sim' ORDER BY id DESC LIMIT 20";
try{
$resultado = $conexao->prepare($sqli);
$resultado->execute();
$contar = $resultado->rowCount();
if($contar >0){
while($exibe = $resultado->fetch(PDO::FETCH_OBJ)){
?>
<div class="div-news">
<a style="text-decoration:none" href="visualizar.php?id=<?php echo $exibe->id;?>&Materia=<?php echo strip_tags($exibe->titulo);?>">
<img class="overlay" src="upload/postagens/<?php echo $exibe->imagem;?>" width="100%" height="180"/>
</a>
<a style="text-decoration:none" href="noticia/?regiao=<?php echo $exibe->categoria;?>&<?php echo $exibe->data;?>&id=<?php echo $exibe->id;?>&materia=<?php echo strip_tags(str_replace(" ","_", $exibe->titulo));?>" class="news">
<h2><?php echo $exibe->titulo;?></h2>
<p class="home"><?php echo limitarTexto(strip_tags($exibe->descricao), $limite=100);?></p>
</a>
</div>
<?php}else{
echo '<li>Não há nada por aqui :(</li>';
}
}catch(PDOException $erro){ echo $erro;}
?>Olá!
Qual seria o objetivo?
Talvez dê pra acrescentar outra class usando algum valor em $exibe como parâmetro.
Mas o que é que você precisa fazer?
É pra página inicial de um jornal. Não queria só exibir uma lista... Queria que exibisse uma div maior, outra menor e assim por diante. Pra não ficar um layout repetitivo.
blz!
elas devem estar dentro de alguma outra div.algumaClasse
você pode atravessar usando :first-child, :last-child e :nth-child(n) e estilizar de maneira diferente cada uma das divs.
veja: https://developer.mozilla.org/pt-BR/docs/Web/CSS/:nth-child
Beleza! Vou analisar aqui! Obrigado <3
tetsuo, parece que com a repetição while, não funciona. Testei manualmente e funcionou mas quando aplico no html que está envolvido pela repetição do php, não vai.
Ficou assim para teste:
<style>
.div-news:nth-child(1){
width: 500px;
background-color: lime;
}
</style>
<div class="div-news">1</div>
<div class="div-news">2</div>
Além disso, eu preciso também reposicionar alguns elementos nas divs que serão alteradas, com o nth não dá pra fazer isso.Oi Thiago! Obrigado pela ajuda! O seu código funciona, mas apesar de renomear a class da div ele ainda repete tudo e não consigo alterar uma adicionar nada numa div sozinha. Tem como fazer ele parar a repetição em um número ou começar de algum? Por exemplo começar a repetir a partir do 3...
Olá @arthurcastro
O código que te passei é adicionado o número do contador a cada loop então ficaria assim:
<div class="div-news_1">
<div class="div-news_2">
<div class="div-news_3">
A cada loop seria incrementado +1.
Mas como você que aplicar estilo diferente a cada linha tente da forma que o @tetsuo disse<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DIV</title>
<style>
/* Aplica nos elementos ímpares */
.div-news:nth-child(odd) {
font-size: 16pt;
width: 500px;
background-color:red;
}
/* Aplica nos elementos pares */
.div-news:nth-child(even) {
font-size: 28pt;
width: 700px;
height: 200px;
background-color: lime;
}
</style>
</head>
<body>
<div class="div-news">1</div>
<div class="div-news">2</div>
</body>
</html>Consegui pessoal! Muito obrigado pelas ideias :)
Olá @arthurcastro
Tente usando o "for".
Dei uma refatorada no seu código e tá funcionando de boa, a cada loop a div vai ficar "div-new_1", "div-new_2" e assim até o número do contador com o incremente ser igual ao número de linhas retornada do banco de dados.
Adicionado não fiz o uso do "While".
for($i = 1; $i <= $contar; $i++) :
}else{