Mostrar listado de ...
 
Avisos
Vaciar todo

Mostrar listado de artículos en tres columnas pero sin espacio entre las filas

9 Respuestas
3 Usuarios
0 Reactions
4,903 Visitas
 Enoc
Respuestas: 333
Reputable Member
Topic starter
 

Hola!

Tengo un apartado en el que se muestran todos los artículos de una categoría en tres columnas, cuando hay más de tres artículos el cuarto, quinto y sexto pasa a verse en la segunda fila como es lógico pero se produce un salto, un espacio entre las dos filas, el problema es que si el artículo 1, es más largo que el 2 y el 3, entre ellos y los artículos 5 y 6 queda un hueco muy grande.
Como es un poco difícil explicar esto, lo mejor va a ser que entréis en esta dirección:

Contenido solo visible a usuarios registrados

¿Que puedo hacer para evitar esos espacios tan grandes?

Un saludo

URL del sitio: http://www.2002otello.com


 
Respondido : 15/05/2012 10:34 am
Jordi Sala
Respuestas: 12058
Illustrious Member Admin
 

Hola Enoc,

Para que no se produzca ningún descuadre, lo mejor es utilizar una sola columna, así los artículos se muestran en formato horizontal.

Cuando hay varias columnas, tienes que mantener los artículos que tengan longitudes parecidas, y puedes "jugar" con la opción de leer más para que entre los artículos los huecos queden en la medida de lo posible minimizados.

Saludos


 
Respondido : 15/05/2012 10:49 am
 Enoc
Respuestas: 333
Reputable Member
Topic starter
 

ok entiendo, pero no hay ninguna manera de quitar esos huecos mediante css?

Gracias!


 
Respondido : 15/05/2012 10:56 am
Miguel Tuyaré
Respuestas: 700
Honorable Member
 

Hola Enoc:

Utiliza Firebug para localizar los selectores y clases CSS a modificar.
He aquí un tutorial:


 
Respondido : 15/05/2012 11:16 am
 Enoc
Respuestas: 333
Reputable Member
Topic starter
 

Ya tengo localizado el css, es este, pero no se que le debo indicar para conseguir lo que quiero

.cols-3 .column-1
{
        float:left;
        width:357px;
        padding:15px;
		background-image:url(../images/fondo_caja_noticias.png)
		
}
.cols-3 .column-2
{
        float:left;
        width:357px;
        margin-left:18px;
        padding:15px;
	
		background-image:url(../images/fondo_caja_noticias.png)
}
.cols-3 .column-3
{
        float:left;
        width:359px;
        margin-left:18px;
        padding:15px;
	
		background-image:url(../images/fondo_caja_noticias.png)
}

.items-row
{
        overflow:hidden;
        margin-bottom:0px !important;
}

.column-1,
.column-2,
.column-3
{
        padding:10px 5px
}

.column-2
{
        width:55%;
        margin-left:40%;
}

.column-3
{
        width:30%
}

.blog-more
{
        padding:10px 5px
}

 
Respondido : 15/05/2012 11:38 am
Miguel Tuyaré
Respuestas: 700
Honorable Member
 

Hola Enoc:

Tienes que ir probando modificar paddings y/o margenes.
En tu caso puede que sea el padding:15px que tienes, redúcelo.


 
Respondido : 15/05/2012 11:44 am
 Enoc
Respuestas: 333
Reputable Member
Topic starter
 

Me parece que no me he explicado bien, yo me refiero a quitar el espacio que os indico en el adjunto. Tiene que haber alguna forma de quitarlo:

Gracias!!!


 
Respondido : 15/05/2012 12:44 pm
Miguel Tuyaré
Respuestas: 700
Honorable Member
 

Hola Enoc:

Ya, es diferente, pensé que te referías al espacio vertical entre columnas.

Buen te explico cómo funciona esta presentación de artículos porque es un problema común que les sucede a todos. Es cuestión de interpretación.

Debes considerar que son filas y columnas, graficamente sería:

Si miras la gráfica verás que el alto de la fila estará siempre dado por la columna que poseea el contenido más largo o extenso.

Esto no se puede modificar si no es haciendo un template override, para lo cual hay que saber programación PHP y bastante de maquetación CSS.

La otra opción es buscar algún módulo de presentación de noticias que haga el trabajo:
http://extensions.joomla.org/extensions/news-display/articles-display/latest-news


 
Respondido : 15/05/2012 1:00 pm
 Enoc
Respuestas: 333
Reputable Member
Topic starter
 

Exactamente! muchas gracias por tu explicación, esta muy claro!
Miraré ese modulo que me comentas y te digo

Muchas gracias!!!!!!!


 
Respondido : 15/05/2012 1:13 pm