duda con imagenes web

rascabuchitos · #1 (**permalink**) 24/05/2013, 09:14

hola amigos
tengo una imagen y dentro de ellas varias que formaran parte del index dentro de divs... mi consulta es como ubico la imagen 1 que esta arriba a la derecha dentro de la imagen grande al lado de la imagen 2 que esta abajo a la izquierda de la misma imagen grande?

gracias

estoy evaluando una idea
http://www.forosdelweb.com/f53/boton...es-png-590630/
pero necesito mas ayuda

gracias

pzin · #2 (**permalink**) 24/05/2013, 10:02

No entendí nada.

rascabuchitos · #3 (**permalink**) 24/05/2013, 10:58

ok, me explico mejor
este ejemplo http://www.araudi.net/forosdelweb/juanpick2.html
como lo desarrollo mejor

es decir tengo un lienzo no imagen grande

y esas imagenes la tengo que poner por toda la web peor no se como hacerlo.. se me ocurren coordenadas pero como implementarlo?... tampoco se me ocurre... agradeceria mucho su ayuda...

ArturoGallegos · #4 (**permalink**) 24/05/2013, 10:58

pasa a leer la documentación oficial
http://www.w3schools.com/css/css_image_sprites.asp

rascabuchitos · #5 (**permalink**) 24/05/2013, 11:02

se acerca como este ejemplo
http://www.araudi.net/forosdelweb/juanpick2.html

pero en este lienzo tengo mas de 10 imagenes
por eso la complicacion... todas son para que esten en el index

gracias

pzin · #6 (**permalink**) 24/05/2013, 11:40

Cita:

Iniciado por ArturoGallegos

pasa a leer la documentación oficial
http://www.w3schools.com/css/css_image_sprites.asp

W3Schools no es nada oficial, ni tan siquiera reconocido por la W3C.

De hecho no se recomienda ni que se enlace.

Cita:

Iniciado por rascabuchitos

se acerca como este ejemplo
http://www.araudi.net/forosdelweb/juanpick2.html

pero en este lienzo tengo mas de 10 imagenes
por eso la complicacion... todas son para que esten en el index

gracias

Seguiría sin entenderte si no fuese por el enlace que puso Arturo. Si no tienes conocimiento sobre el tema lo mejor es leer algún artículo de cómo funciona esa técnica, entenderla y luego ya aplicarla.

rascabuchitos · #7 (**permalink**) 24/05/2013, 12:45

he leido sobre la tecnica que puso arturo
y por eso el enlace de ejemplo de araudi

pero con muchas imagenes dentro de lienzo ya es distinto
y ahi empieza mi calvario

C2am · #8 (**permalink**) 24/05/2013, 14:43

Si no entendí mal, la cuestión es que el contenedor de cada imagen debe ser del tamaño de la imagen a mostrar.

En realidad estoy adivinando, así que lo mejor es que pongas tu código, o una imagen de lo que pretendes lograr.

Eso de muchas imagenes en un div también suena a slider.
En resumen no entendí un carajo

rascabuchitos · #9 (**permalink**) 24/05/2013, 15:16

lo que trato de hacer es un index... una portada web pero
en vez de poner de una en una cada imagen en un div y terminarlo rapido

tengo un lienzo y dentro de ella varias imagenes como esto

por tanto tengo que hacer que cada una de las imagenes dentro del lienzo aparezcan en cada div

aqui el codigo

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>demo</title>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="contenedor">
    
<div class="menu">
    <div class="menu_1">
        <h2>1</h2>
    </div>
</div>
 
<div class="anuario">
    <div class="imagen">
        <h2>2</h2>
    </div>
</div>
 
<div class="fiesta">
    <div class="promocion">
        <h2>3</h2>
    </div>
</div>
 
<div class="amigos">
    <div class="colegio">
        <h2>4</h2>
    </div>
</div>
</div>
</body>
</html>

Código CSS:

