Problème bouton CSS

Bonjour à tous,
Je débute en CSS.
A titre expérimental je suis parvenu à insérer grâce aux CSS des boutons crées dans Photoshop mais je rencontre un souci.
Le code que j'utilise (voir en bas du post) m'oblige à laisser un mot dans le HTML afin de créer le lien sur le bouton (et donc de pouvoir afficher les deux états, normal et survolé).
Je ne peux pas supprimer ce texte sinon le lien n'existe plus.
Or j'ai déjà inscrit un nom sur mes boutons dans Photoshop avec une police particulière.
Je me retrouve donc avec le texte du HTML en surimpression.

Ma question est :
Existe-t-il un moyen de masquer ce texte voire de le supprimer tout en conservant le lien ?
Faut-il que je change de code pour cela ? Et si oui lequel utiliser ?

Je vous remercie d'avance.

<div class="bouton">
<p>
<a href="#">Nom du bouton</a>
</p>
</div>

.bouton a {
display:block;
width:150px;
line-height:50px;
text-align:center;
vertical-align:middle;
background:url(images/bouton1.png) no-repeat;
color:white;
text-decoration:none;
}
.bouton a:hover {
background:url(images/bouton2.png) no-repeat;
}

Modifié par jpv56 (24 Aug 2009 - 09:46)

Salut !

Tu vas te faire engueuler pour le code non mis en forme :s

Tu as plusieurs méthodes, tu peux utiliser :

Ca va décaler ton texte et le mettre en dehors de la fenetre.

a{text-indent:-99999px;}

Ne pas mettre de texte du tout.

<a href="#"></a>

a{displa:block;width:largeur-de-ton-imagepx;height:hauteur-ton-imagepx;}

Cacher ton texte.

<a href="#"><span>texte du lien</span></a>

a span{visibility:hidden;}

PS: tu n'es pas obligé de mettre ton a dans un p ni dans une div.
Modifié par pfoofen (22 Aug 2009 - 13:03)

Bonjour,

il faut tout simplement mettre un image :

<a href="#"><img src="" alt="" /></a>

et utiliser js pour les effets de survol.

Les solutions qui consistent a décaler/ne pas mettre de texte/cacher sont tout ce qu'il y a de plus crade avec un mention spéciale pour la seconde.

Bonjour jpv56,

L'idée d'insérer une simple image, comme te l'a proposé bzh, sans oublier de la rendre accessible me semble correcte.

a écrit :
et utiliser js pour les effets de survol.

D'accord mais si l'internaute a décidé pour diverses raisons de ne pas activer Javascript ?
Modifié par jQz (22 Aug 2009 - 13:50)

Merci pfoofen ça marche nickel !
J'ai choisi de masquer le texte avec la balise span.

Peut-être que c'est moins propre qu'avec Java mais cette solution me convient parfaitement, je ne suis pas un pro !

Merci en tout cas pour vos réponses.

JPV56

C'était ce qu'il y avait de mieux à faire

jQz a écrit :

D'accord mais si l'internaute a décidé pour diverses raisons de ne pas activer Javascript ?

Il n'aura pas de rollover pour ces diverses raisons

Salut,

pfoofen a écrit :
C'était ce qu'il y avait de mieux à faire

C'est très discutable !

* Soit une image est porteuse d'une information (ce qui est bien le cas ici) auquel cas elle devrait se trouver dans le code html (élément IMG avec attribut alt qui va bien). L'effet de rollover est alors à faire en JavaScript et si ce dernier est désactivé cela n'est pas bien grave.

* Soit elle est purement décorative et elle devrait dans ce cas être dans le code css. L'effet de rollover est alors à faire grâce aux pseudo-classes :hover, :focus et :active.

L'ultime solution aurait été de mettre l'image de fond sans l'écriture et d'écrire le texte à l'aide de @font-face

pfoofen a écrit :
Cacher ton texte.

<a href="#"><span>texte du lien</span></a>

a span{visibility:hidden;}

Si tu avais lu l'article Remplacemet d'images : halte au display none, tu ne proposerais pas cette solution, pour des raisons liées à l'accessibilité.

Mon cher,

Il demande des solutions je lui en apporte...

Libre à lui de prendre la plus accessible

Il suffit de lire :

a écrit :
Existe-t-il un moyen de masquer ce texte voire de le supprimer

Modifié par pfoofen (23 Aug 2009 - 10:42)

Hello,

pfoofen a écrit :
Il demande des solutions je lui en apporte...

Oui, sauf qu'Alsacréations est dédié aux standards du web et à l'accessibilité. Du coup les "solutions" qui ne tiennent pas compte de l'un de ces aspects sont à oublier.

Bah vous n'avez qu'a autoriser que les admin et les modo à répondre aux problèmes dans ces cas là:)
Modifié par pfoofen (23 Aug 2009 - 11:59)

Ou alors espérer que ceux qui répondent seront sensibles à ces aspects et essaieront de tirer les autres vers le haut ?

Cependant j'pense qu'il est quand même bon d'apporter plusieurs solutions... faut pas être extrémiste non plus.
Là où vous n'apportez qu'une solution (le js) j'en apporte 4.
Il faut quand même laisser le choix au gens.

Mais je reste d'accord avec ton idée
Modifié par pfoofen (23 Aug 2009 - 12:10)

Hem... je pensais qu'en 2009 l'accessibilité était enfin rentrée dans les mœurs de tous les intégrateurs web et qu'il n'était plus nécessaire de polémiquer là-dessus. Par extension je ne pensais plus voir le terme d'extrémisme utilisé comme argument ! Est-ce extrémiste de vouloir que son contenu soit accessible aux non-voyants par exemple ?

Quoi qu'il en soit c'est le parti pris d'Alsa (contrairement peut-être à d'autres forums) et si tu proposes 4 solutions dont 3 posent des problèmes d'accessibilité il y a de fortes chances que quelqu'un te le fasse remarquer... à juste titre !

Oula je ne pensais pas créer tant de remous avec ce topic !
Je viens d'acheter le livre sur les CSS de monsieur le fondateur d'Alsacreations et effectivement ça cause beaucoup d'accessibilité. Quoi qu'il en soit pfoofen a parfaitement répondu à ma question... et hop j'en remets une couche

Je vais en remettre une couche aussi :

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

jpv56 a écrit :
Quoi qu'il en soit pfoofen a parfaitement répondu à ma question...

C'est plus que discutable, il t'as proposer une solution "macGiver" je dirais. Ca marche, mais ça ne tiens pas la route et ça ne fait absolument pas sérieux. Juste pour rire, essaye de désactiver les images de ta page web sans désactiver les styles CSS (ce qui se passerais si pour une raison x ou y l'image n'était pas disponible). Tu comprendra pourquoi cette solution est bancale.

La seule bonne solution, c'est d'avoir l'image dans le code HTML avec un texte alternatif qui va bien.

Pour ce qui est de la disponibilité de JavaScript (à ne pas confondre avec Java), comme l'effet de survol est une amélioration progressive (eg. : ne gène pas si indisponible), ce n'est pas un problème.

a écrit :
Y a des jours où je ne suis pas conciliante... Et il y a des jours tous les jours.

C'est parfaitement trouvé !
Ok je m'incline, je serai plus vigilant à l'avenir.
Et merci pour la leçon.

Si tu pouvais éditer ton premier message, ce serait super.