Se superpone imagen en css

[fedefrankk]

Hola a todos, quiero hacer una galeria de imagenes, con php y css, cargo la imagen y la muestro de esta manera: (php)

Código PHP:

<div id="contenedor">
  <div class="imagen"><? echo "<img src=\"imprime.php?id=".$reg['id']."\">" ?></div>
<div class="click">PUNTUAR</div>
</div>
 

La galería tien solo dos tamaños de imagenes, la primero 287x287, y la otra medida posible es de 287x1000px..

mi CSS es el siguiente:

Código CSS:

#contenedor{width:210px;display:inline-block;
   height:170px;
   margin: 2px;
   padding:2px;
   background-color:#f5f7f9;
   border-right: #a5a7aa solid 1px;
   border-bottom: #a5a7aa solid 1px;
   text-align:center; font-size:10px;
   font-family:Verdana, Geneva, sans-serif
display:inline-block;
 
}
 
.imagen{ inline-block
}
 
.click{inline-block
}
 

el resultado es que se pone una imagen arriba de la otra.



La imagen A5 es la misma y arriba tiene A6, si a mi css le saco el tamaño with y heigt.. no se ensiman, pero no puedo trabajar, le quiero dar un lindo borde hacer cosas dentro con tamaño.

Muchas gracias por su tiempo,
Saludos
Fede

PD: tambien lo hice con <li> pero pasa lo mismo

Saludos.!!

[emprear]

Vas a tener que expresar con más claridad lo que querés hacer y cual es el problema, ya de por sí tu enunciado es confuso, el término "superponer", implica que tus imágenes se visualizan ocupando todo, o al menos parte de un mismo espacio. Y en tu ejemplo, no existe ninguna superposición, a no ser, que lo que estás señalando, es que en esta secuencia

A5 A6 A5

A6 no debería verse porque en realidad ahi hay otra A5, sobre la cual se superpone una A6.
Si por un instante yo supusiese que con "superposición" querés decir que las imágenes se muestran en 2 filas, ningún A5 tiene a ningún A6 según se vé en la imagen del ejemplo

Saludos

[fedefrankk]

Hola, gracias por contestar, el problema es asi, la imagen A6 esta arriba de la imagen A5, A5 es una misma imagen.. lo ideal sería que no se como hacerlo que cuando termine la imagen A5, se inserte la A6,
No se si se puede hacer pero ese es mi problema.
Saludos y gracias por tu tiempo.!!!!
Fede

[emprear]

muy claro no me queda, pero hagamos un intento

En primer lugar, vos mostrás un css y html, pero tu html está hecho para 1 sola imagen.
Pregunto? como estás insertando las imágenes? en forma manual, o se genera el html desde php y por ejemplo, una base de datos?

otra cosa, segun decis lo que se ve A5 A5, es una sola imagen.. y que se supone que hay en el medio? que es lo que está tapando A6?

Sería bueno verlo todo esto en una Url, es posible?

[fedefrankk]

Hola, no tengo pagina con sql, lo que hago es almacenar una imagen en una tabla blob, quiero hacer una galeria de imagenes que contengan 2 tipos de imagenes, una de 200x200 y otra de 200x1000, el tema es si yo guardo 5 imagenes de 200x200, me da un ancho de 1000, y empieza abajo nuevamente la otra imagen, el problema es que yo pongo una imagen de 200x1000 y me ocupa los 1000px de la pantalla, si subo una de 200x200 tiene que empezar abajo de la de 200x1000px, y no hace eso, lo que hace es ponerse arriba de la imagen 200x1000 como lo muestra la figura anterior la imagen a5 es de 200x1000 (ej), y la a6 es de 200x200px(ej), osea la imagen a6 no respeta el tamaño de la a5.
Si yo le sacao el codigo de css donde creo el marco, funciona de 10, si se respeta todo.

Lamentablemente no tengo como subir la url, espero que se entienda....

Gracias nuevamente y Saludos...!!!
Fede

[kseso?]

Publique los códigos implicados (html generado + css) y como estamos hablando de imágenes , súbalas a alguna lado y utilice esas rutas para poder reproducir el problema y así intentar alguna solución.

[emprear]

es un poco complicado tu sistema, solución concreta no sabría decirte
pero pregunto?

Cuantas imagenes x fila como máximo queres poner?
El orden en que se almacenan las imagenes en la bd, es aleatorio?
ej: (tomando en cuenta el ancho)
200
200
1000
1000
200
200
200
200
200
1000
etc
hay algún campo en la tabla que indique el ancho de la imagen, ya que obtener el ancho de un archivo es posible, pero de una imagen en un blob no se como
como es la cosa
asi

La galería tien solo dos tamaños de imagenes, la primero 287x287, y la otra medida posible es de 287x1000px..

o asi

La galería tien solo dos tamaños de imagenes, la primero 200x200, y la otra medida posible es de 200x1000px..

Porque indicas las dos cosas al mismo tiempo

A todo esto, para que esta ese css
width:210px;display:inline-block;2. height:170px
limitando un contenedor a medidas que sabes efectivamente superan las de tus imágenes?
que son miniaturas?, entonces mejor definir width y height en el tag img
Yo te diría que busques otro método más sencillo, aunque lo primero es resolver un tema de php no de css, te diria que postees en ese foro

Saludos

[fedefrankk]

Buenas y gracias a todos por sus respuestas,
creo que el problema primero esta en php, es muy sencillo pero no lo se hacer.

Almaceno dos tipos de imagenes, una de 200x200 y otra de 200x1000, y quiero un total de 5 imagenes por columnas, entonces si al principio almaceno 5 imagenes de 200x200 me da un total de 200x1000px que seria el ancho de mi ventana, el error esta que si almaceno 3 imagenes de 200x200px y despues una de 200x1000px, me da un total de 200x1600px, y es hay donde tengo que solucionarlo..... es un despiole.

se agradece enormemente las contestaciones, creo que primero tengo que definir bien lo que quiero hacer,

Saludos y Gracias a todos,
fede
PD: Nos vemos en otro post..

[emprear]

@fedefrankk

es un despiole.
se agradece enormemente las contestaciones, creo que primero tengo que definir bien lo que quiero hacer,

Es lo más oportuno de todo lo que propones.
A veces hay que "mezclar y dar de nuevo"
Si bien hablo desde el desconocimiento, y estás haciendo una galería de imágenes, lo más efectivo, recuperé las fotos de la bd, hace miniaturas todas del mismo ancho, y algún lindo lightbox para mostrar la imagen ampliada

Para que salgan solo 5 x fila con php, es sencillo, pero creo que eso ya lo tenes resuelto

Saludos