Problema css para noticias dinamicas

[mogoxd]

Hola a todos. La cuestion es simple...

Tengo que sacar a la vista noticias de forma dinamica, distribuidas en dos columnas. El problema con el que me encuentro se puede ver aqui.

http://playas.lmrstudio.com/

Hay alguna forma de solucionar esto, o alguna otra forma de realizarlo??

Por favor, es urgente.

[Impostor]

Prueba reduciendo el ancho de las imagenes, de hay pude venir el descuadre.

Saludos¡¡

[mogoxd]

no, por eso no es seguro.

[jomaruro]

Hola:

Tienes los div's noticia flotados a la izquierda, hasta aquí bien. Los dos primeros se colocan bien, el tercero al no caber en el contenedor "salta" a la línea siguiente y lógicamente flota a la izquierda pero como la segunda noticia tiene un height inferior a la primera se posiciona en el primer hueco que encuentra a la izquierda lo que hace que se posicione debajo de la segunda noticia.

Una solución sería poner las imágenes con el mismo height y que el texto ocupara siempre el mismo espacio de forma que los div's tengan el mismo tamaño o darle a los div's un height fijo lo que implicará que cuanto más grande sea la foto menos texto se podrá visualizar.

No se si me he explicado, si no me has entendido vuelve a preguntar e intentaré hacerlo mejor.

Saludos.



P.D: He probado a ponerle al div noticia un height:725px y mejora.

[mogoxd]

Muchas gracias por tu ayuda.

Lo que me explicas lo entiendo perfectamente y se que es una solucion, pero no quiero que sea asi como trabaje la visualizacion.

Como ejemplo, te puedo dirigir a la pagina de marca
http://www.marca.com/index.html?a=fd...c&t=1259014094

El efecto que busco es el mismo. Tengo claro que ello no manejan contenido dinamico, pues simplemente tienen dos columnas administradas manualmente por sus webmasters.

La movida es que mi pagina es contenido dinamico 100%. Con ello me refiero a que el usuario elije el texto que quiere mostrar, las imagenes pueden ser de distinto tamaño, con distintas alineaciones de la imagen, etc etc.

El problema viene en lo que me sucede. Realmente otra alternativva que encontre en posicionar una capa en left y otra en right alternativamente, pero sufro que al no manejar un height fijo, cabe la posibilidad que una columna me quede muy ancha y otra muy estrecha.

Quiza, la unicas alternativas que se me ocurren sean dos:

1. Coger el height resultante de cada capa y ir posicionandoles en base al tamaño de estas para que se vayan igualando, lo cual conlleva uso de javascript y no creo adecuado su uso en este tema.

2. Darle al cliente la posibilidad de elejir en que columna aparecera y asi que distribulla el contenido visualmente. El problema es que cada vez que se introduzca una neuva noticia, se debera ehar un ojo y seguramente será necesario modificar alguna otra para regularlo de nuevo.

Bueno, haber si Dios me da esperanza con una mente mas lucida o alguien que haya pasado por el mismo problema.

Gracias.

[jomaruro]

Hola:

Por lo que he visto en la página del marca, la solución es fácil, el contenido lo divide en dos columnas flotadas a la izquierda (sin contar la columna de la derecha, la de la publicidad) y dentro de cada una de ellas distintos div, uno por cada noticia tal y como los tienes tú.

Creo que lo puedes adaptar a tu diseño.

Saludos.

[safranero]

div#contenedor { width: 100%; }
div#col_izquierda { width: 50%; float: left; }
div#col_derecha { width: 50%; float: left; }
div#noticia { width: 100%; }

<div id="contenedor">

<div id="col_izquierda">
<div class="noticia">........contenido.........</div>
<div class="noticia">........contenido.........</div>
</div>

<div id="col_derecha">
<div class="noticia">........contenido.........</div>
<div class="noticia">........contenido.........</div>
</div>

</div>

[mogoxd]

Lo primero, respecto al codigo, se agradece, pero no era en absoluto necesario...

Lo segundo, creo que dijo jomaruro. Entiendo perfectamen te como esta distribuida la pagina de marca, pero tambien se claramente que las noticias que ahi salen no son dinamicas, segurisimo.

Para que me entiendan mejor, la distribucion que intento conseguir es simple.

- Las ultimas noticias siempre arriba
- Que se vayan posicionando a los lados alternativamente, pero sin dejar hueco.

Haber si esta imagen os lo explica mejor y se os ocurre una alternativa o una forma de hacerlo sin javascript:

[mogoxd]

Bueno, aun sigo con el mismo problema. Ha nadie se le ocurre ninguna idea?

La forma de visualizarlo tiene que ser compatible con poner imagenes de distintos tamaños (o sin imagen) y textos de distinta envergadura.

Alguna mente lucida?

[zerokilled]

comprendo tu problema pero el layout que quieres lograr no se puede hacer con float. en la siguiente direccion, leete las 9 normas que se rige la propiedad float. http://www.mykiss.de/ch08_03.htm#css-CHP-8-SECT-3.1

[mogoxd]

He encontrado una solucion parcial pero la implementacion es incompleta.

He sacada la altura de la imagen y la media del numero de lineas segun el texto.
Una vez esto, he sumado las dos cantidades y estas las voy sumando a una variable de la columna izquierda o derecha segun corresponda, para asi despues flotarlas a la izquierda o a la derecha.

El problema que tengo, es que la medicion es imprecisa, principalmente por el tema del texto. Por ello, me gustaria saber si hay alguna forma de medir el tamaño de la capa donde esta situada el texto con PHP.

Como podeis ver, he conseguido lo que me proponia, pero el resultado, logicamente es impreciso.
http://www.playas.lmrstudio.com

Haber si encontramos la forma....