Pregunta acerca del diseño original de CSS Zen Garden

[Tigervlc]

Gracias a la recomendación de algunos foreros, me he bajado unos cuantos diseños CSS de "CSS Zen Garden" con imágenes incluídas para estudiarlas. Ahora estoy con el diseño original, que tiene un toque japonés. Bueno, pues por si hay foreros con esa CSS y el html fuente en su web y pueden editarlas, quisiera hacerl unas preguntas sobre dudas que tengo en su diseño:

- Por qué si pongo en la ID="quickSummary" la propiedad clear=none, o la elimino, (inicialmente está clear=both), el bloque se coloca en la base superior entre los dos bloques que contiene ID="pageHeader"?

- Y por qué si "quickSummary" estando clear=both permite que el siguiente bloque, de ID ="preamble", se coloque a la misma altura a su derecha?

Espero que alguien conozca o se baje ese diseño (se baja en un momento) y me ayude.

Por cierto, al administrador: estaría bien crear un subforo para preguntas acerca de diseños de CSS Zen Garden, porque valen mucho la pena para aprender a maquetar con CSS y ayudar a resolver muchas dudas.

[Computer XTress]

Yo me sumo a la peticion de Tigervlc... no se si crear un subforo o que, pero de alguna forma estaria bueno fomentar un poco este tipo de diseños. A mi me parecen muy modernos, livianos, super creativos... estoy trabajando tambien para re-diseñar mi sitio con un diseño basado puramente en CSS al estilo CSS Zen Garden.

Saludos.

[frijolerou]

Iniciado por Computer Xtress

- Por qué si pongo en la ID="quickSummary" la propiedad clear=none, o la elimino, (inicialmente está clear=both), el bloque se coloca en la base superior entre los dos bloques que contiene ID="pageHeader"?

Los dos elementos que hay en "pageHeader" (H1 y H2) son elementos flotantes (propiedad FLOAT). Por este hecho de ser elementos flotantes, no influyen en la ubicación del bloque que viene a continuación (en este caso "quickSummary"), por eso este último tiene a subir. Para evitar esto se utiliza la propiedad clear con el valor both, haciendo referencia a un elemento flotante a la izquierda (H1) y a un elemento flotante a la derecha (H2).

Iniciado por Comp Xtress

- Y por qué si "quickSummary" estando clear=both permite que el siguiente bloque, de ID ="preamble", se coloque a la misma altura a su derecha?

Porque dentro de la estructura HTML, "preamble" viene después de "quickSummary". La propiedad clear tiene efecto frente a los elementos que se encuentren ANTES del elemento al que se ha aplicado.

Espero que no resulte muy complicada mi explicación.