Problemas con CSS

Iniciado por BeLGaRioN, 27 Mayo 2010, 22:05 PM

0 Miembros y 1 Visitante están viendo este tema.

BeLGaRioN

Hola. El tema es que estoy teniendo problemas para llevar a la práctica lo que quiero hacer. Estoy haciendo una página web con html y css y bueno, digamos que mi idea era hacer un menú horizontal que tuviera varias opciones y esas opciones estuvieran separadas por una barra, hasta ahí todo bien, pero al parecer queda un espacio entre "Inicio" y "Contacto" de manera que cuando pongo el cursor encima, queda un espacio sin iluminar de negro y le he estado dando vueltas, sé cual es el problema, pero no sé como solucionarlo, así que recurro a la comunidad para ver si me echais un cable. A continuación dejo el código html y el código css, si no quereis perder el tiempo, tengo la web subida a http://deseos.ws y ahí podéis ver claramente cual es el problema.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
   <head>
      <meta http-equiv= "Content-Type" content="text/html;charset= ISO-8859-1"/>
  <link href="estilo.css" rel="stylesheet" type="text/css" />
      <title>BeLGaRioN</title>
   </head>
   <body id="inicio">
      <!--parte visible de la página-->
      <div id="envoltorio">
         <div id="encabezado">
<h1>BELGARION</h1>
         </div>
<!--fin de encabezado-->
         <div id="navegacion">
<a href="index.html" title="Inicio">Inicio</a>
<a href="contacto.html" title="Contacto con el webmaster">Contacto</a>
         </div>
<!--fin de navegacion-->
         <div id="areatexto">
</div>
<!--fin de areatexto-->
      </div>
  <!--fin de envoltorio-->
   </body>
</html>


CSS:
body
{
}

#envoltorio
{
width: 80%;
margin-right:auto;
margin-left:auto;
}

#encabezado
{
color: white;
background-color: black;
background-image: url("header.png");
background-repeat: repeat-x;
font-family: Impact, fantasy;
text-align: center;
padding: 5px;
}

#navegacion
{
background-image: url("links_bg.png");
background-repeat: repeat-x;
border: 1px solid #696969;
padding: 5px;
}

#navegacion a:link
{
color: #333;
border-right: 1px solid #696969;
padding: 6px;
}

#navegacion a:hover
{
text-decoration:none;
background-color: black;
color: white;
border-right: 1px solid #696969;
padding: 6px;
}
Comunidad hispana dedicada a la Plataforma Steam | http://www.plataformasteam.com

Red Mx

Agregando  padding-left: 0px;   se correigo en parte.



Pero tienes que hacer tu menu con listas precisamente para tener mas orden y evitar errores de este tipo:

http://www.cristalab.com/tutoriales/crear-menus-de-navegacion-en-css-usando-listas-c130l/
Desarrollar Malware Es Causa De Cancer...