Foros del Web » Creando para Internet » CSS »

Centrar una imagen dentro de otro DIV

Estas en el tema de Centrar una imagen dentro de otro DIV en el foro de CSS en Foros del Web. Hola, hice una web dónde hay una gaelería de imágenes. Con una resolución de 1024 x 768 se ve ok, pero si la resolución es ...
  #1 (permalink)  
Antiguo 22/01/2009, 15:12
 
Fecha de Ingreso: abril-2005
Mensajes: 475
Antigüedad: 12 años, 8 meses
Puntos: 3
Centrar una imagen dentro de otro DIV

Hola, hice una web dónde hay una gaelería de imágenes.

Con una resolución de 1024 x 768 se ve ok, pero si la resolución es otra la imagen grande se encima con las imágenes en miniatura que están a la izquierda.

Quisiera encontrar una forma de centrar la imagen grande dentro de la pantalla.

Código HTML
Código HTML:
 <div id="galeria"> 
		<div id="galeriai"> 
		<ul>
	  			<li><a href="#"><img class="min" src="./galeria/miniatura/min1.jpg" alt="" /><span><img class="fotos" src="./galeria/foto1.jpg" alt="" /><br /></span></a></li>
	  			<li><a href="#"><img class="min" src="./galeria/miniatura/min2.jpg" alt="" /><span><img class="fotos" src="./galeria/foto2.jpg" alt="" /><br /></span></a></li>
	  			<li><a href="#"><img class="min" src="./galeria/miniatura/min3.jpg" alt="" /><span><img class="fotos" src="./galeria/foto3.jpg" alt="" /><br /></span></a></li>
	  			<li><a href="#"><img class="min" src="./galeria/miniatura/min4.jpg" alt="" /><span><img class="fotos" src="./galeria/foto4.jpg" alt="" /><br /></span></a></li>
	  			<li><a href="#"><img class="min" src="./galeria/miniatura/min5.jpg" alt="" /><span><img class="fotos" src="./galeria/foto5.jpg" alt="" /><br /></span></a></li>																
				<li><a href="#"><img class="min" src="./galeria/miniatura/min6.jpg" alt="" /><span><img class="fotos" src="./galeria/foto6.jpg" alt="" /><br /></span></a></li>
		</ul>
		</div>		
		<div id="galeriad"> 
		<ul>
				<li><a href="#"><img class="min" src="./galeria/miniatura/min7.jpg" alt="" /><span><img class="fotos" src="./galeria/foto7.jpg" alt="" /><br /></span></a></li>
				<li><a href="#"><img class="min" src="./galeria/miniatura/min8.jpg" alt="" /><span><img class="fotos" src="./galeria/foto8.jpg" alt="" /><br /></span></a></li>				
				<li><a href="#"><img class="min" src="./galeria/miniatura/min9.jpg" alt="" /><span><img class="fotos" src="./galeria/foto9.jpg" alt="" /><br /></span></a></li>
				<li><a href="#"><img class="min" src="./galeria/miniatura/min10.jpg" alt="" /><span><img class="fotos" src="./galeria/foto10.jpg" alt="" /><br /></span></a></li>
				<li><a href="#"><img class="min" src="./galeria/miniatura/min11.jpg" alt="" /><span><img class="fotos" src="./galeria/foto11.jpg" alt="" /><br /></span></a></li>				
				<li><a href="#"><img class="min" src="./galeria/miniatura/min12.jpg" alt="" /><span><img class="fotos" src="./galeria/foto12.jpg" alt="" /><br /></span></a></li>
		</ul>
		</div>
		</div> 
Código CSS:
Código:
#galeria {
	background-color:#F8FAE4;
	width: 820px;
	height: 554px;
}

#galeriai {
	background-color:#F8FAE4;
	float: left;
	width: 120px;
	height: auto;
	margin-top: 2px;
	margin-left: 2px;
	display:inline;
}

#galeriad {
	background-color:#F8FAE4;
	float: right;
	width: 120px;
	height: auto;
	margin-top: 2px;	
}

#galeriai ul {padding:0px;margin:0px;width:119px;background:#F8FAE4 ;float:left;margin-left:0px;}

#galeriai li {list-style-type:none;padding:10px 8px 5px;background:#D8DAC4 ;float:left;line-height:11px;}

#galeriad ul {padding:0px;margin:0px;width:119px;background:#F8FAE4 ;float:left;margin-left:0px;}

#galeriad li {list-style-type:none;padding:10px 8px 5px;background:#D8DAC4 ;float:left;line-height:11px;}
	
