Ver Mensaje Individual
  #2 (permalink)  
Antiguo 09/07/2009, 03:54
kseso?
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 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? +++