Sigenos en:

Mis Tweets

Instrucciones

Tenga en cuenta que la CSS para estos diseños cuenta con numerosos comentarios. Si realiza la mayor parte de su trabajo en la vista Diseño, eche un vistazo al código para obtener sugerencias sobre cómo trabajar con la CSS para diseños flotantes. Puede quitar estos comentarios antes de lanzar el sitio. Para obtener más información sobre las técnicas usadas en estos diseños CSS, lea este artículo en el Centro de desarrolladores de Adobe: http://www.adobe.com/go/adc_css_layouts.

Método de borrado

Dado que todas las columnas son flotantes, este diseño usa una declaración clear:both en la regla .footer. Esta técnica de borrado fuerza a .container a conocer dónde terminan las columnas con el fin de mostrar cualquier borde o color de fondo que coloque en .container. Si su diseño exige la eliminación de .footer de .container, deberá usar un método de borrado diferente. El más fiable consiste en añadir una <br class="clearfloat" /> o <div class="clearfloat"></div> tras la última columna flotante (pero antes de que se cierre .container). Esto proporcionará el mismo efecto de borrado.

Sustitución de logotipo

Se ha utilizado un marcador de posición de imagen en el .header de este diseño, en el que lo más probable es que desee colocar un logotipo. Se recomienda quitar el marcador de posición y reemplazarlo por su propio logotipo vinculado.

Tenga en cuenta que si utiliza el inspector de propiedades para navegar hasta la imagen de su logotipo empleando el campo Origen (en lugar de quitar y reemplazar el marcador de posición), deberá quitar el fondo en línea y mostrar las propiedades. Estos estilos en línea sólo se utilizan para hacer que el marcador de posición del logotipo aparezca en los navegadores para fines de demostración.

Para quitar los estilos en línea, asegúrese de que el panel Estilos CSS está configurado como Actual. Seleccione la imagen y, en la sección Propiedades del panel Estilos CSS, haga clic con el botón derecho del ratón y elimine las propiedades de visualización y de fondo. (Por supuesto que siempre podrá ir directamente al código y eliminar allí los estilos en línea de la imagen o el marcador de posición.)

Comentarios condicionales de Internet Explorer

Estos diseños flotantes contienen un comentario condicional de Internet Explorer (IECC) para corregir dos problemas.

  1. Los navegadores no son coherentes en la forma de redondear los tamaños de div en diseños basados en porcentajes. Si el navegador debe mostrar un número como 144,5 px o 564,5 px, tiene que redondearlo al número entero más próximo. Safari y Opera redondean a la baja, Internet Explorer redondea al alza y Firefox redondea una columna hacia arriba y una hacia abajo, llenando el contenedor por completo. Estos problemas de redondeo pueden provocar incoherencias en algunos diseños. En este IECC, hay un margen negativo de 1 px para resolver el problema en IE. Puede moverlo a cualquiera de las columnas (tanto a la izquierda como a la derecha) en función de las necesidades de su diseño.
  2. La propiedad de zoom se añadió al anclaje dentro de la lista de navegación, ya que, en algunos casos, se muestra espacio en blanco extra en IE6 e IE7. Zoom da a IE su propiedad hasLayout propia para resolver este problema.

Fondos

Por naturaleza, el color de fondo de cualquier div sólo se muestra a lo largo del contenido. Esto significa que si está usando un color de fondo o un borde para crear el aspecto de una columna lateral, éste no se extenderá hasta el pie de página, sino que se detendrá donde termine el contenido. Si la div de .content siempre va a incluir más contenido, puede colocar un borde en la div de .content para separarla de la columna.