Foros del Web » Creando para Internet » CSS »

Galeria fotografica CSS

Estas en el tema de Galeria fotografica CSS en el foro de CSS en Foros del Web. Muy buenas Primero de todo, no suelo pedir ayuda, mas bien me recorro google buscando una solución, pero por lo que he visto al programar ...
  #1 (permalink)  
Antiguo 05/11/2010, 02:53
 
Fecha de Ingreso: febrero-2009
Mensajes: 12
Antigüedad: 8 años, 10 meses
Puntos: 0
Pregunta Galeria fotografica CSS

Muy buenas

Primero de todo, no suelo pedir ayuda, mas bien me recorro google buscando una solución, pero por lo que he visto al programar paginas web te encuentras con casos concretos que no encuentras solucion tan rapidamente

El caso es que tengo una galeria fotografica ordenada con float:left

Toda esta galeria esta dentro de un div para posicionarla en la pagina, el problema es que debajo de la galeria quiero poner texto.

El texto lo pongo dentro de otro div para posicionarlo con margenes.

El problema es que el div de la galeria al contener dentro elementos ordenados con float:left no tiene altura. Su altura es 0

Entonces el div del texto cuando tu le dices quiero un margen superior de 150px empieza a contar por encima de la galeria, porque el div de la galeria no tiene altura.

Puedo darle la altura manualmente, pero antes que hacer eso preferiria saber si el uso que estoy dando al float es correcto y si el float funciona asi y esas son sus limitaciones

Un amigo me dijo de poner en el div de la galeria clear:both, pero ni aun asi me funciona

Pondre un pequeño ejemplo

#galeria{
clear:both;}
#foto{
float:left;
margin:0px 10px 10px 0px;}
#texto{
margin: 150px 0px 0px 0px;}

<div id="galeria">
<div id="foto">
<p>IMAGEN 01</p>
</div>
<div id="foto">
<p>IMAGEN 02</p>
</div>
</div>

<div id="texto">
<p>ESTE ES EL TEXTO QUE VA DEBAJO DE LA GALERIA</p>
</div>


Cada foto la pongo dentro de un div para poner margenes dentro de la galeria

Bueno poes eso es todo. Muchas gracias por todo :D

Un saludo
  #2 (permalink)  
Antiguo 05/11/2010, 10:10
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Galeria fotografica CSS

Efectivamente es un problema del float. Los eementos flotados no hacen crecer a su contenedor padre.

Hay varias técnicas para evitar esos efectos secundarios. La más indicada depende del resto de códigos empleados y que están involucrados.

Lo ideal para ofrecer una solución ad hoc sería que pusiese un enlace a su realización (si es posible).

Hasta entonces, haga una búsqueda por "limpiar float" o cadena similar.
  #3 (permalink)  
Antiguo 05/11/2010, 10:26
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 7 años, 4 meses
Puntos: 8
Respuesta: Galeria fotografica CSS

Quizás lo mejor sea las capas más que los floats.
El div de la galería que tenga position:relative; y los divs de debajo position:absolute en relación al primero.

No sé si esto puede servir de pista para la solución...
  #4 (permalink)  
Antiguo 05/11/2010, 10:27
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Galeria fotografica CSS

Si tienes un contenedor lleno de elementos flotados, entonces podrías hacerle esto a ese elemento:

#el{
min-height: 100px; /ejemplo
overflow:hidden;
}


Esto hará que tu div contenedor cubra los elementos flotados.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #5 (permalink)  
Antiguo 05/11/2010, 10:31
Avatar de Facundo_Nahuel  
Fecha de Ingreso: noviembre-2010
Ubicación: Buenos Aires, Argentina
Mensajes: 32
Antigüedad: 7 años, 1 mes
Puntos: 3
Respuesta: Galeria fotografica CSS

Buenos días.

En primer lugar te recomendaría que no utilizes "id" para las fotos, ya que hay más de una y el id debe representar un único elemento, debes utilizar "class".

Yo creo que lo que lo único que necesitas utilizar es display:inline-block
Código HTML:
<head>
    <style>
	.foto{
		display:inline-block;
	}
    </style>
</head>
<body>
<div id="galeria">
<div class="foto">
<p>IMAGEN 01</p>
</div>
<div class="foto">
<p>IMAGEN 02</p>
</div>
</div>

<div id="texto">
<p>ESTE ES EL TEXTO QUE VA DEBAJO DE LA GALERIA</p>
</div>
</body> 
  #6 (permalink)  
