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

Un recurso muy til es disponer un men en una pgina, si no requerimos uno muy elaborado podemos resolverlo utilizando slo CSS y HTML (en otros casos se requiere adems de JavaScript).

Vamos a implementar uno muy sencillo que requiere agrupar en un div una serie de prrafos que contienen un hipervnculo cada uno.

Cuando la flecha del mouse se encuentra sobre el hipervnculo cambiamos el color del fondo y la letra del hipervnculo.
El problema resuelto es:

<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" 
type="text/css">
</head>
<body>
<div id="menu">
<p><a href="http://www.google.com">Google</a></p>
<p><a href="http://www.yahoo.com">Yahoo</a></p>
<p><a href="http://www.msn.com">Msn</a></p>
<p><a href="http://www.altavista.com">Altavista</a></p>
</div>
</body>
</html>

La hoja de estilo asociada a esta pgina es:

#menu {
  font-family: Arial;
}

#menu p {
  margin:0px;
  padding:0px;
}

#menu a {
  display: block;
  padding: 3px;
  width: 160px;
  background-color: #f7f8e8;
  border-bottom: 1px solid #eeeeee;
  text-align:center;
}

#menu a:link, #menu a:visited {
  color: #ff0000;
  text-decoration: none;
}

#menu a:hover {
  background-color: #336699;
  color: #ffffff;
}

Podemos decir que definimos un estilo por medio de un Id llamado menu. Definimos una regla para este Id:

  #menu {
  font-family: Arial;
}

La segunda regla:

#menu p {
  margin:0px;
  padding:0px;}

Estamos indicando que todos los prrafos contenidos en el estilo #menu deben tener cero en margin y padding.
Luego las anclas definidas dentro del estilo #menu definen las siguientes caractersticas:

#menu a {
  display: block;
  padding: 3px;
  width: 160px;
  background-color: #f7f8e8;
  border-bottom: 1px solid #eeeeee;
  text-align:center;
}

El valor block para la propiedad display permite que el ancla ocupe todo el espacio del prrafo, indistintamente del largo del hipervnculo. Otra propiedad nueva es width, esta fija el tamao mximo que puede tener el hipervnculo antes de provocar un salto de lnea.
Por ltimo inicializamos las pseudoclases:

#menu a:link, #menu a:visited {
  color: #ff0000;
  text-decoration: none;
}

#menu a:hover {
  background-color: #336699;
  color: #ffffff;
}

Estamos definiendo el mismo color de texto para los vnculos seleccionados como aquellos que no han sido seleccionados:

#menu a:link, #menu a:visited {
  color: #ff0000;

Por ltimo cambiamos el color de fondo de la opcin que tiene la flecha del mouse encima:

#menu a:hover {
  background-color: #336699;
 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion