Foros del Web - Ver Mensaje Individual

kseso? · #5 (**permalink**) 31/08/2009, 07:14

Quizás esto te sirva de guía

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title>Kseso? jugando con css</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
* {margin: 0; padding:0; outline: none; border: 0;}
body {background: #3333FF;}
#ejemplo {margin: 20px 0 0 20px;}
#ejemplo ul { }
#ejemplo ul li {display: block; list-style-type: none; width: 15em;}
 
#ejemplo ul li a {display: block; padding: 10px 5px; text-decoration: none;color:#cdcdcd; border: 1px solid #CCFFFF;}
#ejemplo ul li a.verde {background: #666600; color: #66FF00;}
#ejemplo ul li a.azul {background: #0000CC; color: #99CCFF; text-align: right;}
#ejemplo ul li a.gris {background: #330000; color:#cdcdcd; text-align: center;}
 
#ejemplo ul li a:hover {text-decoration: none; border: 1px solid #868686;}
#ejemplo ul li a:hover.verde {background: #66FF00; color: #666600;}
#ejemplo ul li a:hover.azul {background: #99CCFF;; color: #0000CC;}
#ejemplo ul li a:hover.gris {background: #cdcdcd; color: #330000;}
</style>
</head>
<body>
<div id="ejemplo">
<ul>
<li>
<a class="verde" href="#">Item verde</a>
</li>
<li>
<a class="gris" href="#">Item gris</a>
</li>
<li>
<a class="azul" href="#">Item azul</a>
</li>
</ul>
</div>
</body>
</html>

Como verás, he optado por diferenciar los elementos actuando sobre los enlaces ('a'). Se podría haber hecho sobre los li.

Un saludo