Foros del Web » Creando para Internet » CSS »

Imagenes mas grandes

Estas en el tema de Imagenes mas grandes en el foro de CSS en Foros del Web. quiero poner mis imágenes mas grande que solo quepan 4 thumbnails en cada fila este es mi css de las imagenes Código: .galeria { margin-top:5px; ...
  #1 (permalink)  
Antiguo 23/10/2011, 09:00
 
Fecha de Ingreso: octubre-2009
Mensajes: 129
Antigüedad: 11 años, 3 meses
Puntos: 1
Imagenes mas grandes

quiero poner mis imágenes mas grande que solo quepan 4 thumbnails en cada fila
este es mi css de las imagenes
Código:
.galeria { margin-top:5px; float:left; clear:both; }
.galeria #pelicula { width:164px; height:228px; float:left; position:relative; }
.galeria #pelicula a { text-decoration:none; color:#FFF; font-weight:bold; font-size:14px;}
.galeria #pelicula small:hover { text-decoration:underline;}
.galeria #pelicula small {position:absolute; width:160px; height:28px; top:190px; left:0px; text-align:center; padding-top:7px; cursor:pointer; }
.galeria #pelicula span { background:#000; position:absolute; width:160px; height:30px; top:190px; left:0px; opacity: 0.80; -moz-opacity: 0.70; filter:alpha(opacity=80);}
.galeria #pelicula img { border:0px; width:160px; height:220px;}
mi web es http://www.animex24.com/ para que vean como estan los thumbnails
no puedo ponerlas necesito ayuda de expertos help me please :(
  #2 (permalink)  
Antiguo 23/10/2011, 09:41
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 13 años, 7 meses
Puntos: 539
Respuesta: Imagenes mas grandes

Sencillo:
sólo tiene que hacer que cada una ocupe 1/4 (25%) del espacio disponible en cada "renglón".

Código CSS:
Ver original
  1. .galeria #pelicula {width: 25%;} /*suprima el height si lo estima oportuno*/
  2. .galeria #pelicula img {width: 100%;} /*suprima el height para evitar deformaciones*/

Y a partir de esas modificaciones sólo es cuestión de ajustar algunas cosillas para seguir manteniendo la apariencia actual y prevenir ciertos efectos no deseados según qué resolución de pantalla o dispositivos se utilicen.
  #3 (permalink)  
Antiguo 23/10/2011, 09:59
 
Fecha de Ingreso: octubre-2009
Mensajes: 129
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: Imagenes mas grandes

Cita:
Iniciado por kseso? Ver Mensaje
Sencillo:
sólo tiene que hacer que cada una ocupe 1/4 (25%) del espacio disponible en cada "renglón".

Código CSS:
Ver original
  1. .galeria #pelicula {width: 25%;} /*suprima el height si lo estima oportuno*/
  2. .galeria #pelicula img {width: 100%;} /*suprima el height para evitar deformaciones*/

Y a partir de esas modificaciones sólo es cuestión de ajustar algunas cosillas para seguir manteniendo la apariencia actual y prevenir ciertos efectos no deseados según qué resolución de pantalla o dispositivos se utilicen.
no men se me ve mal los thumbnails xq es un plugin tiene que modificarse en pixeles en el css, gracias de todos modos ;)
  #4 (permalink)  
Antiguo 23/10/2011, 10:15
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 13 años, 7 meses
Puntos: 539
Respuesta: Imagenes mas grandes

Pues si usted dice que obliglatoriamente debe definir el tamaño en px, entonces...

Sólo como curiosidad, ¿es esto lo que quiere lograr?



Y al modificar la ventana del navegador siguen mostrándose 4 por fila:

  #5 (permalink)  
Antiguo 23/10/2011, 16:51
 
Fecha de Ingreso: octubre-2009
Mensajes: 129
Antigüedad: 11 años, 3 meses
Puntos: 1
Respuesta: Imagenes mas grandes

exacto!!! asi como lo hiciste en la foto! men nose mucho sobre css tu dices asi ? le agrege los 2 códigos que me diste, disculpa mi ignorancia...
Código:
.galeria { margin-top:5px; float:left; clear:both; }
.galeria #pelicula { width:164px; height:228px; float:left; position:relative; width: 25%;}
.galeria #pelicula a { text-decoration:none; color:#FFF; font-weight:bold; font-size:14px;}
.galeria #pelicula small:hover { text-decoration:underline;}
.galeria #pelicula small {position:absolute; width:160px; height:28px; top:190px; left:0px; text-align:center; padding-top:7px; cursor:pointer; }
.galeria #pelicula span { background:#000; position:absolute; width:160px; height:30px; top:190px; left:0px; opacity: 0.80; -moz-opacity: 0.70; filter:alpha(opacity=80);}
.galeria #pelicula img { border:0px; width:160px; height:220px; width: 100%;}
  #6 (permalink)  
Antiguo 23/10/2011, 18:41
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 13 años, 7 meses
Puntos: 539
Respuesta: Imagenes mas grandes

Creo que estamos ante un problema de una naturaleza distinta.

Creo que debería dedicarle unos minutos a fijar conceptos y nociones básicas de css. Un buen punto de partida puede ser www.librosweb.es

Etiquetas: grandes, hover, imagenes, fondo
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 20:54.