a img.min {border:1px solid #D8DAC4;}

a span {
	visibility:hidden;
	text-align:center;
	font:bold 14px "Trebuchet MS",arial;
	position:absolute;
	top:295px;
	left:240px;  /* AQUI ES DONDE TENGO EL PROBLEMA*/
	border:0px solid #fff;
	z-index:10;
}
		
a:hover img.min {z-index:100;border:1px solid #D8DAC4;}
a:hover {display:inline;z-index:100;} /* Hace que funcione en IE6*/
a:hover span {visibility:visible;border:0px solid #837C63;background:#F8FAE4;z-index:100;}
a:hover span img {visibility:visible;z-index:100;}		

a:focus span , a:active span  {visibility:visible;z-index:10;background:#F8FAE4;}
a img.fotos {border:0px solid #CA9655;margin:px;}
Gracias desde ya por las respuestas.
Saludos
  #2 (permalink)  
Antiguo 22/01/2009, 15:14
 
Fecha de Ingreso: abril-2005
Mensajes: 475
Antigüedad: 12 años, 8 meses
Puntos: 3
Respuesta: Centrar una imagen dentro de otro DIV

Me olvidé del link para que vean el problema:
http://www.juntadepaysandu.gub.uy/
  #3 (permalink)  
Antiguo 22/01/2009, 18:12
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar una imagen dentro de otro DIV

Antes de nada: ¿has visto el scroll horizontal que saca la página. sin necesidad?
Esto se debe a que:
Cita:
#menu ul {border-left:1px solid #FFFFFF;
float:left;
left:450px;
position:relative;

top:157px;
width:768px;
}
al tener posición relativa, con left:450px; le das un gran desplazamiento desde la izquierda, pero aun así mantienes un ancho de 768px, y claro, se va por la derecha toda una gran parte vacía.
Arregla eso y miramos el otro problema.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 22/01/2009, 18:22
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar una imagen dentro de otro DIV

El otro problema se debe a esto:
Cita:
a span {
visibility:hidden;
text-align:center;
font:bold 14px "Trebuchet MS",arial;
position:absolute;
top:295px;
left:240px;

border:0px solid #fff;
z-index:10;
}
Con la posición absoluta le estás pidiendo que las imágenes grandes siempre salgan a 295px de arriba y 240 de la izquierda sea como sea esa la ventana, y claro no siempre encaja donde quieres.

Prueba añadiendo posicion relativa a tu div <div id="alrededor">:
Cita:
#alrededor {background-image:url(fondo_alrededor.jpg);
background-repeat:repeat-y;
height:auto;
margin-left:auto;
margin-right:auto;
width:900px;
position:relative;
}
y recolocando un poco las imágenes centrales.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 22/01/2009, 19:57
 
Fecha de Ingreso: abril-2005
Mensajes: 475
Antigüedad: 12 años, 8 meses
Puntos: 3
Respuesta: Centrar una imagen dentro de otro DIV

Mil gracias Mikmoro. Eres un genio.

A los dos problemas los pude solucionar. La verdad no entiendo porque colocando position:relative; en el div alrededor afecta la colocación de las imágenes.

Saludos
  #6 (permalink)  
Antiguo 23/01/2009, 01:56
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Centrar una imagen dentro de otro DIV

Porque la posición absoluta es con respecto a toda la página, pero si su contenedor tiene posición relativa, la absoluta es con respecto al contenedor. Así de sencillo.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 23/01/2009, 03:16
(Desactivado)
 
Fecha de Ingreso: noviembre-2007
Mensajes: 54
Antigüedad: 10 años
Puntos: 0
Respuesta: Centrar una imagen dentro de otro DIV

Hola. Mi opinión es que el Sitio está muy bien diseñado pero el problema que tienes es que no has aplicado una estructura de diseño fluido o/y liquido.

Esto te permitiria adaptar el Sitio a cualquier tipo de resolución y, sin tener que introducir propiedades "min-..." y "max-..."; además de la ventaja en diseño de evitar barras de desplazamiento.

Es una Técnica muy distinta a la empleada por tu parte. Más complicada, pero cuando la entiendes, es una gran ventaja porque evitas líneas de código y por ende, peso en el Sitio.

Para aprender esta Técnica, te recomiendo un buen maestro y de confianza. Tutoriales y demás únicamente te pueden redirigir a diferentes caminos y, cuando en CSS se mezclan distintas técnicas.... surgen los conflictos en los resultados.



Saludos.

Última edición por tunait; 23/01/2009 a las 03:40
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 19:24.