Búsqueda personalizada
 
 
 
 
Creación de un menú vertical configurando las pseudoclases
 

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:

 

<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>

El archivo de estilos es:

#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;
}

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 lnea. El ancho de cada opcin 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 separacin de 3 pixeles en la parte superior e inferior y 5 pixeles a izquierda y derecha.
Separamos cada opcin por una lnea 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 ms seguro para que entiendan todos los navegadores, es indicando los valores de rojo,verde y azul como hemos venido trabajando.
Luego con:

#menuhorizontal li {
  display:inline;
}

Indicamos que todos los list item (li) se muestren en la misma lnea, ya que por defecto este tipo de marca indica que luego de mostrar un item de la lista el siguiente es abajo. Fcilmente esta propiedad la podemos entender si inicializamos la marca p (prrafo) con el siguiente valor:

p {
  display:inline;
}

Luego si en la pgina HTML imprimimos dos prrafos, los mismos deberan aparecer en la misma lnea.

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion