Columnas con Div y MYSQL

Kanashin · #1 (**permalink**) 05/10/2011, 11:11

Buenas, desde el foro MYSQL me han remitido aquí, así que sin más dilación:

Quiero hacer una web con dos columnas y poner el resultado de la base de datos repartidos en esas dos columnas y que queden lo más iguales de altura posible.

Mi idea *muy ineficiente* ha sido:

Hacer un Select de todos los resultados que me interesaría poner en las columnas
Tratar el primer resultado después de haber hecho mysql_fetch_array
Hace otro mysql_fetch_array para perder el dato impar *muy ineficiente*
Seguir hasta que mysql_fetch_array devuelve false
Repetir los cuatro pasos anteriores para la segunda columna, pero haciendo un mysql_fetch_array nada más empezar

Yo creo que tiene que haber algo muchísimo más eficiente que esto, pero ¿valdría la pena guardar los resultados en un array? (Serían unos 50 por columna).
En caso afirmativo, ¿cómo se haría?
¿Le surge otra idea?

Muchas gracias, cualquier ayuda es muy bien recibida y agradecida.

PD: ¡Tiene que ser usando DIV, nada de table!

ocp001a · #2 (**permalink**) 05/10/2011, 12:59

La altura de los divs la puedes controlar mediante css, en cuanto a la distribución de los datos, creo que necesitas aclarar mejor cuál es tu criterio para distribuir los datos.

Lo más eficiente siempre es tratar de hacer una consulta que te traiga únicamente los datos que realmente vas a ocupar, para no saltar filas, pero necesitas aclarar el punto de lo que quieres.

En cuanto a colocar los datos en divs, puedes ir concatenando resultados en dos variables y al final poner dichas variables en su div correspondiente, algo más o menos así:

Código PHP:

Ver originalwhile($c=mysql_fetch_array($consulta)){
     if($c["dato"]==$micriterio)
          $div1.="datos: $c[dato1], $c[dato2] etc....";
     else
          $div2.="datos: $c[dato1], $c[dato2] etc....";
}
 
echo "<div style=\"width:50%;height:300px;\">$div1</div><div style=\"width:50%;height:300px;\">$div2</div>";

Kanashin · #3 (**permalink**) 05/10/2011, 13:11

Gracias por su rápida respuesta, me explico mejor:

Mi idea es hacer dos columnas (¡puede no ser la mejor idea, acepto sugerencias!) para hacer algo similar a esto (donde el flujo de líneas implica el orden en que deberían aparecer los resultados de la base de datos):

Claro, por eso, mientras voy rellenando la primera columna, hay la mitad de datos que no debo tratar aún; e igualmente cuando trato la segunda columna.

¿Qué solución sería la más óptima para este problema? ¿Almacenar los datos como sugiere en el div (¡no se me había ocurrido de forma tan elegante!) o de otra manera?

¡Muchas gracias!

GatorV · #4 (**permalink**) 05/10/2011, 13:21

Eso lo puedes hacer con CSS/HTML de forma sencilla:

Código HTML:

Ver original<div id="container" style="width: 650px;">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
</div>

Código CSS:

Ver original.item {
      width: 300px;
      float: right;
}

Saludos.

Kanashin · #5 (**permalink**) 05/10/2011, 13:25

Gracias, GatorV, pero el problema no es el diseño del CSS, sino el colocar el resultado del PHP de la forma más eficiente posible.

Gracias de todos modos.

GatorV · #6 (**permalink**) 05/10/2011, 13:28

De esa forma lo puedes hacer, ya que lo que se haría es tener 2 <div> por cada columna, entonces al imprimir desde PHP, solamente lo imprimes en el div principal y ya con CSS haces el despliegue, por ejemplo:

Código PHP:

Ver original<?php
 
echo '<div id="datos">';
while ($row = fetchRow($result)) {
         echo '<div class="item"'>.$row['algo'].'</div>';
}
echo '</div>';

Más eficiente que eso no puedes hacerlo.