Ver original* {
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
}
html, body {
  height: 100%;
  background-image: url("img/tono2013.jpg");
  background-attachment: fixed; 
  background-repeat: no-repeat; 
  background-position: center center; 
}
.contenedor {
  width: 50%;
  position: absolute;
  top: 10%;
  left: 25%;
}
.menu {
  text-align: center;
  background: #ff00ff;
}
 
.menu:before {
  content: '';
  display: inline-block;
  margin-right: -0.25em; 
 }
.menu_1 {
  background-image: url("../img/11.jpg");
  display: inline-block;
  width: 45%;
  min-width: 60px;
  padding: 5px 1%;
  margin: 12px 1%;
  border: #ff00ff solid 1px;
  background: #f5f5f5;
  text-align: left;
  box-shadow: 0 0 15px 15px rgba(0,0,0,.2)
} 
.anuario {
  text-align: center;
  background: #ff00ff;
}
 
.anuario:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: top;
  margin-right: -0.25em; 
 }
 
.imagen {
  background-image: url(img/11.jpg);
  display: inline-block;
  vertical-align: middle;
  width: 12%;
  min-width: 60px;
  padding: 5px 1%;
  margin: 2px 1%;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
  text-align: left;
  box-shadow: 0 0 15px 15px rgba(0,0,0,.2)
} 
.fiesta {
  text-align: center;
  background: #ff00ff;
}
 
.fiesta:before {
  content: '';
  display: inline-block;
  margin-right: -0.25em; 
 }
.promocion {
  background-image: url(img/11.jpg);
  display: inline-block;
  width: 28%;
  min-width: 60px;
  padding: 5px 1%;
  margin: 12px 1%;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
  text-align: left;
  box-shadow: 0 0 15px 15px rgba(0,0,0,.2)
} 
.amigos {
  text-align: center;
  background: #ff00ff;
}
 
.amigos:before {
  content: '';
  display: inline-block;
  margin-right: -0.25em; 
 }
.colegio {
  background-image: url('../img/11.jpg');
  display: inline-block;
  width: 94%;
  min-width: 60px;
  padding: 5px 1%;
  margin: 12px 1%;
  border: #ff00ff solid 1px;
  background: #f5f5f5;
  text-align: left;
  box-shadow: 0 0 15px 15px rgba(0,0,0,.2)
}

gracias...¡¡¡¡

ArturoGallegos · #10 (**permalink**) 24/05/2013, 16:23

vuelve a leer el link que te puse, aunque ya me aclararon que no es documentacion oficial aun así explica lo que pides, a esa técnica se le conoce como sprites, lo único que tienes que hacer es colocar las coordenadas en el background por ejemplo yo uso

Código CSS:

Ver originala{display:block;width:20px;height:20px;float:left;background:url(img/icons-sprite.png) no-repeat -22px -20px;}
a:hover{background-position:-44px -20px;}

donde le digo que se mueva 20px hacia arriba (eje X) y 22px hacia la izquierda (eje Y )
posteriormente al hacer hover el background se mueve otros 22 px a la izquierda donde se encuentra la siguiente imagen.

rascabuchitos · #11 (**permalink**) 24/05/2013, 16:37

gracias por el dato de la tecnica ArturoGallegos

ahora ya veo mas claro lo de coordenadas... lo tenia pensado pero no sabia como usarlo... pero como trabajaria con porcentajes?... estoy pensando hacer este index adaptativo y con pixeles no creo que lo logre o si?

gracias de nuevo

ArturoGallegos · #12 (**permalink**) 24/05/2013, 16:55

los sprites yo siempre los he visto con medidas absolutas (pixeles) ya que las imágenes a utilizar no varían su tamaño, lo que puedes manipular con porcentajes es su posición en el documento.

pero va, quizás alguien mas te de luz verde... de momento yo diría que no se puede modificar el tamaño con porcentajes.

rascabuchitos · #13 (**permalink**) 24/05/2013, 17:13

creo que con que se puede trabajar sus posiciones con porcentaje es suficiente por el momento... gracias...¡¡¡