Temas > Programacion > Css > Creacion de un menu horizontal con CSS
Julio

Creación de un menú horizontal con una lista
Otro estilo de menú muy común es donde las opciones se encuentran una al
lado de otra.
Veamos el código para la implementación de un menú horizontal:
<?php //esto no va
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<ul id="menuhorizontal">
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.msn.com">Msn</a></li>
<li><a href="http://www.altavista.com">Altavista</a></li>
</ul>
</body>
</html>
?>//esto no va
El archivo de estilos es:
<?php //esto no va
#menuhorizontal {
  float:left;
  width:100%;
  padding:0px;
  margin:0px;
  list-style-type:none;
}
#menuhorizontal a {
  float:left;
  width:100px;
  text-decoration:none;
  text-align:center;
  color:#ff0000;
  background-color:#f7f8e8;
  padding:3px 5px;
  border-right:1px solid white;
}
#menuhorizontal a:hover {
  background-color:#336699;
}
#menuhorizontal li {
  display:inline;
}
?>//esto no va
Como queremos que se localice a la izquierda inicializamos la propiedad
float con el valor left, tanto para el id menuhorizontal como para la marca
a que se encuentra en el id menuhorizontal.
Fijamos la propiedad width del id menuhorizontal con el valor de 100% para
que ocupe toda la línea. El ancho de cada opción es de 100px que lo
indicamos en la propiedad width de la marca a.
Cuando inicializamos la propiedad padding con:
        padding:3px 5px;
estamos fijando una separación de 3 pixeles en la parte superior e
inferior y 5 pixeles a izquierda y derecha.
Separamos cada opción por una línea blanca de un pixel:
  border-right:1px solid white;
Otra forma de expresar los colores es utilizar una serie de nombres
predefinidos (white, red, green, blue, etc.) de todos modos, lo más seguro
para que entiendan todos los navegadores, es indicando los valores de
rojo,verde y azul como hemos venido trabajando.
Luego con:
<?php //esto no va
#menuhorizontal li {
  display:inline;
}
?>//esto no va
Indicamos que todos los list item (li) se muestren en la misma línea, ya
que por defecto este tipo de marca indica que luego de mostrar un item de
la lista el siguiente es abajo. Fácilmente esta propiedad la podemos
entender si inicializamos la marca p (párrafo) con el siguiente valor:
<?php //esto no va
p{
  display:inline;
}
?>//esto no va
Luego si en la página HTML imprimimos dos párrafos, los mismos deberían
aparecer en la misma línea.













¿Has olviado tu contraseña?

Pulsa aquí para registrate




Google




LunMarMieJueVieSabDom
    123
45678910
11121314151617
181920 21222324
252627282930 

Jueves 21 de Noviembre 2024
Semana 47

..............................................................................................................................................................................................................................................
(Contacto)..
Esta web utiliza cookies para obtener datos estadísticos de la navegación de sus usuarios. Política de privacidad y Aviso legal
Rechazar    Aceptar