Foros del Web - Ver Mensaje Individual

kseso? · #5 (**permalink**) 22/07/2009, 11:01

Mira a ver si esto te sirve de ejemplo:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css </title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin:0;padding:0; border:0; outline:none;  position: relative;}
.catalogo {
 min-width: 400px;
 width: expression(document.body.clientWidth < 401? "400px": "auto" );
 max-width: 800px;
 width: expression(document.body.clientWidth > 801? "800px": "auto");
 margin: 0 auto;
 border: 1px solid #600;
 overflow: hidden;
 text-align: center;
 }
.catalogo h5 {text-align: center; font-size: 1em; display: inline;}
.catalogo .articulo {
  float: left;
  width:170px;
  margin: 5px;
  padding: 10px;
  background: #444;
  overflow: hidden;
  color: #cdcdcd;
  }
.catalogo .articulo img {
  width: 170px;
  height: 170px;
  display: block;
  margin:5px auto;
}
</style>
</head>
<body>
<div class="catalogo">
    <div class="articulo">
    <h5>Artículo: nombre</h5>
    <img src="http://ventas26.files.wordpress.com/2008/09/cliente-es-primero1.jpg" tittle="" alt= "" />
    A&ntilde;adir al carro: 30€
    </div>
    <div class="articulo">
    <h5>Artículo: nombre</h5>
    <img src="http://www.antoniodomingo.com/wp-content/uploads/2009/03/cliente.jpg" tittle="" alt= "" />
    A&ntilde;adir al carro: 30€
    </div>
    <div class="articulo">
    <h5>Artículo: nombre</h5>
    <img src="http://www.blocdeapuntes.net/images_wordpress/atencion_cliente.jpg" tittle="" alt= "" />
    A&ntilde;adir al carro: 30€
    </div>
    <div class="articulo">
    <h5>Artículo: nombre</h5>
    <img src="http://gonzalezsanchez.files.wordpress.com/2008/08/servicio-al-cliente.jpg" tittle="" alt= "" />
    A&ntilde;adir al carro: 30€
    </div>
    <div class="articulo">
    <h5>Artículo: nombre</h5>
    <img src="http://www.simply.es/images/izquierdaAtencionCliente.jpg" tittle="" alt= "" />
    A&ntilde;adir al carro: 30€
    </div>
    <div class="articulo">
    <h5>Artículo: nombre</h5>
    <img src="http://lacrudarealidad.blogsome.com/images/vodafone.jpg" tittle="" alt= "" />
    A&ntilde;adir al carro: 30€
    </div>
    <div class="articulo">
    <h5>Artículo: nombre</h5>
    <img src="http://elezeta.net/blog/wp-content/uploads/2008/03/el-cliente-siempre-tiene-la-razon.jpg" tittle="" alt= "" />
    A&ntilde;adir al carro: 30€
    </div>
    <div class="articulo">
    <h5>Artículo: nombre</h5>
    <img src="http://bligoo.com/media/users/0/11288/images/disenador%20cliente.JPG" tittle="" alt= "" />
    A&ntilde;adir al carro: 30€
    </div>
</div>  
</body>
</html>

Las clases implicadas son:
.catalogo .articulo
.catalogo .articulo img
De todas formas, hay una pequeña diferencia entre ie6 y FF.

Un saludo