Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Ocultar imagenes

Estas en el tema de Ocultar imagenes en el foro de CSS en Foros del Web. Estoy haciendo un banner, img en 100% contenedor de 1000px cuando redusco la web la img del banner se reduce y ya no se puede ...
  #1 (permalink)  
Antiguo 29/04/2013, 15:55
 
Fecha de Ingreso: abril-2010
Ubicación: Lima
Mensajes: 116
Antigüedad: 14 años, 6 meses
Puntos: 1
Ocultar imagenes

Estoy haciendo un banner, img en 100% contenedor de 1000px cuando redusco la web la img del banner se reduce y ya no se puede visualizar bien, entonces puse 2 banners en la web la img1 principal normal se visualiza, cuando redusco la web a 480px ahi entra la img2 y con display:none oculto la img1, si redusco mas a 320 entra la img3 y oculto las img1 con la img2.... El detalle es que antes de los mediaquery debo poner el display none a la img2 y la img3 para q en tamaño normal se vea bien pero cuando redusco la web a 480 px y 320px ya no se visualiza, porque puse display none antes de los mediaquery. ¿alguien sabe como puedo hacer para hacer q aparesca cuando llegue a 480 o 320px la img2 y 3?
Espero me haya dejado entender,.. resumiendo antes de los mediaquery debo poner display none a la img2 y img3 para q no aparesca en pantalla normal, pero si aplico el display none ya no se visualizan cuando redusco la web a 480 o 320px

Aqui dejo el avance de la [URL="http://coveid.com/prueba/"]web[/URL]
  #2 (permalink)  
Antiguo 29/04/2013, 16:18
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 10.106
Antigüedad: 16 años, 3 meses
Puntos: 2237
Respuesta: Ocultar imagenes

Siempre muestra 1 y oculta las otras 2, ejemplo:

Código CSS:
Ver original
  1. /* Por default  */
  2. .cabecera { display:block; }
  3. .cabecera2, .cabecera3 { display:none; }
  4.  
  5. /* Mostrar sólo cabecera2, ocultando las otras */
  6. @media only screen and (min-width: 480px) and (max-width: 767px) {
  7.     #container { width: 98% !important; }
  8.     .cabecera2 { display:block; }
  9.     .cabecera, .cabecera3 { display:none; }
  10. }
__________________
- León, Guanajuato
- GV-Foto
  #3 (permalink)  
Antiguo 29/04/2013, 16:22
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 3 meses
Puntos: 2114
Respuesta: Ocultar imagenes

Cita:
Iniciado por Blasgo Ver Mensaje
El detalle es que antes de los mediaquery debo poner el display none a la img2 y la img3 para q en tamaño normal se vea bien pero cuando redusco la web a 480 px y 320px ya no se visualiza, porque puse display none antes de los mediaquery
Pues normalmente si los Media Queries van después suelen tener preferencia sobre los estilos declarados antes. Así que en realidad al reducir tendría que tomar con preferencia las reglas de que hay en @media.

¿Lo probaste a hacer así? Porque en la web que enlazas no lo veo declarado así.

Edito: Ahm, vale. Ahora con el mensaje de Triby entendí el problema.
  #4 (permalink)  
Antiguo 29/04/2013, 16:54
 
Fecha de Ingreso: abril-2010
Ubicación: Lima
Mensajes: 116
Antigüedad: 14 años, 6 meses
Puntos: 1
Respuesta: Ocultar imagenes

Muchas Gracias Triby... salio tal como queria.

Etiquetas: imagenes, tamaño
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 12:52.