Foros del Web - Ver Mensaje Individual

kseso? · #15 (**permalink**) 08/07/2009, 10:23

Bueno trevol.
Lo prometido es deuda.
Aquí tienes los botones cuadrados alineados horizontalmente, con separación entre ellos, y cada uno con su color:

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; border:0; outline:none; position: relative;}
ul#navlist {
margin-left: 50px;
padding-left:150px ;
}
 
#navlist li  {
display:table;
float:left;
height:8em;
list-style-type:none;
margin:15px;
width:8em;
}
 
#navlist a {
display:table-cell;
height:100%;
position:relative;
text-align:center;
vertical-align:middle;
text-decoration: none;
color: #444;
border: 1px inset #660;
}
 
#navlist a:link.uno {background: #63f;}
#navlist a:link.dos {background: #93f;}
#navlist a:link.tres {background: #f3f;}
#navlist a:link.cuatro {background: #39f;}
#navlist a:link.cinco {background: #c9f;}
 
#navlist a:hover {
color:#cdcdcd;
border: 1px outset #69f;
}
 
#navlist a:hover.uno {background: #600;}
#navlist a:hover.dos {background: #900;}
#navlist a:hover.tres {background: #f00;}
#navlist a:hover.cuatro {background: #360;}
#navlist a:hover.cinco {background: #c60;}
</style>
</head>
<body>
<div id="navcontainer">
<ul id="navlist">
<li><a class="uno" href="#">Item one</a></li>
<li><a class="dos" href="#">Item two</a></li>
<li><a class="tres" href="#">Item three</a></li>
<li><a class="cuatro" href="#">Item four</a></li>
<li><a class="cinco" href="#">Item five</a></li>
</ul>
</div>
</body>
</html>