Foros del Web » Creando para Internet » CSS »

Problema con galería de imágenes

Estas en el tema de Problema con galería de imágenes en el foro de CSS en Foros del Web. Por estos lares otra vez....: El tema es el siguiente: Como puede observarse en el adjunto, hay una imágen que me queda desajustada. Luego de ...
  #1 (permalink)  
Antiguo 29/03/2009, 22:03
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 15 años, 9 meses
Puntos: 351
Problema con galería de imágenes

Por estos lares otra vez....:
El tema es el siguiente:


Como puede observarse en el adjunto, hay una imágen que me queda desajustada.
Luego de ya tres días de venir peleando con el código me doy por vencida a ver si alguien me puede dar una manito y orientarme

Html:
Código HTML:
<!--cuerpo-->
	<div id="cuerpo">
	<div id="caja0">
		<div id="caja1"></div>
		<div id="caja2">
			<ul id="gallery">
			<li><a href="Ver foto1 "><img class="min" src="images/uno.jpg" alt="Tributo" />
            <img class="gran" src="images/unog.jpg" alt="Tributo" /></a></li>
	        <li><a href="Ver foto2 "><img class="min" src="images/dos.jpg" alt="Monaco" />
            <img class="gran" src="images/dosg.jpg" alt="Monaco" /></a></li>
			<li><a href="Ver foto3 "><img class="min" src="images/tres.jpg" alt="Erase" />
            <img class="gran" src="images/tresg.jpg" alt="Erase" /></a></li>
	        <li><a href="Ver foto4 "><img class="min" src="images/cuatro.jpg" alt="Kubica" />
            <img class="gran" src="images/cuatrog.jpg" alt="Kubica" /></a></li>	 
	        <li><a href="Ver foto5 "><img class="min" src="images/cinco.jpg" alt="Hamilton" />
            <img class="gran" src="images/cincog.jpg" alt="Hamilton" /></a></li>
			<li><a href="Ver foto6 "><img class="min" src="images/seis.jpg" alt="lamp" />
            <img class="gran" src="images/seisg.jpg" alt="lamp" /></a></li>
	        <li><a href="Ver foto7 "><img class="min" src="images/uno.jpg" alt="Tributo" />
            <img class="gran" src="images/unog.jpg" alt="Tributo" /></a></li>
	        <li><a href="Ver foto8 "><img class="min" src="images/dos.jpg" alt="Monaco" />
            <img class="gran" src="images/dosg.jpg" alt="Monaco" /></a></li>
		    </ul>
            </div></div></div>
			
    <div class="imagen"><img src="images/estacion.jpg" alt="Lámpara tridimensional" /></div>
	<div class="gran"></div>   
    
	<div class="corte"></div> 
css:
Código:
#gallery ul { 
     width: 500px;
     height: 180px;	 
	 float: left;
	 list-style-type:none; /*Quitamos viñeta*/
     margin:0px; /*Elimina sangría en IE6*/
     padding: 0;    /*Elimina sangría */
	 position: relative;
	 }
img.gran {
             width: 224px;
             height: 178px;
             visibility:hidden; /*Ocultamos la foto*/
			 position:absolute;
             top: 0px;
             float: left; /*Algo mayor que el acho de la foto pequeña*/
			 top:136%;
			 left:24.3%;
			 margin-top:-212px;
			 margin-left:-380px;
			 border: solid 1px #aaaa81;
			 }
            a:hover {display:inline;} /* Para IE6 */
            a:hover img.gran {visibility:visible; z-index:4;}
			 
.corte {clear: both;}
Si bien es cierto que esas imágenes se ven más pequeñitas, he hecho la prueba con imágenes iguales y ocurre lo mismo.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #2 (permalink)  
Antiguo 30/03/2009, 11:37
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Problema con galería de imágenes

Hola, pao.

