Problemas con CSS
(1/1)
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:
Código:
<!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:
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:
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/
Navegación