Una barra de navegación consta de una imagen gráfica colocada dentro de una fila de celdas de una tabla. Dado que ya no se recomienda el uso de tablas para ubicar el contenido de una página que no sea una tabla, muchas personas que crean la Web están buscando (nuevas) formas de usar tablas estructuradas.
Marcado XHTML y formato CSS para crear barras de navegación.
Una barra de navegación CSS simple
Quizás la solución más sencilla para crear una barra de navegación de texto estilo CSS sea colocar todos los enlaces en una sola línea de texto, como en el Ejemplo A.
Este enfoque parece razonable e intuitivo. Pero el problema es que poner todos los enlaces en una línea de texto dificulta el control del espacio en blanco entre los enlaces y antes y después de ellos. Por lo tanto, para evitar que todos los enlaces se amontonen, será mejor
Después de eso, normalmente tendrá que insertar tuberías (barras verticales) y espacios en blanco que no sean líneas nuevas como delimitadores.
Como muestra el siguiente código, el resultado no es el marcado claro y estructurado que queremos.
| El siguiente es el contenido citado: <div id="navbar1"> <a href="link1a.html">Botón 1</a> <a href="link2a.html ">Botón 2</a> | <a href="link3a.html "> Botón 3</a> </div> |
Barra de navegación CSS basada en listas Otra forma de crear una barra de navegación CSS es utilizar las etiquetas <ul> y <li> para representar enlaces como una lista desordenada.
A primera vista, usar una lista desordenada para una barra de navegación parece contradictorio, porque estamos acostumbrados a pensar en una lista desordenada como una lista de elementos empujados verticalmente, con una viñeta delante de cada uno. Esto parece inconsistente con la orientación horizontal de la barra de navegación.
Sin embargo, la estructura lógica de una lista como una colección de elementos de lista independientes se puede aplicar a los enlaces en la barra de navegación y las reglas CSS le permiten forzar la anulación de la presentación predeterminada de los elementos de la lista, eliminar viñetas y organizar los elementos de la lista en la página. de flotador debajo.
Sabiendo esto, veamos ahora el Ejemplo B, creando una barra de navegación con estilo CSS y etiqueta XHTML basada en una lista desordenada.
Aquí está el marcado XHTML:
| El siguiente es el contenido citado: <div id="navbar2"> |
Aquí está el código CSS para convertir una lista de enlaces de texto en una barra de navegación:
| El siguiente es el contenido citado: div#barra de navegación2 { |