Ir para conteúdo

POWERED BY:

Arquivado

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

halfar

div dinamicamente...uma abaixo da outra

Recommended Posts

consulto um banco de dados, e preciso mostrar o resultado dentro de divs...

 

seria uma div abaixo da outra...

 

mas é claro que estas divs precisam ser criadas dinamicamente com php. Na realidade ja fiz um script assim, mas estou procurando algo mais simples.

 

o problema de exibir varias divs,é que uma se sobrepoe em cima da outra..., isto obviamente por causa das propriedades definidas...

 

Entao, como criei as divs dinamicamente com php,fiz um script para a cada div alterar a propriedade top...

 

mas isto me parece uma programação meio complicada...Não teria um jeito mais facil de fazer isto?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ih rapaz, explica isso melhor aí que desse jeito ninguém vai entender nada...

Se tiver um exemplo, um desenhinho que seja, já ajuda...

Compartilhar este post


Link para o post
Compartilhar em outros sites

bem, para explicar melhor, segue o codigo abaixo, onde dentro de um while quero que apareça várias divs.

 

$sql="select * from bd";

$res=mysql_query("$sql");

 

while($valor=mysql_fetch_array($res)){

 

echo "<div id='Layer4' style='position:absolute; width:614px; height:65px; z-index:13; left: 485px; top: 11px'>

echo $valor["nome"];

echo "</div>";

}

";

 

 

A ideia do código acima, é exibir tantas caixas quantas necessárias, uma caixa embaixo da outra. Note um exemplo do que quero no link a seguir...,note que, conforme os usuários vão postando seus comentários, aparece uma nova caixa tendo dentro o comentario do usuário.

 

http://phpbrasil.com/phorum/read.php?1,167144

 

Então, para fazer isto, pensei em colocar as divs dentro do while. Mas ocorre que, devido as propriedades da div (mais especificamente a propriedade top - que no codigo é 11px),quando o while for executado pela segunda vez, a caixa aparecerá sempre na mesma posição, pois a propriedade top será sempre 11px.

 

Então fiz um script para alterar a propriedade top, fazendo que a segunda caixa apareça abaixo da primeira, pois se não fizer isto a segunda caixa irá sobrepor a primeira.

 

Mas este script que fiz, não me parece ser um tipo de programação profissional, gostaria de saber se existe outra forma.

Tentei alterar a propriedade position:absolute para relative, mas parece que a gente não tem muito controle de onde irá aparecer as caixas.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Amigo pra exibir divs uma embaixo da outra não tem nada o que fazer de diferente.

 

css

.caixa {
  width:400px;
  height: 200px;
  border:1px solid #000;
  margin: 0 0 5px 0;
}

 

pagina

$sql="select * from bd";
$res=mysql_query("$sql");

while($valor=mysql_fetch_array($res)){ ?>

<div class="caixa"><?php echo $valor["nome"]; ?></div>

<?php } ?>

 

somente isso resolve teu problema ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Nossa, que confusão. Por que a DIV está com position: absolute ? Você tem a página online para analisarmos melhor?

 

Primeiro que, diante da semântica, uma lista de mensagens deve ser... uma lista, ou seja OL > LI, uma lista ordernada:

 

<?php if (mysql_num_rows($res) > 0) { ?>
<ol id="comments">
<?php while($valor = mysql_fetch_array($res)) { ?>
	<li><?php echo $valor["nome"]; ?></li>
<?php } ?>
</ol>
<?php } else { ?>
<p>Não há comentários para este post.</p>
<?php } ?>

Perceba a separação do código de servidor do HTML, procure não misturar os dois. Além disso, o que definirá a posição dos comentários será principalmente o elemento PAI, ou seja a lista. Evite usar estilos dentro da tag, prefira classes ou IDs.

 

#comments {
list-style: none;
padding: 0;
margin: 0;
}
#comments li {
border: 1px solid #aaa;
padding: 8px;
margin: 0 0 10px 0; // 10px de margem abaixo
}

 

A QUERY

 

Muito cuidado nesta hora, evite criar queries com o asterisco: "SELECT * FROM db", isso lhe faz perder o controle sobre a operação no futuro. Prefira, por exemplo:

 

$query = mysql_query("SELECT nome, conteudo, data FROM comentarios");
while ($linha = mysql_fetch_row($query)) {
echo $linha[0]; // nome
echo $linha[1]; // conteudo
echo $linha[2]; // data
}

As colunas da query viram índices a partir do zero, assim você saberá exatamente em quais está mexendo. Quando usamos o asterisco, podemos não saber em qual ordem as colunas virão do banco, beleza?

 

É isso aí, até mais!

Compartilhar este post


Link para o post
Compartilhar em outros sites

na verdade sei disso, mas isto funciona somente para paginas simples, sem outras divs por perto, mais caixas para serem controladas, aí a coisa pega...

 

 

Amigo pra exibir divs uma embaixo da outra não tem nada o que fazer de diferente.

 

css

.caixa {
  width:400px;
  height: 200px;
  border:1px solid #000;
  margin: 0 0 5px 0;
}

 

pagina

$sql="select * from bd";
$res=mysql_query("$sql");

while($valor=mysql_fetch_array($res)){ ?>

<div class="caixa"><?php echo $valor["nome"]; ?></div>

<?php } ?>

 

somente isso resolve teu problema ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Parece que você está com problemas no layout. Um grupo de elementos deve conter um elemento pai, para eles não se misturarem com outros. É melhor estudar mais HTML e CSS antes de começar no PHP.

 

Até!

Compartilhar este post


Link para o post
Compartilhar em outros sites

realmente,o problema é o css...

 

estive fazendo alguns testes com sua sugestão, utilizando a tag <li>, mas não consegui aplicar formatações a esta tag, como espessura de borda,creio que carece tambem de não poder manipular a posição das mesmas,etc..., posso precisar que

apareça um pouco mais para baixo ou para cima...etc...

 

por isso,prefiro as divs, pois posso controlar tudo...

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sim voce pode definir praticamente tudo na sua LI... basta por as propriedades nelas...

 

por exemplo:

 

#div1{

/*Seu código*/

}

 

Para ter total controle da LI dentro desta div você usa

 

#div1 li{

padding-top:10px;

border-bottom:1px #ff0000 dashed;

}

 

Todas LI`S que você colocar na div1 vão receber estas configs... entende?

 

Cara não use position pra fazer isso se voce quer colocar dentro do seu looping a div é simples use a margin...

de margin-top para afastalas uma das outras... uma esta sobrepondo a outra!

 

caso queira trabalhar com o position da uma olhada aqui

http://www.barelyfitz.com/screencast/html-training/css/positioning/

 

Ai explica bem direitinho como funciona com exemplos

 

 

Abraços

Compartilhar este post


Link para o post
Compartilhar em outros sites

na verdade sei disso, mas isto funciona somente para paginas simples, sem outras divs por perto, mais caixas para serem controladas, aí a coisa pega...

 

não entendi amigo, o que seria caixas para serem controladas?

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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