Antiguo 05/11/2010, 11:57
 
Fecha de Ingreso: febrero-2009
Mensajes: 12
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Galeria fotografica CSS

Muchas gracias por las respuestas!!! :D

Ahora estoy subiendo la pagina a una carpeta temporal y cuelgo el enlace para que se pueda ver

Facundo_Nahuel gracias por la aclaracion de las clases. Tienes razon, la cosa es que como no se muy bien sobre css, le pongo a todo clase y ya esta. Lo cambiare porque me gusta ser ordenador :D

Tambien tengo un problema con poner el top en porcentajes cuando el contenedor padre tiene el height en porcentajes. Lo que no se si exponer este problema aqui o abrir un nuevo post
  #7 (permalink)  
Antiguo 05/11/2010, 12:08
 
Fecha de Ingreso: febrero-2009
Mensajes: 12
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Galeria fotografica CSS

[URL="http://erikcrane.com/prueba/"]http://erikcrane.com/prueba/[/URL]

Este es el enlace de la pagina. Ya se que la imagen de fondo pesa mucho, pero si bajo el tamaño se ve mal

muchas gracias por todo
  #8 (permalink)  
Antiguo 06/11/2010, 09:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Galeria fotografica CSS

Me encuentro con una duda, pues no hay concordancia en el etiquetado entre la página que enlaza y los códigos que publicó en #1 y debido a que no ha limpiado su código html (mucho comentado).

Suponiendo que el texto que quiere añadir y que es el que no baja vaya después de cerrar el div que contiene a las dos imágenes y el resto de comentados. Ir después significa fuera de él.
El que va después de |<p id="texto01">| y que no tiene asignada ninguna clase ni id.


El problema es debido al efecto que ya le anticipé en #2: problema de limpiado de float. Por favor, infórmese al respecto.
Mientras y para solventar su problema, añádale a ese (al que contiene los |#contenedor_foto| lo siguiente:
div |overflow:hidden|

Y como lo usa reiteradamente, "contenedor_foto" debería ser una clase (div class=) no un id.
  #9 (permalink)  
Antiguo 07/11/2010, 17:27
 
Fecha de Ingreso: febrero-2009
Mensajes: 12
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Galeria fotografica CSS

muchas gracias por tu respuesta.

perdona por no haberme dado cuenta de lo de los comentarios. encima que pido ayuda no lo dejo nada claro, lo siento de veras.

ahora ya he sacado los comentarios y he dejado el texto que quiero mover, que es el que tiene id texto02

mañana me mirare lo de limpiar los floats y lo de overflow:hidden.

lo de cambiar contenedor_fotos a class ya lo hice, pero no colgue la verison mas reciente.

muchas gracias por todo

PD: el codigo que puse al principio era un ejemplo de lo que queria, pero como dijisteis que si se podia ver todo el codigo pues lo colgue
  #10 (permalink)  
Antiguo 08/11/2010, 02:55
 
Fecha de Ingreso: febrero-2009
Mensajes: 12
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: Galeria fotografica CSS

muy buenas

ya he buscado lo de limpiar el float y lo que he encontrado es esto:

dos maneras de hacerlo:
la facil pero sucio: añadiendo un contenedor vacio al final con float:clear para que coga el largo total
tambien facil pero limpio: añadiendo al contenedor el overflow:hidden y luego para que todos los navegadores no tengan problema height:1%

Basicamento lo que me decias, kseso?

El texto de abajo (el que tiene id=texto02) ya se puede posicionar donde quiero con los margin. muchas gracias por todo :D

Tengo otra duda, que seguro que es de facil solucion, aunque a mi me parece muy extraño que pase.

Tengo dos divs el contenedor (que se llama contenedor_foto) y el que lleva una sombra y luego otro div que lleva la foto (el div que lleva la foto se llama posicion_foto)

Lo tengo puesto de esta forma tan rara porque no queria poner la sombra junto con la foto en el mismo archivo de foto.

Entonces cargo la sombra, cargo la foto y luego subo la foto para que quede encima de la sombra.

El problema es que si al div class=contenedor_foto no le pongo un valor height en px cuando voy a posicionar el div class posicion_fotos con un top en porcentaje negativo no me lo coge

Es algo extraño porque el left si que puedo ponerlo en porcentage y me funciona sin poner un valor a height, pero el top no

Bueno pos na mas, muchas gracias por todo a todos

Etiquetas: fotografica, galeria
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 15:57.