Duda para hacer un buen index

[eduuh17]

Hola buenas tardes, estoy realizando una pagina web de proyecto para la universidad, y tengo el siguiente problema, tengo un index, donde hay un menu y todo eso esta bien, el problema es al mostrar los datos.

Quiero hacer que se agreguen los ultimos 20 articulos, y lo logro hacer, el problema es que me los muestra todos en 1 columna y varias filas, lo que quiero hacer es dejarlos en varias columnas y varias filas y que la imagen sea como una portada, no se si me entienden, y la verdad no se como buscarlo o como hacerlo.

saludos desde ya gracias a los que me hallan leido

[muuerto]

Lo mejor es que muestres una imagen de tu proyecto, yo por lo menos no entendí nada

[eduuh17]

Iniciado por muuerto

Lo mejor es que muestres una imagen de tu proyecto, yo por lo menos no entendí nada

Hola! gracias por tu respuesta, bueno aqui te muestro como tengo la pagina, la verdad esta demaciado plana, no tiene estilo, mi profesor me dijo que le de un estilo, y la voy a orientar al anime y tengo que agregarle varias cosas para que se vea mas bonito y bueno hacer el inicio o los mostrar de forma mas ordenada.

[mbm150]

Hola buenas , No se si ya lo hiciste, pero la forma más fácil para crear varias columnas es utilizar float para que los elementos floten.

Código CSS:

.clase_div{
    width: 31%;
    margin: 1%;
    float: left;
}
 

Así por ejemplo tendrías 3 columnas. También podrías no poner el ancho, pero creo que queda mejor con un ancho igual a todos.

Saludos.

[eduuh17]

Iniciado por mbm150

Hola buenas , No se si ya lo hiciste, pero la forma más fácil para crear varias columnas es utilizar float para que los elementos floten.

Código CSS:

.clase_div{
    width: 31%;
    margin: 1%;
    float: left;
}
 

Así por ejemplo tendrías 3 columnas. También podrías no poner el ancho, pero creo que queda mejor con un ancho igual a todos.

Saludos.

Hola que tal, gracias por tu respuesta, aun no lo logro hacer, use lo que me dijiste en el css, con el nombre del div, sin el nombre, con varios nombres e igual me arrojaba solo columnas Tambien e estado tratando de usar el masonry pero tampoco me resulta, no seque

[moginn]

muy importante, cuando acabes de hacer las columnas con float, debes poner esto:

Código HTML:

<div style="clear:both"></div> 

[eduuh17]

Iniciado por moginn

muy importante, cuando acabes de hacer las columnas con float, debes poner esto:

Código HTML:

<div style="clear:both"></div> 

Ya lo hice, y ahora el problema qe tengo es que se van todos en forma diagonal hacia abajo, dependiendo del zoom que le haga la pantalla uno pasa mas abajo que el otro de esta forma



Supongo que es porque en el css en la parte float lo tengo como left, y cuando le coloco auto quedan todos hacia abajo...

Disculpa, edito el comentario, no le habia agregado el " <div style="clear:both"></div> ", pero lo agregue y las imagenes se van todas a la izquierda y se van hacia abajo

[eduuh17]

Iniciado por eduuh17

Ya lo hice, y ahora el problema qe tengo es que se van todos en forma diagonal hacia abajo, dependiendo del zoom que le haga la pantalla uno pasa mas abajo que el otro de esta forma



Supongo que es porque en el css en la parte float lo tengo como left, y cuando le coloco auto quedan todos hacia abajo...

Disculpa, edito el comentario, no le habia agregado el " <div style="clear:both"></div> ", pero lo agregue y las imagenes se van todas a la izquierda y se van hacia abajo

Hola de nuevo molesto en casi nada de minutos, ya logre solucionar el problema, y el codigo, use el Masonry, y como que de la nada funciono. Ya logro hacer que me muestre en columnas y filas las cosas, ahora mi problema es el siguiente, no se porque sera que las primeros 3 datos los muestra como " desordenados " y los siguientes los muestra "ordenados" Y lo otro que queria aprobechar de consultar igual, es como lo podría centrar? Ah si como los frames, creo que colocare algo en los costados para que quede bien centrado, Les dejo una imagen de como me quedo

y disculpen las molestias

[fede5426]

Para centrarlo hace un contenedor del ancho que quieras que se visualice el contenido y despues ponele un "margin: 0 auto;" con eso basta..