18078 sujets

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

Roll-Over en une seule image

Bonjour à tous.

J'ai récemment découvert votre site, ainsi que le potentiel incroyable du CSS. Je suis un de ceux qui a débuté en conception de sites avec des tableaux... et jusqu'à aujourd'hui, je n'avais pas réaliser que c'était mal.

Alors voila, j'ai repris votre tutoriel sur les roll-over en une seule image et j'ai un petit probleme. Apparemment, j'ai fait une erreur en quelque part; quelqu'un pourrait me dire ce qui fait défaut?

Initialement, je croyais qu'il y avait une hauteur minimale pour l'image, mais ensuite je me suis aperçu qu'avec FireFox, rien ne s'affiche tout simplement.

Code XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>CSS Test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Language" content="fr" />
		
		<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	</head>
	
	<body>
	<ul id="menu">
		<li><a href="#"></a></li>
	</ul>
	</body>
</html>


CSS
/* CSS Document */

ul#menu
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#menu li
{
	margin: 0 0 0 0 ;
	padding: 0 ;
	margin: 5px;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

ul#menu li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 80px ;
	line-height: 15px ;

	text-decoration: none ;
	background: url(fb.png) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}

ul#menu li a:hover
{
	background: url(fb.png) no-repeat 0 -15px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}


j'ai tout simplement repris votre code pour tester... je n'y comprends rien. voici l'exemple en ligne http://www.frederikbeaudry.com/tests/1imgrollover.php

Merci

Frédérik Beaudry
Modifié par kirederf (22 Apr 2006 - 19:54)
Bonjour,

Il manque simplement un espace insécable &nbsp; ou un mot quelconque à l'intérieur de ta balise <a> pour que l'image s'affiche comme il se doit Smiley cligne
Modifié par Freedom_09 (22 Apr 2006 - 19:46)
Pour préciser, le problème est que le code suivant :
ul#menu li a {
	display: block;
	width: 80px;
	line-height: 15px;
}

Donne bien une largeur à l'élément a visé, mais ne donne une hauteur qu'au texte. S'il n'y a pas de texte, l'élément fera 0px de hauteur. Donc, deux solutions :
– soit on rajoute du texte (un espace insécable suffit) ;
– soit on précise height: 15px; plutôt que line-height: 15px;, ce qui donne une hauteur à l'élément a qu'il soit vide ou non.

Je préfère la deuxième solution au rajout d'un espace insécable (même si ça ne change pas grand chose), mais les deux se valent.
Modérateur
bonjour,
et si je peut me permettre d'intervenir, le line-height peut-etre necessaire pour que IE , dimensionne correctement cette balise en hauteur ...
++
Sujet clos
Aller à