5568 sujets

Sémantique web et HTML

[Résolu] Decalages dans ma liste de liens en-ligne (a:hover bold)

Dans ma liste de liens, j'ai utilise des <a> pour leur comportement inline, mais lorsque la souris passe sur le lien, la mise en forme "gras" provoque un léger décalage vers la droite (qui peut devenir un clignotement en bordure droite car le texte passe a la ligne suivante !).

J'ai tenté de tripoter les margin, padding et compagnie, mais le décalage subsiste Smiley decu . Et comme on ne peut pas definir une largeur pour les éléments inline, je suis un peu sec.

Je sais qu'il y a une possibilité de faire une définition de liste en ul/li + display:online, mais ça va alourdir le code. Utiliser les <a> directement me semblait sémantiquement plus adapté.

Auriez-vous des conseils ?

EDIT : page accessible ici

Ci-dessous mon code :
<!DOCTYPE html>
<html lang="ja">
<head>
	<title>Liste Marque</title>
	<meta charset="utf-8">
	<link rel="stylesheet" href="list.css">
	<!--[if lt IE 9]>
	<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>

<body>

	<!-- Barre Filtre -->
	<nav>
		<a href="#" class="all">ALL</a>
		<a href="#" class="AAA">A</a>
		<a href="#" class="BBB">B</a>
		<a href="#" class="ZZZ">Z</a>
		<a href="#" class="etc">&#65290;</a>
	</nav>

	<!-- Liste -->
	<div id="list">
		
		<!-- Autres -->
		<div id="etc" class="letter">
			<h2>&#65290;</h2>
		</div>
		
		<!-- A -->
		<div id="AAA" class="letter">
			<h2>A</h2>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000003249/">ALTEA<br /><span>altea</span></a>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000003020/">AQUASCUTUM<br /><span>aqua</span></a>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000000511/">ARMANI<br /><span>armani</span></a>
		</div>
		
		<!-- B -->
		<div id="BBB" class="letter">
			<h2>B</h2>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000001834/">BALENCIAGA<br /><span>balen</span></a>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000003009/">BALLANTYNE<br /><span>ballan</span></a>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000003158/">BALLY<br /><span>bally</span></a>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000002640/">BARBA<br /><span>barba</span></a>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/j-39674/">BELVEST<br /><span>belv</span></a>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000003063/">BOGLIOLI<br /><span>bog</span></a>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000003100/">Borsalino<br /><span>borsa</span></a>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000000508/">BOTTEGA VENETA<br /><span>bottega</span></a>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000003338/">BOTTI<br /><span>botti</span></a>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000002458/">BRIONI<br /><span>brioni</span></a>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000002278/">BRUNELLO CUCINELLI<br /><span>BC</span></a>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000003094/">BURBERRY<br /><span>brb</span></a>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000003229/">BVLGARI<br /><span>bulg</span></a>
		</div>
		
		<!-- Z -->
		<div id="ZZZ" class="letter">
			<h2>Z</h2>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000003248/">ZANONE<br /><span>zanone</span></a>
			<a target="_top" href="http://item.rakuten.co.jp/s-specchio/c/0000003267/">ZILLI<br /><span>zilli</span></a>
		</div>
	
	</div><!-- list -->

</body>
</html>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

html {
	width: 100%;
}

/* Navi */
nav {
	width: 100%;
	position: fixed;
	top: 0px;
	display: block;
	background-color: #105588;
	padding: 10px;
}

nav a {
	padding: 0px 5px;
	font-size: 20px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
}

nav a:hover {
	background-color: #FFFFFF;
	color: #000000;
}

/* Liste */
h2 {
	clear: both;
	margin-bottom: 20px;
	border-bottom: solid;
	border-bottom-width: thin;
	border-bottom-color: #CCCCCC;
	text-align: center;
	font-size: 26px;
	font-weight: bold;
}

.letter {
	margin-bottom: 150px;
}

/* Liens Marques */
#list {
	margin-top: 50px;
}

#list a {
	float: left;
	margin: 0px 20px 20px;
	font-size: 15px;
	color: #000000;
	text-decoration: none;
}

#list a:hover {
	font-weight: bold;
}

#list a:visited {
	color: #000000;
}

#list a span {
	font-size: 10px;
}

Modifié par Gmilano (07 Sep 2012 - 10:21)
Salut, tu utilises <a> pour sa propriété inline et tu lui colle float:left; donc ça revient au même, si ton <a> se comporte avec float, mets lui un display:block et une taille (120px par ex) comme ça plus d'effet de décalage
Pour le float, je sais que c'est moche. Théoriquement ça aurait du marcher sans, mais le <br> m'a pourri la vie : les <a> se suivaient bien mais sans annuler l'effet du <br> Smiley bawling .

en te lisant, je ne pensais pas que ça marcherait, mais si lol. Je pensais que le display changeait juste le comportement et non la nature (donc <a> restait un élément inline et ne pouvait être dimensionné).

Merci pour le coup de pouce Smiley ravi
Sujet clos
Aller à