INICIO Regístrate Contacto Accede
Creando Tu Web

Los vínculos anteriores muestran una estructura de navegación básica que emplea una lista no ordenada con estilo de CSS. Utilícela como punto de partida y modifique las propiedades para lograr el aspecto deseado. Si necesita menús desplegables, créelos empleando un menú de Spry, un widget de menú de Adobe Exchange u otras soluciones de javascript o CSS.

Si desea que la navegación se sitúe a lo largo de la parte superior, simplemente mueva ul.nav a la parte superior de la página y vuelva a crear el estilo.

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.

Borrado

Dado que todas las columnas son flotantes, este diseño usa overflow:hidden en .container. 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 tiene algún elemento grande que sobresale por fuera de .container, parecerá estar cortado. Tampoco podrá usar márgenes negativos ni posiciones absolutas con valores negativos para sacar elementos fuera de .container, o tampoco se mostrarán fuera de .container.

Si necesita usar estas propiedades, deberá emplear otro 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.

Pie de página

La adición de un pie de página tras las columnas, aunque aún dentro de .container, provocará que este método de borrado overflow:hidden no funcione. Puede colocar un .footer en un segundo .container fuera del primero sin que se produzcan efectos adversos. La opción más simple puede ser comenzar con un diseño que contenga encabezados y pies de página y quitar el encabezado para utilizar los métodos de borrado en ese tipo de diseño.

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. Si desea usar una línea divisora en lugar de un color, coloque un borde en el lado de la div de .content (pero sólo en el caso de que siempre vaya a tener más contenido).