Cómo hacer una navegación horizontal con los botones en CSS

No todos los sitios web utilizan las barras de navegación de su sitio menús. Una fila de botones puede mostrar enlaces a otras partes del sitio, a pesar de los "botones" no son botones de vista técnico. El código HTML estructural para ambos tipos de navegación es el mismo, y gran parte del CSS (Cascading Style Sheets) código es también la misma. Al crear una fila de botones de navegación horizontal, estilo de una lista de viñetas en botones que todos flotante a la izquierda de la otra. El estilo de los enlaces a sí mismos hace que sean más fáciles de hacer clic y funciona bien a través de diferentes tipos de navegador.

Instrucciones

1 Crear una lista desordenada en su página web utilizando HTML. Coloque los enlaces dentro de cada par de "<li>" tags:

<Ul id = "nav">
<Li> <a href="page1.html"> Página 1 </a> </ li>
<Li> <a href="page2.html"> Página 2 </a> </ li>
<Li> <a href="page3.html"> Page 3 </a> </ li>
<Li> <a href="page4.html"> Página 4 </a> </ li>
</ Ul>

Dale a tu lista de un nombre de identificación como se muestra arriba.

2 Abra la hoja de estilo para su página web y añadir nuevo código al final del archivo. Si la página Web no tiene todavía una hoja de estilo, crear un archivo en blanco y guardarlo como un archivo CSS dentro de la misma carpeta que la página Web. Coloca este código después de la "<title>" etiquetas en el archivo HTML para incrustar la hoja de estilos:

<Link rel = "stylesheet" href = "yourfile.css" type = "text / css" />

3 Retire las balas y el relleno del lado izquierdo de la lista desordenada:

{nav

list-style: none;
padding-left: 0;
}

En este ejemplo, "#nav" selecciona cualquier elemento con un nombre de identificación de "NAV." Si ha utilizado un nombre de identificación diferente en sus "<ul>" etiquetas, a continuación, reemplace "nav" con su propio nombre de identificación.

4 Flotar cada elemento de la lista a la izquierda:

li {nav

flotador izquierdo;
}

5 nav a {

bloqueo de pantalla; / Etiquetas de anclaje hace compatible con el acolchado /
background-color: #eeeeee;
color: # 555555;
padding: 5px 10px;
text-decoration: none;
}

En este ejemplo se crea botones de color gris claro con el texto del vínculo oscuro gris. Retire los subrayados de enlaces mediante el establecimiento de "text-decoration" a "ninguno". El uso de relleno para ampliar el fondo de todo el texto; en el ejemplo, "5px" representa cinco píxeles de desplazamiento vertical, mientras que "10px" representa 10 píxeles de desplazamiento horizontal.

6 Añadir un margen del lado derecho de cada botón para que no choquen unos contra otros:

margin-right: 20px;

Este par propiedad-valor va dentro de las llaves después de "un #nav."

7 Volver a la regla de estilo para toda la lista desordenada y hacer los ajustes para separar todo el grupo de botones:

{nav

list-style: none;
padding-left: 0;
margen: 20px 0;
}

El código para los márgenes es similar a la de relleno, pero el espacio efecto márgenes entre los elementos en lugar del espacio en el interior de cada elemento. Este ejemplo establece 20 píxeles de espacio de margen en la parte superior e inferior del conjunto del botón sin establecer márgenes horizontales.

Consejos y advertencias

• Añadir "float: right" o "float: left" a toda la lista desordenada si desea posicionar sus botones a la derecha oa la izquierda del encabezado del sitio.
• Cambiar "margen: 20px 0" a "margen: 20px auto" si desea centrar los botones horizontalmente en la página. Donde se ve "20px", se puede cambiar "20" a cualquier número que desea efectuar la separación vertical.