a:hover sobre imagenes

kadas99 · #1 (**permalink**) 14/01/2010, 07:15

buenos dias, estoy trabajando en una web para subir fotos y mostrarlas, cuando las fotos estan listas para ser vistas, uno pasa el mouse por encima y la imagen se agranda un poco para poder dar una mejor vista previa, pero el problema es que no se como hacer para que la imagen se muestre en un solo lugar y no cambie de posicion dependiendo de los diferentes tamaños de pantallas, yo lo acomode a mi resolucion, pero cuando lo probe en la casa de un amigo la imagen aparecia perdida abajo de todo y se veia la mitad. Lo que quiero saber es como dejar todas las imagenes fijas en un mismo lugar, con un contenedor? la verdad no se como hacerlo!
aca les dejo el codigo para que vean mejor a lo que me refiero.

index.php

Código PHP:

 
<a href="<?php echo $direccion ?>"  class="galeria"><img src="<?php echo $direccion ?>" height="120" width="100" /><span><img src="<?php echo $direccion ?>" width="370" height="370" /><br /><?php echo $direccion ?></span></a>

css.css

Código:

.galeria span{ 
position: absolute;
background-color:#CFE983;
padding: 5px;
left: -1000px;
border: 1px dashed #000000;
visibility: hidden;
color: black;
text-decoration: none;
text-align:center;

}


.galeria:hover span{ 
visibility: visible;
top: 200px;
left: 700px; 
z-index: 50;
}

Un abrazo

C2am · #2 (**permalink**) 14/01/2010, 07:58

Hola
Si puedes deja además un link para ver el problema en vivo y en directo.
saludos

Edito: el cambio de posición se debe a que no cambia de posición ya que lo tienes con posicion absoluta

kadas99 · #3 (**permalink**) 14/01/2010, 08:11

subo la web un toke para que la veas, ahora agrego un par de imagenes ya que tiene sola una de prueba jaja! la direccion es www.denenasargentina.comoj.com.

estoy teniendo problemitas para acceder a la bd pero ya te pongo mas fotos para q veas mejor el problema.

kadas99 · #4 (**permalink**) 14/01/2010, 08:21

Ya subi la pagina y le puse mas imagenes para que puedas ver mejor el problema

C2am · #5 (**permalink**) 14/01/2010, 08:25

No tiene nada que ver con el problema pero tienes algo mal:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Fotos</title> 
<link href="css/css.css" rel="stylesheet" type="text/css" /> 
</head> 
 
 
<body class="twoColHybLtHdr"> 
 
 
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin t&iacute;tulo</title> 
</head> 
 
<body> 
 
</body> 
</html>

me parece que deberias borrar desde el segundo <doctype...

C2am · #6 (**permalink**) 14/01/2010, 09:27

Primero revisa todo el codigo,
la estructura debe ser:

Código HTML:

Ver original<html>
<head>
.....
</head>
<body>
....
</body>
</html>

Y no se pueden repetir esas etiquetas que te puse.
Ahora sobre las imagenes, el problema es que al estar en posición absoluta, tal como está, dicha posición tiene por referencia la pantalla, por eso se mueve segun la resolucion.
Para evitar esto agregale position relative a .twoColHybLtHdr #container:

Código CSS:

Ver original.twoColHybLtHdr #container {
    width: 80&#37;;  /* esto creará un contenedor con el 80% del ancho del navegador */
    background: #FFFFFF;
    margin: 0 auto 0 auto; /* los márgenes automáticos (conjuntamente con un ancho) centran la página */
    border: 1px solid #000000;
 
    
position: relative;
    }

De esta manera la referencia será la esquina superior del contenedor y dado que esta todo dentro de él, no cambiara de lugar con respecto al resto de los elementos.
También cambie un poco el css de las imagenes, prueba y me dices:

Código CSS:

Ver original.thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color:#CFE983;
    padding: 5px;
    left: 350px;
    top: 200px;
    border: 1px dashed #000000;
    visibility: hidden;
    color: black;
    text-decoration: none;
    text-align:center;
    display: block;
 
}
 
 
.thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    z-index: 50;
}

con esto la ubicación solo la tenes que manejar desde .thumbnail span, ya que no hace falta volver a ubicarla desde .thumbnail:hover span.

saludos
PD:
Podrias usar algun tipo de lightbox para ver las imagenes

kadas99 · #7 (**permalink**) 15/01/2010, 06:26

C2am muchas gracias por la ayuda que me diste!

sobre el tema de las etiquetas

Código PHP:

  <html>
<head>
</head>
<body>
</body>
</html>

el error que cometi fue que me olvide de borar en uno de mis require todas esas etiquetas! por eso se ven duplicadas jaja.

sobre lo del css me diste una mano grande! ahora lo que me queda es una pregunta mas... al achicar y aumentar el tamano desde el navegador (Ver -> Tamaño -> Aumentar/Reducir) se me desplazan las imagenes miniatura, eso la verdad no se como mantenerlo. Quiero que se vean de a 3 por linea (en php lo que hize fue poner un contador que al llegar a 3 mande un <br />, veo que esa no es una buena solucion)

Deberia hacer un contenedor para la parte de las imagenes miniaturas y otro para cuando se muestra la imagen un poco mas grande?

sobre lo de utilizar lightbox la verdad es una muy buena idea, pero lo que por ahora estoy buscando es aprender css, si bien estoy haciendo mucho copy&paste&lectura&modificacion me permite por ahi conocer un poco mas cosas de css que no hubiera visto en ningun manual de los que encontre rondando por internet.

Nos vemos, Un abrazo

C2am · #8 (**permalink**) 15/01/2010, 07:42

hola

Cita:

Deberia hacer un contenedor para la parte de las imagenes miniaturas y otro para cuando se muestra la imagen un poco mas grande?

Sobre un contenedor para las miniaturas puede ser, y flotando las miniaturas de manera que se vayan ubicando una al lado de la otra.
Para que sean tres, tendrías que ponerle un width al contenedor de manera que solo entren tres, y con eso bastaría, y te ahorrarías el codigo php. Ah, y si a este contenedor le pones position relative, la ampliacion deberías ajustarla a este nuevo div, en vez del "div contenedor general".
Prueba a ver que te sale.
Te dejo un link de ayuda : www.librosweb.es , por las dudas.
Saludos

kadas99 · #9 (**permalink**) 15/01/2010, 07:53

Hola C2am, ya me habia puesto a hacer el contenedor para las imagenes miniaturas y quedo de 10! (le puse un fondo negro para ver el tamaño) ahora solo resta ponerle un contenedor al "visor".

Ese link ya lo habia visto y me baje los libros! se agredece igual la intencion! (Mi problema es que padezco de falta de atencion jaja! Mal lo mio)

un abrazo y gracias por todo!