28120 sujets

CSS et mise en forme, CSS3

Colle CSS : etendre la zone cliquable

<div><a href="#" title="Remove the tag"><img src="close.gif" alt="full list" /></a>tag</div>


Voila un peu pret mon html. J'aimerais trouver un moyen pour que le texte/tag soit dans la zone de click sans qu'il soit dans le <a>.
La subtilité est que le nom du tag a une longeur variable..
Bah heu… soit j'ai pas bien compris le problème, soit je vois pas bien la colle. Smiley confus 
div {position:relative}
a {position:absolute; width:100%; height:100%}
Et il y a une raison pour laquelle on voudrait faire des liens non accessibles, portant uniquement (au niveau du code HTML) sur des images sans texte alternatif, et n'englobant pas l'intitulé qui les suit?
Là, ça me dépasse...
Florent V. a écrit :
Et il y a une raison pour laquelle on voudrait faire des liens non accessibles, portant uniquement (au niveau du code HTML) sur des images sans texte alternatif, et n'englobant pas l'intitulé qui les suit?
Là, ça me dépasse...


C'est un oubli... J'ai rajouté sur l'exemple le type de contenu alternatif que je compte mettre et qui serait a terme généré contextuellement

Je rappel que l'idée est d'enlever le tag de la selection courante.

Et je trouve ça logique, un peu tordu mais logique, de pas vouloir qu'il y ait pas le lien sur le tag dans l'html alors que justement quand on va cliquer dessus, on aura la liste sans le tag.

Avec la mise en page CSS on pourra comprendre plus facilement et alors mettre le lien sur la totalité de la zone rendra juste le systeme plus pratique (surtout vu la taille de l'image)
Hello,

En passant, je signale que j'ai supprimé ta signature en application de la règle 17. Smiley cligne

Roger a écrit :
Et je trouve ça logique, un peu tordu mais logique, de pas vouloir qu'il y ait pas le lien sur le tag dans l'html alors que justement quand on va cliquer dessus, on aura la liste sans le tag.

Pas bien compris là... Smiley sweatdrop

Sinon, la technique indiquée par Benjamin est correcte mais a ses limites:
- ça ne marchera à priori pas correctement si le «référent» positionné en relatif est un élément de type en-ligne (du moins en affichage de type en-ligne);
- même avec un élément en display: block, on aura sans doute du mal à appliquer un height: 100% sur le lien si l'élément référent n'a pas de hauteur déterminée.
Roger a écrit :

Et je trouve ça logique, un peu tordu mais logique, de pas vouloir qu'il y ait pas le lien sur le tag dans l'html alors que justement quand on va cliquer dessus, on aura la liste sans le tag.


La "logique" ergonomique (ainsi que l'accessiblité minimale) consiste plutôt à avoir des libellés de liens désignant explicitement l'action qui va être accomplie, c'est à dire non pas "remove the tag", mais "remove tag X"...

Et une autre forme de logique consiste à ne pas faire dépendre un interface fonctionnel d'une couche de présentation optionnelle Smiley cligne .
Laurent Denis a écrit :


La "logique" ergonomique (ainsi que l'accessiblité minimale) consiste plutôt à avoir des libellés de liens désignant explicitement l'action qui va être accomplie, c'est à dire non pas "remove the tag", mais "remove tag X"...

Et une autre forme de logique consiste à ne pas faire dépendre un interface fonctionnel d'une couche de présentation optionnelle Smiley cligne .


- Je suis d'accord. Je vais le changer.

- Toujours d'accord mais je ne peux qu'influencer la version sans css/javascript tant que la version 'rich' reste la même, je ne suis pas le patron Smiley cligne
Il faut prendre aussi en considération que l'interface au complet est relativement complexe et la concision devient un facteur d'ergonomie important. Afficher seulement un picto et un mot est un bon moyen a mon humble avis de gagner en clarté.

Florent V. a écrit :
En passant, je signale que j'ai supprimé ta signature


Désolé, il y a quelques temps cette regle n'était pas encore en vigueur Smiley confused
Modifié par Roger (29 Oct 2007 - 11:44)
Sujet clos
Aller à