No veo posible que con el código CSS que muestras eso se vea como la imagen que pones. Mira a ver que te faltan algunas clases para poder entenderlo o al menos reproducir el error (mínimo #caja1, #caja2 y #gallery ul li).
  #3 (permalink)  
Antiguo 30/03/2009, 12:04
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Problema con galería de imágenes

Hola:

Y posiblemente .min para las fotos pequeñas. Además me desconcierta lo que te marco en rojo, pero puede ser por mis pocos conocimientos.

Código:
img.gran {
width: 224px;
height: 178px;
visibility:hidden; /*Ocultamos la foto*/
position:absolute;
top: 0px;
float: left; /*Algo mayor que el acho de la foto pequeña*/
top:136%;
left:24.3%;
margin-top:-212px;
margin-left:-380px;
border: solid 1px #aaaa81;
}
Saludos.

  #4 (permalink)  
Antiguo 30/03/2009, 12:23
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 15 años, 9 meses
Puntos: 351
Respuesta: Problema con galería de imágenes

A ver.... voy a subir el código entero así lo ven tanto el html y el css, y sí es loco pero no veo por donde viene el problema.
Jomaruro, el tema es que hago cosas muy locas, voy probando y probando a ver si logro lo que quiero.

Por si sirve de referencia, he partido del siguiente código para mi galería.

Código HTML:
<!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" xml:lang="es" lang="es-es">

<head>
	<meta http-equiv="Content-Type" content="text/html: charset=ISO-8859-1" />
	<meta name="description" content="Dreamlight" />
	<meta name="Keywords" content="Lámparas, Vitreaux, Vitró, vitraux, iluminación, vidrios" /> 	
	<meta name="Author" content="Paola Andrea Magariños" />
	<meta name="Language" content="es" />
	<title>&copy; Dreamlight</title>

	<!-- acceso a css -->
	<link href="dream.css" rel="stylesheet" type="text/css" />
<!--[if IE LT 7]><style>#caja1 {filter: alpha(opacity=30);}</style><![endif]-->
</head>

<body>
<!--contenedor general-->
<div id="contenedor">

	<!--imágen del header-->
	<div id="cabecera"/>
		<h1>Dreamlight</h1>
		<h2>Vitrales artesanales</h2>
		<div><img src="images/header.jpg" alt="Imagen institucional" /></div>
	</div> 

	<!--menu-->
	<div id="menu">
		<ul>
			<li><a href="home.html">HOME</a></li>
			<li><a href="galeria.html">GALERIA</a></li>
			<li><a href="trabajos.html">TRABAJOS</a></li>
			<li><a href="contacto.html">CONTACTO</a></li>
		</ul>
	</div>

	<!--imagen fin header-->
	<div id="fincabecera"/>
	<div><img src="images/guarda.jpg" alt="Imagen de adorno" /></div>

	<!--cuerpo-->
	<div id="cuerpo">
	<div id="caja0">
		<div id="caja1"></div>
		<div id="caja2">
			<ul id="gallery">
			<li><a href="Ver foto1 "><img class="min" src="images/uno.jpg" alt="Tributo" />
            <img class="gran" src="images/unog.jpg" alt="Tributo" /></a></li>
	        <li><a href="Ver foto2 "><img class="min" src="images/dos.jpg" alt="Monaco" />
            <img class="gran" src="images/dosg.jpg" alt="Monaco" /></a></li>
			<li><a href="Ver foto3 "><img class="min" src="images/tres.jpg" alt="Erase" />
            <img class="gran" src="images/tresg.jpg" alt="Erase" /></a></li>
	        <li><a href="Ver foto4 "><img class="min" src="images/cuatro.jpg" alt="Kubica" />
            <img class="gran" src="images/cuatrog.jpg" alt="Kubica" /></a></li>	 
	        <li><a href="Ver foto5 "><img class="min" src="images/cinco.jpg" alt="Hamilton" />
            <img class="gran" src="images/cincog.jpg" alt="Hamilton" /></a></li>
			<li><a href="Ver foto6 "><img class="min" src="images/seis.jpg" alt="lamp" />
            <img class="gran" src="images/seisg.jpg" alt="lamp" /></a></li>
	        <li><a href="Ver foto7 "><img class="min" src="images/uno.jpg" alt="Tributo" />
            <img class="gran" src="images/unog.jpg" alt="Tributo" /></a></li>
	        <li><a href="Ver foto8 "><img class="min" src="images/dos.jpg" alt="Monaco" />
            <img class="gran" src="images/dosg.jpg" alt="Monaco" /></a></li>
		    </ul>
            </div></div></div>
			
    <div class="imagen"><img src="images/estacion.jpg" alt="Lámpara tridimensional" /></div>
	<div class="gran"></div>   
    
	<div class="corte"></div> 

	<!--pie-->
	<div id="pie">
			<img src="images/pie.jpg" alt="fondo decorativo" />
			</div>


</body>
</html> 
css
Código:
/* alineación general */ 
* {margin:0; padding: 0;
}

body {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
background-color:#35350e;
}

#contenedor {
display:block;
width: 760px;
position:absolute;
top:50%;
left:50%;
margin-top:-212px;
margin-left:-380px;
border: solid 1px #000;
}

