Foros del Web » Creando para Internet » HTML »

Anclar imagenes

Estas en el tema de Anclar imagenes en el foro de HTML en Foros del Web. Hola quiero saber si es posible anclar, digamoslo asi, las imagenes para que cuando el navegador sea mas pequeño no envie las imagenes a la ...
  #1 (permalink)  
Antiguo 15/08/2012, 20:20
 
Fecha de Ingreso: diciembre-2010
Mensajes: 46
Antigüedad: 13 años, 4 meses
Puntos: 0
Anclar imagenes

Hola quiero saber si es posible anclar, digamoslo asi, las imagenes para que cuando el navegador sea mas pequeño no envie las imagenes a la parte de abajo

Código HTML:
<img class="img-menu" src="Menu3/Menu3_02.png">
<img class="img-menu" src="Menu3/Menu3_03.png">
<img class="img-menu" src="Menu3/Menu3_04.png">
<img class="img-menu" src="Menu3/Menu3_05.png">
<img class="img-menu" src="Menu3/Menu3_06.png">
<img class="img-menu" src="Menu3/Menu3_07.png">
<img class="img-menu" src="Menu3/Menu3_08.png">
<img class="img-menu" src="Menu3/Menu3_09.png">
<img class="img-menu" src="Menu3/Menu3_10.png">
<img class="img-menu" src="Menu3/Menu3_11.png">
<img class="img-menu" src="Menu3/Menu3_12.png">
<img class="img-menu" src="Menu3/Menu3_13.png">
<img class="img-menu" src="Menu3/Menu3_14.png">
<img class="img-menu" src="Menu3/Menu3_15.png">
<img class="img-menu" src="Menu3/Menu3_16.png">
<img class="img-menu" src="Menu3/Menu3_17.png">
<img class="img-menu" src="Menu3/Menu3_18.png"> 
Si la ventana del navegador es lo suficientemente grande me muestra las imagenes todas horizontalmente, pero si es mas pequeño que todas las imagenes combinadas comienza a enviarmelas a la parte inferior
  #2 (permalink)  
Antiguo 16/08/2012, 06:09
Avatar de enaguimar  
Fecha de Ingreso: diciembre-2011
Ubicación: Algeciras, Spain, Spain
Mensajes: 214
Antigüedad: 12 años, 4 meses
Puntos: 40
Respuesta: Anclar imagenes

Puedes hacerlo introduciendo la mitad de estas imagenes en dos div de un ancho definido, Y a su vez estos dos div dentro de otro div.
Ejemplo:
Código HTML:
Ver original
  1. <div class="header">
  2. <div class="principal">
  3. <img class="img-menu" src="Menu3/Menu3_02.png">
  4. <img class="img-menu" src="Menu3/Menu3_03.png">
  5. <img class="img-menu" src="Menu3/Menu3_04.png">
  6. <img class="img-menu" src="Menu3/Menu3_05.png">
  7. <img class="img-menu" src="Menu3/Menu3_06.png">
  8. <img class="img-menu" src="Menu3/Menu3_07.png">
  9. <img class="img-menu" src="Menu3/Menu3_08.png">
  10. <img class="img-menu" src="Menu3/Menu3_09.png">
  11. </div>
  12. <div class="secundario">
  13. <img class="img-menu" src="Menu3/Menu3_10.png">
  14. <img class="img-menu" src="Menu3/Menu3_11.png">
  15. <img class="img-menu" src="Menu3/Menu3_12.png">
  16. <img class="img-menu" src="Menu3/Menu3_13.png">
  17. <img class="img-menu" src="Menu3/Menu3_14.png">
  18. <img class="img-menu" src="Menu3/Menu3_15.png">
  19. <img class="img-menu" src="Menu3/Menu3_16.png">
  20. <img class="img-menu" src="Menu3/Menu3_17.png">
  21. <img class="img-menu" src="Menu3/Menu3_18.png">
  22. </div>
  23. </div>
Código CSS:
Ver original
  1. .header{width:100%;min-width:500px}
  2. .principal{width:500px;float:left;}
  3. .secundario{width:500px;float:left;}
__________________
Descargar Paradise Bay - Descargar Play Store gratis
@Vredweb

Última edición por enaguimar; 16/08/2012 a las 10:37

Etiquetas: anclar, imagenes
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:11.