Pocisionamiento dinámico de bloques ¡¡AYUDA!!

TiNCHOY2k · #1 (**permalink**) 29/12/2008, 08:12

Buenas a todos!

La duda que tengo en este minuto es existencial para el proyecto que estoy desarrollando.

Estoy comenzando a maquetear con CSS una página de e-commerce la cual por ahora va bien pero me estoy enfrentando a la típica página que abres una categoría y te aparecen todos los productos (con la típica opción mostrar 6, 9, 12, o todos los productos a través de un combobox).

La estructura del sitio esta hecha con divs absolutos (o sea TODO FLOTA

) pero aca tengo la pregunta del millón.

Tengo que hacer un bloque para la información resumida del producto, la cual se va a rellenar con las consultas php, y la misma se va a tener que repetir hacia abajo o hacia la derecha dependiendo del caso.

EXISTE ALGUNA MANERA DE CREAR SOLO UNA CAJA CON LA INFO Y QUE LA POSICION SE ASIGNE DINAMICAMENTE EJECUTANDO ALGUNA FUNCIÓN QUE LA UBIQUE EXACTAMENTE A "X" PIXELES DE LA ANTERIOR?

kseso? · #2 (**permalink**) 29/12/2008, 08:25

Hola Tinchoy2k
No acabo de imaginarme bien tu composición, pero pese a ello te comento:
Todo elemento posicionado como "absolute" toma como referencia o punto '0,0' la esquina superior izquierda del primer antecedente (padre, abuelo, etc) que lo contenga y que tenga como posición "relative"

Así que si todas tus cajas contenedoras las has posicionado con valor absoluto, tomarán como referencia el "body".

Por cierto, que existe una contradicción en tu exposición: si todo es "absoluto" no pueden "flotar", les estás marcando una posición determinada, con independencia del resto de elementos.

Un saludo

TiNCHOY2k · #3 (**permalink**) 29/12/2008, 09:07

De repente viendo esta imagen quede más claro el ejemplo

a ver si tienen alguna idea de como hacerlo

safe · #4 (**permalink**) 29/12/2008, 13:58

Cita:

Iniciado por kseso?

Hola Tinchoy2k
... que lo contenga y que tenga como posición "relative"

No necesariamente tiene que ser 'relative', si el padre tiene absolute pasa lo mismo y calculo que con fixed tambien (aunque nunca lo probe).

TiNCHOY2k: Para lo que quieres hacer, lo mejor es que no posiciones nada absolutamente. Sino que le asignes una clase a todos los bloques de productos y que flotes los bloques que contengan dicha clase.

Ejemplo sencillo:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
.contenedorDEproductos { border:1px solid #000; float:left; width:600px; }
.producto { border:1px solid #666; float:left; margin:1%; padding:1%; width:29%; }
-->
</style>
</head>
<body>
<div class="contenedorDEproductos">
	<div class="producto">
		<h1>Producto 1</h1>
		<p>Descripcion descripcion descripcion descripcion descripcion descripcion</p>
	</div>
	<div class="producto">
		<h1>Producto 2</h1>
		<p>Descripcion descripcion descripcion descripcion descripcion descripcion</p>
	</div>
	<div class="producto">
		<h1>Producto 3</h1>
		<p>Descripcion descripcion descripcion descripcion descripcion descripcion</p>
	</div>
	<div class="producto">
		<h1>Producto 1</h1>
		<p>Descripcion descripcion descripcion descripcion descripcion descripcion</p>
	</div>
	<div class="producto">
		<h1>Producto 2</h1>
		<p>Descripcion descripcion descripcion descripcion descripcion descripcion</p>
	</div>
	<div class="producto">
		<h1>Producto 3</h1>
		<p>Descripcion descripcion descripcion descripcion descripcion descripcion</p>
	</div>
</div>
</body>
</html>