Avisos
Vaciar todo

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

 
Enoc
 Enoc
Reputable Member

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

Citar
Respondido : 15/05/2012 11:34 am
Jordi Sala
 Jordi Sala
Miembro 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

ResponderCitar
Respondido : 15/05/2012 11:49 am

Cursos Gratuitos WordPress

Enoc
 Enoc
Reputable Member

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

Gracias!

ResponderCitar
Respondido : 15/05/2012 11:56 am
Miguel Tuyaré
 Miguel Tuyaré
Honorable Member

Hola Enoc:

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

ResponderCitar
Respondido : 15/05/2012 12:16 pm

Enoc
 Enoc
Reputable Member

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
}
ResponderCitar
Respondido : 15/05/2012 12:38 pm
Miguel Tuyaré
 Miguel Tuyaré
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.

ResponderCitar
Respondido : 15/05/2012 12:44 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Enoc
 Enoc
Reputable Member

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!!!

ResponderCitar
Respondido : 15/05/2012 1:44 pm
Miguel Tuyaré
 Miguel Tuyaré
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

ResponderCitar
Respondido : 15/05/2012 2:00 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Enoc
 Enoc
Reputable Member

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

Muchas gracias!!!!!!!

ResponderCitar
Respondido : 15/05/2012 2:13 pm