18041 sujets

Questions générales et questions de débutants

[RESOLU] Decallage lien css

Bonjour,

j'ai un petit souci aux niveau des mes liens.
Ils ont un decalage lorsque l'on passe dessus que je n'arrives pas a enlever.

si quelqu'un peut y jeter un oeil. Merci Smiley smile 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ceci est mon site</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
</head>

<body>
<div id="nav">
		<p>
		<a class="logo" href="index.html">// Architecture d'interieur</a>
		</p>
		<ul>
		<li><a href="index.html">// Contact</a></li>
		<li><a href="index.html">// A propos</a></li>
		<li><a href="index.html">// Images</a></li>
		<li><a href="index.html">// Design</a></li>
		<li><a href="index.html">// Architecture d'interieur</a></li>
</ul>
	</div>
</body>
</html>




html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
		margin:0;
		padding:0;
		font-size: 15px;
		}
body{ 
background:url(images/fond.gif);}






/*------------------------------ navigation top --------------------------*/
		/* generalité sur le bandeau*/
				#nav {
					width:910px;
					height:82px; 
					padding:0 0 0 0px; 
					margin:31px auto 0 auto;
					border-top: dashed  1px black; 
					border-bottom: dashed  1px black; 
				}
		/* deplacement logo */
				#nav p{
					float:left;
					color:#fff;
					margin: 31px 0 0 82px;
				
				}
		/* logo generalité */
				#nav a.logo{
					display:block;
					background:url(images/logo.jpg) /* no repeat */ scroll 0 0 transparent;
					height: 82px;
					width: 133px;
					text-indent: -9999px;
				}
		/* generalité lien */
				#nav li {
					float:right; 
					list-style:none;
					margin-left:15px;
					margin-right:15px;
					padding-top:63px;
			
					
				}
				#nav li a {
					text-decoration:none; 
					padding-top:63px; 
					color:#000;
					
					
				}
				#nav li a:hover{
					color:#333;
					border: 5px solid #fff;
					-moz-box-shadow: 1px 1px 12px #555; 
					-webkit-box-shadow: 1px 1px 12px #555; 
					box-shadow: 1px 1px 12px #555; 
				}

Modifié par scneom (27 May 2010 - 23:19)
Bonsoir.
Après un rapide coup d'oeil au code, j'imagine que le problème pourrait venir du border appliqué aux liens survolés.
Oui c'est ca Smiley smile
en fait je n'arrive pas a enlever ce decallage si ce n'est en enlevant les bordures :'(
Tu as deux solutions (évidentes, en tout cas) :
- soit tu appliques une bordure de même taille, mais transparente aux liens non-survolés
- soit tu déplaces tes liens de manière relative pour les centrer par rapport à leur position lorsqu'ils ne sont pas survolés
Merci de ta réponse Smiley lol
réponse évidente en effet (pour la première solution)..... stupide de pas y'avoir pensé.
Merci
Sujet clos
Aller à