/* estilo de la cabecera */ 

#cabecera {width: 760px;
height: 92px;
background-color: #e9eada;
text-align: center;
}
h1 {font-family: "Century Gothic";
font-size: 48px;
padding-top: 10px;
display:none; 
}
h2 {font-family: "Palatino Linotype";
font-size: 25px;
color: #ffffff;
margin-bottom: 4px;
display:none;
}

/* menú */ 

#menu {background-color: #C2C299;
width: 760px;
height: 26px;
}
#menu ul {
list-style-type:none;
text-align: center;
}
#menu ul li {float: left;
width: 25%;
}
#menu ul li a {color: #606966;
line-height: 26px;
font-family: "Times New Roman";
font-weight: bold;
text-decoration: none;
display: block;
width: 99%;
}
#menu a:hover {background-color: #c2c299;
color: #35350e;
border: solid 1px #35350e;
line-height: 22px;
} 
#fincabecera {width: 760px;
height: 32px;
}

/* contenido */ 
#caja0 {width: 534px;
height: 180px;
margin: 0px auto;
float: right;
background: url(images/fondotexto.jpg);
position: relative;
}
#caja1 {width: 534px;
height: 180px;
margin: 0px auto;
float: right;
background-color: #b2b998;
position: relative;
opacity: 0.1;
}
#caja2 {position: absolute;
left: 45px;
top: 10px;
width: 450px;
}
#caja2 ul li {float: left;
width: 25%;
}
#caja2 ul {  list-style-type:none; /*Quitamos viñeta*/
     margin:0px; /*Elimina sangría en IE6*/
     padding:0px;    /*Elimina sangría */
}
p {color: #30373a;
font-family: Arial;
font-size: 1em;
font-weight: normal;
text-align:justify;
margin:0.5em;
}


#gallery ul { 
     width: 500px;
     height: 180px;	 
	 float: left;
	 list-style-type:none; /*Quitamos viñeta*/
     margin:0px; /*Elimina sangría en IE6*/
     padding: 0;    /*Elimina sangría */
	 position: relative;
	 }
img.gran {
             width: 224px;
             height: 178px;
             visibility:hidden; /*Ocultamos la foto*/
			 position:absolute;
             float: left; /*Algo mayor que el acho de la foto pequeña*/
			 top:136%;
			 left:24.3%;
			 margin-top:-212px;
			 margin-left:-380px;
			 border: solid 1px #aaaa81;
			 }
            a:hover {display:inline;} /* Para IE6 */
            a:hover img.gran {visibility:visible; z-index:4;}
			 
.corte {clear: both;} 

/* pie */ 

#pie {width: 760px;
float: left;
}
#pie img {float: left;
padding: 0px 0px 0px 0px;
}

Muchas Gracias
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #5 (permalink)  
Antiguo 30/03/2009, 13:28
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Problema con galería de imágenes

Hola de nuevo:

Cita:
Iniciado por pao01 Ver Mensaje
Jomaruro, el tema es que hago cosas muy locas, voy probando y probando a ver si logro lo que quiero.
¿Nunca le has leido a Mikmoro que probemos las cosas de una en una y si no funciona borralas?

Bueno, bromas aparte.

He estado viendo el enlace que indicabas, muy instructivo por cierto. Así por encima me pareció que el tuyo estaba correcto, así que he copiado tu código y como no tenía tus imágenes he probado con las del enlace y.... ¡tu código funciona perfectamente! con lo cual me temo que el problema pueda estar en el tamaño de las imágenes ¿No sobrepasarán todas juntas el tamaño de su contenedor?

Ya me contarás.

Saludos.

  #6 (permalink)  
Antiguo 30/03/2009, 13:53
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 15 años, 9 meses
Puntos: 351
Respuesta: Problema con galería de imágenes

Si así fuera, (me refiero a que las imágenes en su conjunto superen el ancho del contenedor), cómo se hace para que a partir de las que se sobrepasan pasen a la línea de abajo?
Porque de hecho las que se sobrepasan, van hacia abajo (claro que con el desajuste de la imágen que en el inicio del post he mostrado).

