Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Cual es la mejor manera de hacer esto?

Estas en el tema de Cual es la mejor manera de hacer esto? en el foro de CSS en Foros del Web. Buenas, primero decir que no tengo ni idea de CSS pero tengo en mente hacer una pequeña web y he visto que me es necesario, ...
  #1 (permalink)  
Antiguo 11/05/2015, 05:49
 
Fecha de Ingreso: mayo-2015
Mensajes: 2
Antigüedad: 8 años, 10 meses
Puntos: 0
Pregunta Cual es la mejor manera de hacer esto?

Buenas, primero decir que no tengo ni idea de CSS pero tengo en mente hacer una pequeña web y he visto que me es necesario, asi que aquí estoy intentando llevarlo a cabo.
Quiero hacer algo como esto:

Son una serie de imagenes con 2/3 lineas de texto debajo. Como digo no tengo ni idea y mirando algún tutoríal lo he hecho de la siguiente manera:
Cada foto con el texto lo he puesto dentro de un div(que les he llamado box_1, box_2, etc), y luego en el css lo estaba haciendo asi:
Código:
                #box_1 { 
			position: absolute;
		 	top: 160px;
		 	left: 70px;
		 	width: 240px;
		 	height:199px;
			}
		#box_2 { 
			position: absolute;
		 	top: 160px;
		 	left: 370px;
		 	width: 240px;
		 	height: 199px;
			
		}
etc..
Asi funciona, pero claro si la ventana es mas pequeña, la cosa se ve fatal. Entonces mi pregunta es si hay alguna forma mas optima de hacer esto para que se adapte mejor al tamaño del navegador? Una opción podría ser que si la pantalla fuera mas pequeña salieran 3 columnas en vez de 4, si todavía es mas pequeña que salieran 2..

Si se puede me podeis guiar sobre como encaminarlo? He probado a ponerle porcentaje en vez de pixeles pero el resultado aun es peor, también he cambiado lo que me decía la lógica (lo de position:absolute) pero el desastre aun ha sido mayor..
  #2 (permalink)  
Antiguo 11/05/2015, 06:56
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 3 meses
Puntos: 208
Respuesta: Cual es la mejor manera de hacer esto?

Yo lo haría asi:

Código HTML:
Ver original
  1. <div class="contenedor">
  2.  
  3.    <div class="elemento">
  4.     <img src="http://dummyimage.com/150x200/25a5fa/fff.jpg&text=imagen" />
  5.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  6.   </div>
  7.  
  8.   <div class="elemento">
  9.     <img src="http://dummyimage.com/150x200/25a5fa/fff.jpg&text=imagen" />
  10.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  11.   </div>
  12.  
  13.   <div class="elemento">
  14.     <img src="http://dummyimage.com/150x200/25a5fa/fff.jpg&text=imagen" />
  15.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  16.   </div>
  17.  
  18.   <div class="elemento">
  19.     <img src="http://dummyimage.com/150x200/25a5fa/fff.jpg&text=imagen" />
  20.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  21.   </div>
  22.  
  23.   <div class="elemento">
  24.     <img src="http://dummyimage.com/150x200/25a5fa/fff.jpg&text=imagen" />
  25.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  26.   </div>
  27.  
  28.   <div class="elemento">
  29.     <img src="http://dummyimage.com/150x200/25a5fa/fff.jpg&text=imagen" />
  30.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  31.   </div>
  32.  
  33.   <div class="elemento">
  34.     <img src="http://dummyimage.com/150x200/25a5fa/fff.jpg&text=imagen" />
  35.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  36.   </div>
  37.  
  38.   <div class="elemento">
  39.     <img src="http://dummyimage.com/150x200/25a5fa/fff.jpg&text=imagen" />
  40.     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  41.   </div>
  42.  
  43. </div> <!-- Fin Contenedor -->

Código CSS:
Ver original
  1. .contenedor{
  2.   max-width:800px;
  3.   margin:0 auto;
  4.   background:#c2c2c2;
  5.   text-align:center;
  6. }
  7.  
  8. .elemento{
  9.   width:150px;
  10.   margin:1em;
  11.   display:inline-block;
  12.   vertical-align:top;
  13. }

http://codepen.io/anon/pen/ZGQjLd

  #3 (permalink)  
Antiguo 11/05/2015, 07:37
 
Fecha de Ingreso: mayo-2015
Mensajes: 2
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Cual es la mejor manera de hacer esto?

Gracias!! Lo he probado y creo que es justo lo que buscaba!! Desde luego mucho más elegante.

Además tenia un problema porque quería poner un pie de pagina y no lo conseguía, porque me salía encima de todo y ahora ya aparece debajo como quería.

thanks!
  #4 (permalink)  
Antiguo 11/05/2015, 07:40
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 3 meses
Puntos: 208
Respuesta: Cual es la mejor manera de hacer esto?

Cita:
Iniciado por Erink Ver Mensaje
Gracias!! Lo he probado y creo que es justo lo que buscaba!! Desde luego mucho más elegante.

Además tenia un problema porque quería poner un pie de pagina y no lo conseguía, porque me salía encima de todo y ahora ya aparece debajo como quería.

thanks!
Normal que el footer aparezca arriba si estas usando posiciones absolutas

De nada, no te olvides de marcar el tema como solucionado.

  #5 (permalink)  
Antiguo 11/05/2015, 07:58
 
Fecha de Ingreso: septiembre-2012
Mensajes: 17
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: Cual es la mejor manera de hacer esto?

Fede aprovecho a entrar en esta discusión también.

Estába intentando darle una solución usando flexbox, como podría hacerse esto con flexbox, porque me aparecen los 8 elementos en la misma linea, como puedo hacer que aparezcan 4 y 4?
  #6 (permalink)  
Antiguo 11/05/2015, 08:09
Avatar de fede5426  
Fecha de Ingreso: diciembre-2014
Ubicación: Córdoba
Mensajes: 446
Antigüedad: 9 años, 3 meses
Puntos: 208
Respuesta: Cual es la mejor manera de hacer esto?

Sinceramente no he trabajado nunca con flexbox, pero siguiendo ésta guia debería ser algo asi:

Código CSS:
Ver original
  1. .contenedor{
  2.   max-width:800px;
  3.   margin:0 auto;
  4.   background:#c2c2c2;
  5.   display:flex;
  6.   flex-wrap: wrap;
  7.   justify-content: flex-start;
  8. }
  9.  
  10. .elemento{
  11.   width:150px;
  12.   margin:20px;
  13. }

http://codepen.io/anon/pen/yNeqmN

Aunque el contenido no queda centrado..

Etiquetas: manera, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:12.