Problemas con CSS

BeLGaRioN · 27 Mayo 2010, 22:05 PM

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:

Código [Seleccionar]

<!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:

Código [Seleccionar]

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;
}

Red Mx · 28 Mayo 2010, 15:31 PM

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/

Test Foro de elhacker.net SMF 2.1

Problemas con CSS

BeLGaRioN

Red Mx