No es que no haya pensado en nada, y si nos fijamos en la imágen las mismas están colocadas en el div que funciona con la transparencia, yo intuitivamente estimo que la modificación debería hacerla en el estilo de esa caja.
En esencia no pienso que el problema esté en el código de subí inicialmente, pero a decir verdad no tengo idea de qué debería incorporar para que se acomoden correctamente.

Jomaruro (a veces se me olvida borrar algunas cosas, vengo más enredada que mi Gatino con ovillo nuevo de lana )
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #7 (permalink)  
Antiguo 30/03/2009, 14:02
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Problema con galería de imágenes

Hola de nuevo:

Lo normal sería que al sobrepasar "saltaran" a la linea de abajo, pero como la cuarta imagen es más pequeña se pega a la tercera (float: left), por eso me desconcierta lo que comentabas en el primer post.

Cita:
Iniciado por pao01 Ver Mensaje
Si bien es cierto que esas imágenes se ven más pequeñitas, he hecho la prueba con imágenes iguales y ocurre lo mismo.
Prueba a hacer la caja contenedora unos píxeles más grande a ver que pasa, desde luego a mí tu código me funcionó tal y como está (con las imágenes del enlace que pusiste que son de 50px de ancho).

Saludos.

  #8 (permalink)  
Antiguo 30/03/2009, 14:08
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 15 años, 5 meses
Puntos: 40
Respuesta: Problema con galería de imágenes

pao estas son las medidas de tus miniaturas?

Código:
width: 224px;
height: 178px;
__________________
WFC
codigo82
  #9 (permalink)  
Antiguo 30/03/2009, 14:12
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 15 años, 9 meses
Puntos: 351
Respuesta: Problema con galería de imágenes

nop, la medida de las miniaturas es width:60px y height: 51. Pero ahora que lo decís voy a buscar donde puse eso.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #10 (permalink)  
Antiguo 30/03/2009, 14:20
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 15 años, 9 meses
Puntos: 351
Respuesta: Problema con galería de imágenes

Gracias por todo y a todos

ya lo he corregido, he incluído:

img.min {width: 60px;
height: 51px;}

Si cuando estoy boba, estoy boba.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #11 (permalink)  
Antiguo 30/03/2009, 14:30
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 21 años, 8 meses
Puntos: 361
Respuesta: Problema con galería de imágenes

Cita:
Iniciado por pao01 Ver Mensaje
Si cuando estoy boba, estoy boba.
Pues ya somos dos . Eso te lo dije cuando te indiqué que tenías repetido el top y no me volví a acordar.

Me alegro que lo hayas solucionado.

Saludos.

  #12 (permalink)  
Antiguo 30/03/2009, 14:57
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 15 años, 9 meses
Puntos: 351
Respuesta: Problema con galería de imágenes

Lo último: Cómo hago para regular yo la distancia que hay entre cada una de la miniaturas?
Me agradaría incorporar por lo menos una imágen más, y no se cómo hacerlo. Prometo que luego de esto no los fastidio por un buen rato (o ratito, así no me extrañan)
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #13 (permalink)  
Antiguo 30/03/2009, 15:04
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 15 años, 5 meses
Puntos: 40
Respuesta: Problema con galería de imágenes

si lo que quieres es la separación horizontal, pues solo utiliza margenes o rellenos, por ejemplo crea una clase, donde según lo que estas haciendo se lo asignas a cada imagen, por ejemplo:

Código HTML:
<li>
   <img class="separar min" /><img class="separar min" /><img class="separar min" /><img class="separar" />
</li> 
donde

Código:
.separar{margin:0 5px}
fijate bien si te sirve ya que algunas veces nuestro gran amigo ie tiene conflictos con la declaración de dos clases en un mismo tag.
__________________
WFC
codigo82
  #14 (permalink)  
Antiguo 30/03/2009, 15:10
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 15 años, 5 meses
Puntos: 40
Respuesta: Problema con galería de imágenes

perdón me he equivocado, no lo estas haciendo así, solo asigna la clase separar al li y listo, esto los abrirá ya que las listas estan flotando
__________________
WFC
codigo82
  #15 (permalink)  
Antiguo 30/03/2009, 15:39
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 15 años, 9 meses
Puntos: 351
Respuesta: Problema con galería de imágenes

