que tal, estoy haciendo una porcion de codigo, es un menu <UL> <LI>.....
se ve asi:
el rectangulo rojo es el <UL>
cada rectangulo azul es el <A> dentro del <LI>
esto que hise, (segun yo) fue casi un hack...por que no podia especificar ancho y alto del <a> por ser inline....asi que me ayude del padding..
la informacion es un ejemplo, el caso es que, ocurre un espaciado entre rectangulo y rectangulo que no he podido identificar...
codigo:
es un codigo simple, ul-li-a-hover
Código:
<!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" xml:lang="es">
<head>
<title>tile</title>
<style type="text/css">
body{
background:#000;
}
#menu {
/*display:inline;*/
/*background: #006699 url(punto.jpg) left repeat-y;*/
width: auto;
height: 100%;
margin:0px;
padding:0px;
}
#menu ul{
margin:0px;
padding:20px 0px 20px 0px;
/*height:80px;*/
border: 1px solid red;
}
#menu li{
display:inline;
/*height:100px;*/
font:14px "Lucida Sans";
/*margin:0px;
padding:0px;
vertical-align:top;*/
}
#menu li a{
/* line-height:100px;*/
/*display:block;
width:100px;
height:50px;*/
color:#000;
text-decoration:none;
margin:0px;
padding:20px 10px 20px 10px;
background-color:#315584;
/*line-height:60px;*/
}
#menu li a:hover{
background-color:#fff;
}
</style>
<script type="text/javascript" src="embeddedcontent.js" defer="defer"></script>
</head>
<body>
<div id="divDios">
<div id="menu">
<ul>
<li><a href="that.html">Nuestra Compañia</a></li>
<li><a href="this.html">Nuestro Datacenter</a></li>
<li><a href="that.html">Planes Hosting</a></li>
<li><a href="theOther.html">Planes Reseller</a></li>
<li><a href="theOther.html">Registro de Dominios</a></li>
</ul>
</div>
</div>
</body>
</html>
cuaquier ayuda, sera bienvenida, gracias.