Foros del Web » Creando para Internet » CSS »

Galería de artículos en un div

Estas en el tema de Galería de artículos en un div en el foro de CSS en Foros del Web. Muy buenas a todos, estoy ultimando el tema de la galería o catálogo de una tienda online, y resulta que al disponer los elementos (artículos) ...
  #1 (permalink)  
Antiguo 08/07/2009, 18:25
 
Fecha de Ingreso: febrero-2009
Mensajes: 132
Antigüedad: 15 años, 2 meses
Puntos: 2
Galería de artículos en un div

Muy buenas a todos,

estoy ultimando el tema de la galería o catálogo de una tienda online, y resulta que al disponer los elementos (artículos) de la forma que aparace en la foto que os adjunto, el contenedor padre del contenedor padre de todos ellos, hace como si no existieran.

Esto tiene su lógica, pues cada div articulos esta en posicion relativa respecto a su padre, productos, y el padre de este, no se como ponerlo para que acepte el contenido que tiene y se redimensione adecuadamente...

En fin, os paso la imagen, y el css y xhtml relacionado. El problema se donde está y porqué aparece, el tema es solucionarlo, pues por más que intento no consigo más que o quitar el fondo blanco, o dejarlo puesto :s

Un saludo

Código:
#catalogo {
	position: relative;
	}

#productos {
	margin: 0 2%; 
	position: relative;
	}

#productos .articulo {
	float: left;
	width: 200px;
	height: 190px;
	margin: 1%;
	padding: 5px;
	background-color: #c5c7c9;
	border-right: #55575a solid 2px;
	border-bottom: #55575a solid 2px;
	text-align: center;
	position: relative;
	}

#productos .articulosCentral {
	margin: auto;
	}

#productos .articuloInferior {
	bottom: 0%;
	position: absolute;
	}
Código PHP:
<div class="cuerpo">
                <div id="catalogo">
                    <?php
                        
echo "<div id=\"productos\">";
                        while( 
$resultados $bd->fetch_array($consulta) )
                        {
                            echo 
"<div class=\"articulo\">
                                    <div class=\"articuloSuperior\">" 
$resultados[Nombre] . "</div>
                                    <div class=\"articuloCentral\"><a href=\"descargaArchivo.php?idArchivo=$resultados[CodArticulo]\"><img src=\"descargaArchivo.php?idArchivo=$resultados[CodArticulo]\" alt=\"$resultados[Nombre]\"></img></a></div>
                                    <div class=\"articuloInferior\"><a href=\"anyadeArticuloCesta.php?idArticulo=$resultados[CodArticulo]\">A&ntilde;adir al carro</a> " 
"  $resultados[Precio]€</div>
                                    </div>
                                    "
;
                        }
                        echo 
"</div>";
                    
?>
                </div>            
            </div>
Esto es lo que sale:
http://img191.imageshack.us/i/pantallazo1a.png/

Esto es lo que debería salir(entendiendo que los elementos deberían estar dispuestos como en la foto de arriba:

http://img34.imageshack.us/i/pantallazo3h.png/
  #2 (permalink)  
Antiguo 09/07/2009, 03:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Galería de artículos en un div

Hola Tupy:
Me he permitido variar algo tu código para comerme algún div.
No he parado mucho en él, ni lo he revisado porque tengo que salir.
Prueba y después ya veríamos si se necesita algún cambio:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css </title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin:0;padding:0; border:0; outline:none;  position: relative;}
  7. .catalogo {
  8.  width: 80%;
  9.  margin: 0 auto;
  10.  border: 1px solid #600;
  11.  overflow: hidden;
  12.  text-align: center;
  13.  }
  14. .catalogo h5 {text-align: center; font-size: 1em; display: inline;}
  15. .catalogo .articulo {
  16.   float: left;
  17.   width:200px;
  18.   height:200px;
  19.   margin: 5px;
  20.   padding: 10px;
  21.   background: #444;
  22.   overflow: hidden;
  23.   color: #cdcdcd;
  24.   }
  25. .catalogo .articulo img {
  26.   width: 170px;
  27.   height: 170px;
  28.   display: block;
  29.   margin:5px auto;
  30. }
  31. </head>
  32. <div class="catalogo">
  33.     <div class="articulo">
  34.     <h5>Artículo: nombre</h5>
  35.     <img src="http://ventas26.files.wordpress.com/2008/09/cliente-es-primero1.jpg" tittle="" alt= "" />
  36.     A&ntilde;adir al carro: 30
  37.     </div>
  38.     <div class="articulo">
  39.     <h5>Artículo: nombre</h5>
  40.     <img src="http://www.antoniodomingo.com/wp-content/uploads/2009/03/cliente.jpg" tittle="" alt= "" />
  41.     A&ntilde;adir al carro: 30
  42.     </div>
  43.     <div class="articulo">
  44.     <h5>Artículo: nombre</h5>
  45.     <img src="http://www.blocdeapuntes.net/images_wordpress/atencion_cliente.jpg" tittle="" alt= "" />
  46.     A&ntilde;adir al carro: 30
  47.     </div>
  48.     <div class="articulo">
  49.     <h5>Artículo: nombre</h5>
  50.     <img src="http://gonzalezsanchez.files.wordpress.com/2008/08/servicio-al-cliente.jpg" tittle="" alt= "" />
  51.     A&ntilde;adir al carro: 30
  52.     </div>
  53.     <div class="articulo">
  54.     <h5>Artículo: nombre</h5>
  55.     <img src="http://www.simply.es/images/izquierdaAtencionCliente.jpg" tittle="" alt= "" />
  56.     A&ntilde;adir al carro: 30
  57.     </div>
  58.     <div class="articulo">
  59.     <h5>Artículo: nombre</h5>
  60.     <img src="http://lacrudarealidad.blogsome.com/images/vodafone.jpg" tittle="" alt= "" />
  61.     A&ntilde;adir al carro: 30
  62.     </div>
  63.     <div class="articulo">
  64.     <h5>Artículo: nombre</h5>
  65.     <img src="http://elezeta.net/blog/wp-content/uploads/2008/03/el-cliente-siempre-tiene-la-razon.jpg" tittle="" alt= "" />
  66.     A&ntilde;adir al carro: 30
  67.     </div>
  68.     <div class="articulo">
  69.     <h5>Artículo: nombre</h5>
  70.     <img src="http://bligoo.com/media/users/0/11288/images/disenador%20cliente.JPG" tittle="" alt= "" />
  71.     A&ntilde;adir al carro: 30
  72.     </div>
  73. </div>
  74. </body>
  75. </html>