willyfc, muchas gracias. Lo pruebo y te cuento.
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #16 (permalink)  
Antiguo 30/03/2009, 21:32
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 15 años, 9 meses
Puntos: 351
Respuesta: Problema con galería de imágenes

Cita:
Iniciado por Mikmoro Ver Mensaje
Hola, pao.

No veo posible que con el código CSS que muestras eso se vea como la imagen que pones. Mira a ver que te faltan algunas clases para poder entenderlo o al menos reproducir el error (mínimo #caja1, #caja2 y #gallery ul li).
Hola Mikel, en el momento de tu respuesta no me había quedado demasiado claro. Ya luego de mucho hurgar en esto, pues tenías toda la razón. (Lástima que vos veas todo tan simple y yo la complique demorando tanto en comprender).
Gracias Triby también por la infinita Paciencia.
Finalmente he podido corregir todos los errores.
Pero fruto de la ignorancia venía haciendo css por cada hoja (claro que es la primera vez que hago algo más que un home, pero ya lo he entendido).
La idea es trabajarla en todos los sentidos, código, validador, y accesibilidad, así que tendré para rato con esto.
Si alguien le fuera de utilidad y por si quieren echarle una miradita, aquí les adjunto los códigos. GRACIAS NUEVAMENTE!

Html
Código HTML:
<!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" xml:lang="es" lang="es-es">

<head>
	<meta http-equiv="Content-Type" content="text/html: charset=ISO-8859-1" />
	<meta name="description" content="Dreamlight" />
	<meta name="Keywords" content="Lámparas, Vitreaux, Vitró, vitraux, iluminación, vidrios" /> 	
	<meta name="Author" content="Paola Andrea Magariños" />
	<meta name="Language" content="es" />
	<title>&copy; Dreamlight</title>

	<!-- acceso a css -->
	<link href="dream.css" rel="stylesheet" type="text/css" />
<!--[if IE LT 7]><style>#caja1 {filter: alpha(opacity=30);}</style><![endif]-->
</head>

<body>
<!--contenedor general-->
<div id="contenedor">

	<!--imágen del header-->
	<div id="cabecera"/>
		<h1>Dreamlight</h1>
		<h2>Vitrales artesanales</h2>
		<div><img src="images/header.jpg" alt="Imagen institucional" /></div>
	</div> 

	<!--menu-->
	<div id="menu">
		<ul>
			<li><a href="home.html">HOME</a></li>
			<li><a href="galeria.html">GALERIA</a></li>
			<li><a href="trabajos.html">TRABAJOS</a></li>
			<li><a href="contacto.html">CONTACTO</a></li>
		</ul>
	</div>

	<!--imagen fin header-->
	<div id="fincabecera"/>
	<div><img src="images/guarda.jpg" alt="Imagen de adorno" /></div>

	<!--cuerpo-->
	<div id="cuerpo">
	<div id="caja0">
		<div id="caja1"></div>
		<div id="caja2">
			<ul id="gallery">
			<li><a href="Ver foto1 "><img class="min" src="images/uno.jpg" alt="Tributo" />
            <img class="gran" src="images/unog.jpg" alt="Tributo" /></a></li>
	        <li><a href="Ver foto2 "><img class="min" src="images/dos.jpg" alt="Monaco" />
            <img class="gran" src="images/dosg.jpg" alt="Monaco" /></a></li>
			<li><a href="Ver foto3 "><img class="min" src="images/tres.jpg" alt="Erase" />
            <img class="gran" src="images/tresg.jpg" alt="Erase" /></a></li>
	        <li><a href="Ver foto4 "><img class="min" src="images/cuatro.jpg" alt="Kubica" />
            <img class="gran" src="images/cuatrog.jpg" alt="Kubica" /></a></li>	 
	        <li><a href="Ver foto5 "><img class="min" src="images/cinco.jpg" alt="Hamilton" />
            <img class="gran" src="images/cincog.jpg" alt="Hamilton" /></a></li>
			<li><a href="Ver foto6 "><img class="min" src="images/seis.jpg" alt="lamp" />
            <img class="gran" src="images/seisg.jpg" alt="lamp" /></a></li>
	        <li><a href="Ver foto7 "><img class="min" src="images/uno.jpg" alt="Tributo" />
            <img class="gran" src="images/unog.jpg" alt="Tributo" /></a></li>
	        <li><a href="Ver foto8 "><img class="min" src="images/dos.jpg" alt="Monaco" />
            <img class="gran" src="images/dosg.jpg" alt="Monaco" /></a></li>
			<li><a href="Ver foto7 "><img class="min" src="images/uno.jpg" alt="Tributo" />
            <img class="gran" src="images/unog.jpg" alt="Tributo" /></a></li>
	        <li><a href="Ver foto8 "><img class="min" src="images/dos.jpg" alt="Monaco" />
            <img class="gran" src="images/dosg.jpg" alt="Monaco" /></a></li>
		    </ul>
            </div></div></div>
	
	<div class="imagen"><img src="images/estacion.jpg" alt="Lámpara tridimensional" /></div>
	<div class="gran"></div>   
    
	<div class="corte"></div> 

	<!--pie-->
	<div id="pie">
			<img src="images/pie.jpg" alt="fondo decorativo" />
			</div>


</body>
</html> 
CSS

Código:
/* alineación general */ 
* {margin:0; padding: 0;
}

body {font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
background-color:#35350e;
}

#contenedor {
display:block;
width: 760px;
position:absolute;
top:50%;
left:50%;
margin-top:-212px;
margin-left:-380px;
border: solid 1px #000;
}

