Un très grand merci encore, Gatsu !! Tu m'avais déjà aidé précieusement il y a plusieurs mois (t'en souviens-tu ?) pour une question portant sur mon formulaire de contact ou sur une question concernant une mise en exposant dans le texte.
En ajoutant 'overlfow:hidden' à chacun de mes liens (je parlais des boutons W3C du bas, mais le problème était en fait présent pour les boutons du haut aussi : les boutons sociaux et les trois boutons d'agrément en haut à droite), le problème est bien réglé ! :-)
Je ne pouvais saisir le problème parce que si je fais mon code 'à l'ancienne', ligne par ligne, tout de moi-même ou presque, j'avais, pour cas précis, testé et plus ou moins appris une nouvelle technique.
Pour boutons W3C p. ex. (cela vaut pour tous les boutons précités en fait), il n'y a pas deux images, MAIS une seule (pour les boutons sociaux il n'y a pas quatre images, mais une seule, etc.), en vue d'alléger les temps de chargement bien évidemment.
Cette technique requérait entre autres que je procède à un positionnement de 'background' pour chaque image, ou plutôt pour chacun des boutons (placés dans une liste) et que pour chaque lien je crée un :
.classedulien
{
text-indent: -999em;
direction: ltr;
overflow: hidden;
}
Eh bien, je n'ai pas repéré le problème seul parce que je ne pensais plus à cette propriété 'text-indent' et si je n'y pensais plus c'est que je ne la comprenais pas.
Je ne la comprenais pas dans cette fonction. Pour moi il s'agit d'une propriété de texte, de retrait d'alinéa pour la première ligne d'un bloc de de texte, d'un paragraphe.
Sans cette propriété dans chaque lien de bouton, tout partait en couille pourtant.
EDITION : en relisant ta réponse, Gatsu, je pense que je comprends mieux. C'est que, tel que mon code est écrit, je devrais normalement voir du texte. J'ai par exemple :
Code :
- <li class="soce"><a class="yo" href="contact.php">Me contacter</a></li>
|
Si je pose une image de fond sur '<a>' comme je le fais, je devrais encore normalement devoir lire le texte puisqu'il s'agit bien d'une balise de texte. 'Text-indent' me permet donc de 'tricher' pour faire disparaître le texte en l'envoyant en Chine (à -9999).
Kapish. J'avais en fait déjà compris ça, mais ça a dû m'échapper en chemin. Par contre, est-ce propre comme technique ou est-ce plutôt du bricolage ?
En plus de régler mon problème, dont je ne maîtrise pas bien la question puisque 'text-indent' et cette technique de plusieurs boutons pour une seule image m'échappe en partie, tu m'apprends quelque chose : je n'utilisais que la valeur par défaut d''overflow' (c'est-à-dire 'visible', que je n'écrivais pas) et 'auto' si je voulais des barres de défilement (à l'époque, quand c'était encore chouette ;> ).
Je n'ai pas de texte qui dépasse puisque je règle bien mes 'width' ou 'height' sur 'auto' lorsqu'il le faut.
Donc là, sur l'ensemble de mon CSS, je n'ai qu'une ligne d'overflow, en l'occurrence cet 'hidden' que tu portes à ma connaissance !
Vraiment parce que j'aime comprendre, pour apprendre et retirer le max. de ce que l'on me dit :
comment pourrais-je maintenant faire pour qu'il n'y ait pas du tout de bordure autour de mes boutons lorsque j'ai cliqué dessus ? En effet, la longue et infinie bordure n'est plus, mais une petite bordure qui entoure les boutons est toujours présente.
Message édité par fnisse le 29-11-2012 à 13:43:20