Foros del Web » Creando para Internet » CSS »

problema al posicionar jpgs en absolute

Estas en el tema de problema al posicionar jpgs en absolute en el foro de CSS en Foros del Web. Hola que tal tengo un problema, quiero hacer en un div centrado horizonalmente, una foto central grande y alrededor de esta imagenes. A continuacion comparto ...
  #1 (permalink)  
Antiguo 11/04/2011, 12:47
 
Fecha de Ingreso: diciembre-2001
Ubicación: Argentina
Mensajes: 690
Antigüedad: 16 años
Puntos: 1
problema al posicionar jpgs en absolute

Hola que tal tengo un problema, quiero hacer en un div centrado horizonalmente, una foto central grande y alrededor de esta imagenes. A continuacion comparto una foto con la idea masomenos. Entonces mi idea es hacer un contenedor con la foto principal de fondo y dentro de este contenedor centrado con posicion relative.
Dentro del contenedor varios divs en posicion absoluta con la imagen dentro del div. En el dreamweaver se ve ok pero cuando lo veo en el explorador todas los thumbs jpg que ubique en posicion absoluta se cargan en fila hacia abajo y no le da bola al css.



el codigo abreviado es algo asi para que se den una idea

para el html
Código:
<div id="quiecont">
<div id="1"><img src="images/1.png" width="123" height="145" /></div>
<div id="2"><img src="images/2.png" width="152" height="105" /></div>
</div
para el css

Código:
#quiecont{
	width:920px;
	height:650px;
	position:relative;
	background-image:url(../images/fotodefondo.jpg);
	text-align:left;
	margin-left:auto;
	margin-right:auto;
	margin-top: 0;
	margin-bottom: 0;
}

#1{
	width:123px;
	height:145px;
	position:absolute;
	top: 0px;
	left: 0px;
}
#2{
	width:152px;
	height:105px;
	position:absolute;
	top: 0px;
	left: 152px;
}
  #2 (permalink)  
Antiguo 11/04/2011, 17:40
 
Fecha de Ingreso: octubre-2007
Mensajes: 89
Antigüedad: 10 años, 1 mes
Puntos: 1
Respuesta: problema al posicionar jpgs en absolute

Uy, te vas a volver loco! Yo probaría otra alternativa, por ejemplo:
Todas las fotos de arriba en un div solo, una a continuación de la otra.

Después un layout de dos columnas;

A la izquierda las imágenes delgadas de la fila izquierda.

A la derecha todas las demás; a la imagen grande le das una clase para que flote a la izquierda en lo que sería la columna derecha.
<img class="left" src="tuimagen.jpg">
y en el css
.left{float:left;}

Las otras imágenes te iran cayendo en orden una abajo de la otra, y cuando queden las cuatro últimas no les quedará más remedio que irse para abajo.
  #3 (permalink)  
Antiguo 18/04/2011, 17:04
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: problema al posicionar jpgs en absolute

La causa mas probable del problema es que al utilizar un número como primera letra del identificador, el navegador no lea las propiedades y por tanto los div se muestran con position:static. En CSS debes usar una letra como primer caracter del identificador.
Prueba a renombrar los identificadores con img1, img2,... ( por ejemplo ) y el problema debería desaparecer.
La imagen central la puedes ubicar en su posición haciendo uso de la propiedad background-position.
Un saludo, con cierto retraso.

Etiquetas: Ninguno
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 03:25.