28173 sujets

CSS et mise en forme, CSS3

[résolu] Lien : <button> ou <a> ?

Bonjour tout le monde,

Deux questions :

1. D'un point de vue référencement, sémantique et mise en page css, quel est le mieux :

<button onclick="window.open('mon-lien.htm')">nom du bouton</button>


ou alors :

<a href="mon-lien.htm">nom du bouton</a>


2. Vu que j'imagine que la solution 2 est la meilleure, maintenant comment faire en CSS pour remplacer le texte du lien <a>...</a> par une image en background css ? (et non pas une image en dur directement) ?

Le code suivant serait-il valide ?

<a href="mon-lien.htm" class="style-du-lien"><span>nom du bouton</span></a>

.style-du-lien span {
   display: none;
}
.style-du-lien {
   background: transparent url(/images/mon-image.gif) no-repeat center center;
   width: 50px;
   height: 20px
}


Merci par avance Smiley cligne
Modifié par aurapp (09 Oct 2007 - 16:50)
Hello,

La version 2 est bien sur de loin la meilleure Smiley cligne

Tu ne peux définir les dimensions que des élements en display:block, à rajouter donc à ta définition du lien Smiley smile

Sinon en enlevant le span inutile et en ajoutant à la place un letter-spacing:-1000em dans le style du lien, ça peut passer aussi. Ou un text-indent:-1000em;
Modifié par Tymlis (09 Oct 2007 - 17:01)
Bonjour,

Qu'elle raison y-a t-il à ne pas mettre une image html avec le alt qui va bien dans un lien Smiley rolleyes ?
@Tymlis : merci Smiley smile mais le coup du text-indent ou letter-spacing, marche pas... le code final est plus et fonctionne bien, et valide W3C !

@Igor : rien de mal, juste une contrainte pour moi car j'ai plusieurs styles sur mon site, dont l'image du lien fait partie...

Au final, la solution :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<style type="text/css">
#style-du-lien {
	display: block;
	background: transparent url(image.png) no-repeat center center;
	width: 30px;
	height: 73px
}

#style-du-lien span {
	display: none;
}
	</style>
	<title>Test</title>
</head>

<body>

<div id="container">
	<a href="mon-lien.htm" id="style-du-lien"><span>nom du bouton</span></a>
</div>

</body>
</html>
Bonjour,
Petite réflexion : Display none et moteurs de recherches ne sont pas réputés pour faire bon ménage
Avec les 2 solutions de Tymlis, ton texte est considéré comme visible bien que caché pour l'internaute
Sujet clos
Aller à