Si encuentras algún error, disculpa, son las prisas.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 09/07/2009, 04:43
 
Fecha de Ingreso: febrero-2009
Mensajes: 132
Antigüedad: 15 años, 2 meses
Puntos: 2
Respuesta: Galería de artículos en un div

Perfecto! Eso es justo lo que quería, pero no entiendo exactamente como lo has hecho. Te pongo el código del "cacho" de CSS que lo ha solucionado:

#catalogo {
margin: 0 auto;
overflow: hidden;
text-align: center;
}

En concreto la propiedad overflow: hidden, qué hace esa propiedad para que acepte a los hijos dentro del contenedor???

Un saludo y muchas gracias por tu ayuda, por más que miraba el código no lo sacaba, y venga a darle vueltas a propiedades jejeje
  #4 (permalink)  
Antiguo 09/07/2009, 05:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Galería de artículos en un div

Si en un contenedor todos sus hijos están flotados, no crece con ellos. La propiedad overflow "limpia el float" y lo fuerza a crecer. Vamos, un frasco de somatotropina

De todas formas, puede que alguna propiedad de las utilizadas sea innecesaria, pues es un ejemplo para otra consulta modificado levemente. Como por ejemplo: el redimensionar las imágenes con css, posiblemente algún text-align y no se qué más.

Me alegro que te haya servido.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 09/07/2009, 05:46
 
Fecha de Ingreso: febrero-2009
Mensajes: 132
Antigüedad: 15 años, 2 meses
Puntos: 2
Respuesta: Galería de artículos en un div

Muchas gracias por tu explicación, la verdad, no me sobra el tiempo para este proyecto y este era un tema muy importante a resolver. Lo bueno es que he aprendido, que es lo importante.

Por los mensajes que llevas, veo que dominas bastante el tema, e imagino que te dedicarás al diseño/programación web verdad? Has hecho carrera tambien?
  #6 (permalink)  
Antiguo 09/07/2009, 05:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 16 años, 10 meses
Puntos: 539
Respuesta: Galería de artículos en un div

Cita:
Iniciado por tupy Ver Mensaje
Por los mensajes que llevas, veo que dominas bastante el tema, e imagino que te dedicarás al diseño/programación web verdad? Has hecho carrera tambien?
Nada más lejos de la realidad. Es para entretener la neurona, que a mis años ya... Aunque me debería plantear cobrar por la asesoría
Comencé accidentalmente a picar el css hará como un año (este dato es para que veas lo sencillo que es)

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #7 (permalink)  
Antiguo 09/07/2009, 09:11
 
Fecha de Ingreso: febrero-2009
Mensajes: 132
Antigüedad: 15 años, 2 meses
Puntos: 2
Respuesta: Galería de artículos en un div

Si, difícil no lo veo la verdad, llevo unos 3 meses medio en serio con esto, y esta es la tercera web que diseño, mejorando cada una la anterior, con creces. Y poco a poco iré haciendo más cosillas, me interesa muchisimo, y veo que puedo dedicarme a esto, sobre todo porque el tema de la programación(estudio Ing. Informática), es lo que se me da bien y me gusta.

Y a qué te dedicas? Yo ahora mismo estoy haciendo esto para sacar dinero y tener unos ahorrillos, y de momento veo que me va bien.

Aunque ya te digo que en un futuro, incluso puede que haga master de diseño y desarrollo de aplicaciones web. Para finales de verano me estoy planteando realizar un cursco de Gruby & Grails, y no, no me he equivocado escribiendo jejeje

Un saludo kseso?!
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 23:15.