Loop Horizontal

[3dmaniaco 1]

Estou criando um sistema em php, e me surgiu uma duvida.

 

Eu criei uma DIV, dentro dela tem o loop, como eu poderia fazer, para que cada coluna tivesse 4 linhas, sem usar tabela ?

 

Exemplo:

 

Imagem 1 Imagem 2

Titulo 1 Titulo 2

Texto 1 Texto 2

Botao 1 Botão 2

 

Qual a melhor e mais facil forma de se fazer isso ?

 

Desde já, valew a todos

[Bruno Augusto 417]

A melhor e mais fácil forma de fazer isso acredito que seja com CSS.

 

Definindo a estrutura correta do HTML, o simples estilizar dos elementos já produziria o efeito desejado

[3dmaniaco 1]

Olá Bruno, foi oque eu pensei tambem, como ficaria o CSS ?

[Bruno Augusto 417]

Olá Bruno, foi oque eu pensei tambem, como ficaria o CSS ?

 

Isso aí já é com pessoal que domina o assunto. :thumbsup:

[Bru_ce 53]

Explica sua dúvida novamente cara, esta confuso ..

[Public2004 79]

Utilize para isso uma lista desordenada (<ul>) e dentro de cada item da lista (<li>) que seria tratada no seu caso como a coluna, você adiciona os elementos desejados como imagem, título, parágrafo, link... Ou no lugar da lista (<li>), utilize divs para simular as colunas com o mesmo conceito de flutuação à esquerda (float:left).

 

Att.

[3dmaniaco 1]

Essa idéia do <ul> ja pensei nisso, mas queria saber como ficaria o CSS, pois no loop do php, o loop teria de ficar um ao lado do outro, mas esta ficando um abaixo do outro, veja meu codigo:

 

CSS:

#apDiv2 {
    position: absolute;
    width: 962px;
    height: 220px;
    z-index: 1;
    left: 92px;
    top: 490px;
}
ul {
    list-style-type: none;
    height: 80px;
    width: 663px;
    margin: auto;
}

 

PHP:

<div id="apDiv2">

<?php

$post_select = mysql_query("SELECT * FROM blog_post ORDER BY id ASC LIMIT 4");

while($post = mysql_fetch_array($post_select))
{
	$titulo   = $post['titulo'];
	$data     = $post['data'];
	$imagem   = $post['imagem'];
	$conteudo = $post['conteudo'];

?>
<ul>
<li>Imagem</li>
<li>Titulo</li>
<li>Texto</li>
<li>Botao</li>
</ul>
<?php
}
?>
</div>

Toda ajuda será bem vinda

[Public2004 79]

O <ul> é o container e os <li's> entenda como as "colunas". A estilização via CSS fica por sua conta e gosto mas o básico seria definir um "float:left" para os <li's>, justamente para posicionar esses itens um ao lado do outro na horizontal.

 

<ul>
    <li>
      <img src=blablabla>
      <h2>Title</h2>
      <p>My text</p>
      <a href=blablabla>My Link</a>
    </li>
    <li>
      <img src=blablabla>
      <h2>Title</h2>
      <p>My text</p>
      <a href=blablabla>My Link</a>
    </li>
    <li>
      <img src=blablabla>
      <h2>Title</h2>
      <p>My text</p>
      <a href=blablabla>My Link</a>
    </li>
</ul>

 

Att.

[3dmaniaco 1]

Olá Public 2004.

 

Antes de qualquer coisa, valew pela força.

 

Eu criei um docmento html e colei o cosigo acima, mas fica um abaixo do outro, eu queria fazer assim:

 

Imagem Imagem Imagem Imagem

Titulo Titulo Titulo Titulo

Texto Texto Texto Texto

Botão Botão Botão Botão

 

Valew

[Public2004 79]

Então amigo, já havia comentado isso nos meus dois post anteriores e vou citar novamente: Defina um float:left na sua "li" para alinhar esses elementos horizontalmente, depois estilize o restante ao seu gosto como tamanho, espaçamento, borda, etc...

li {
    float:left;
}

Att.

[3dmaniaco 1]

Olá public2004, valew pela força.