/* estilo de la cabecera */ 

#cabecera {width: 760px;
height: 92px;
background-color: #e9eada;
text-align: center;
}
h1 {font-family: "Century Gothic";
font-size: 48px;
padding-top: 10px;
display:none; 
}
h2 {font-family: "Palatino Linotype";
font-size: 25px;
color: #ffffff;
margin-bottom: 4px;
display:none;
}

/* menú */ 

#menu {background-color: #C2C299;
width: 760px;
height: 26px;
}
#menu ul {
list-style-type:none;
text-align: center;
}
#menu ul li {float: left;
width: 25%;
}
#menu ul li a {color: #606966;
line-height: 26px;
font-family: "Times New Roman";
font-weight: bold;
text-decoration: none;
display: block;
width: 99%;
}
#menu a:hover {background-color: #c2c299;
color: #35350e;
border: solid 1px #35350e;
line-height: 22px;
} 
#fincabecera {width: 760px;
height: 32px;
}

/* contenido */ 

.imagen {width: 225px;
float: left;
border-right: solid 1px #c2c299;
}
.imagen img {float: left;
padding: 0px 0px 0px 0px;
}

#caja0 {width: 534px;
height: 180px;
margin: 0px auto;
float: right;
background: url(images/fondotexto.jpg);
position: relative;
}
#caja1 {width: 534px;
height: 180px;
margin: 0px auto;
float: right;
background-color: #b2b998;
position: relative;
opacity: 0.1;
}
#caja2 {position: absolute;
left: 30px;
top: 10px;
width: 450px;
}
p {color: #30373a;
font-family: Arial;
font-size: 1em;
font-weight: normal;
text-align:justify;
margin:0.5em;
}
#gallery { 
     width: 500px;
     height: 175px;	 
	 list-style-type:none; /*Quitamos viñeta*/
     margin:0px; /*Elimina sangría en IE6*/
     padding: 0;    /*Elimina sangría */
	 position: relative;
	 margin-top:15px;

}
		 
#gallery li {
	display:block;
	width:75px;
	height:80px;
	margin:0px 10px;
	float: left;
}
	 
img.min   {width: 60px;
height: 51px;
padding: 0px;
border: solid 1px #666600;

}	 
	 
img.gran {
	display:block;
	width: 224px;
	height: 176px;
	overflow:hidden;
	visibility:hidden; /*Ocultamos la foto*/
	position:absolute;
	float: left; /*Algo mayor que el acho de la foto pequeña*/
	border:1px #000 solid;
	top:-26px;
	left:-257px;

}
            a:hover {display:inline;} /* Para IE6 */
            a:hover img.gran {visibility:visible; z-index:4;}

			.corte {clear: both;} 

/* pie */ 

#pie {width: 760px;
float: left;
}
#pie img {float: left;
padding: 0px 0px 0px 0px;
}
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #17 (permalink)  
Antiguo 31/03/2009, 03:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Problema con galería de imágenes

Arrrjjj, lo siento, creo que no me expliqué demasiado bien. Para cuando volví ya ví que te habían ayudado y lo teníais prácticamente resuelto. Pues nada, me alegro de que ya vaya bien. Nos veremos.
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:30.