Kanashin · #7 (**permalink**) 05/10/2011, 13:31

Debo tener muy olvidados mis conocimientos de PHP.

No veo como puedo intercalar los resultados siguiendo la imagen que he publicado en el comentario #3.

¿Podría explicármelo mejor?

Muchas gracias.

GatorV · #8 (**permalink**) 05/10/2011, 13:33

Tal cual te lo puse en el post anterior, con PHP imprimes la estructura de divs necesario, y con CSS controlas que se vean en dos columnas.

Saludos.

Kanashin · #9 (**permalink**) 05/10/2011, 13:43

EDITO: He hecho la prueba en un HTML básico y efectivamente funciona. Muchas gracias. ¡Sigo abierto a comentarios!

Sigo sin entenderlo :P .

Creo que sugieres abusar un poco de la propiedad float y que vaya de izquierda a derecha y cuando llegue "al tope" del div principal, baje un nivel y continúe; así hasta que queden datos por tratar, ¿no?

Eso complica un poco el diseño (añadiendo un poco más de HTML) y además veo un poco más complicado, que no imposible, crear el borde de separación del dibujo.

¿Lo he entendido bien?

GatorV · #10 (**permalink**) 05/10/2011, 14:34

Puedes agregar la propiedad border a tus items, o agregar una imagen de fondo a tu div.

Kanashin · #11 (**permalink**) 05/10/2011, 15:04

Sí, pero el problema es que sólo los de la izquierda deberían tener border-right, o los de la derecha border-left.

De todos modos estoy haciendo pruebas cambiando mi diseño viejo por éste y funciona a la primera, muchas gracias.

Creo que al final lo mejor va a ser que haga un pequeño 'unrolling' de 2, para separar los dos ítems.

GatorV · #12 (**permalink**) 05/10/2011, 15:12

Como te digo puedes usar una imagen de fondo para el div.

Saludos.

Kanashin · #13 (**permalink**) 05/10/2011, 15:22

Creo que he tenido un problema al abusar de la propiedad float:

Los de la derecha son con float:right, y los de la izquierda con float:left. También he probado usando un solo tipo de contenedor con float:left y el problema es el mismo en diferentes lugares.

¿Ideas? ¡Gracias!

GatorV · #14 (**permalink**) 05/10/2011, 16:03

No debes de usar diferentes floats, con que dejes todos en float left, los elementos se van a ir acomodando.

El problema que ves es por eso mismo, y al final de tus divs debes de tener uno con la propiedad clear: both.

En el foro de CSS te pueden dar más información respecto a como obtener el resultado que esperas.

Saludos.

Kanashin · #15 (**permalink**) 05/10/2011, 16:04

No quiero que queden como una table, quiero que cada columna vaya creciendo según sus noticias; por tanto no me sirve hacer un clear:both cada vez.

Gracias de todos modos.

GatorV · #16 (**permalink**) 05/10/2011, 16:08

No es cada vez, es al final de que imprimas todos tus elementos.

GatorV · #17 (**permalink**) 05/10/2011, 16:17

Es por lo mismo, ya te comenté no debes de usar clases separadas (con float left/right) porque haces que pase, eso, en el caso que indicas, tu noticia tiene un alto especificado (ej 100px), como el siguiente elemento tiene un float: left, eso hace que se mueva a la izquierda del elemento antes de lo que deberia de bajar.

Todos los elementos tienen que tener la propiedad float: left, para que se vayan acomodando.

Te muevo al foro de CSS donde te podrán orientar mejor.

Kanashin · #18 (**permalink**) 05/10/2011, 16:26

No se preocupe, tampoco quiero ser pesado y no veo que los tiros vayan por ahí; seguiré con el método antiguo (aunque más ineficiente) o intentaré el método de guardarlo todo en un div.

Muchas gracias por su tiempo, de verdad.

PD: ¿Puede editar mi mensaje anterior y borrar el enlace? No quiero hacer spam. ¡Si no es mucha molestia!