Mise en forme express

Vos requêtes concernant Mozilla Firefox, le navigateur Gecko alternatif, ne trouvèrent point de réponses lorsque vous cherchâtes ? Toute l'équipe Geckozone est prête à vous aider.

Modérateurs : Mori, myahoo, jpj, nico@nc

Répondre
Gloops
Tyrannosaurus Rex
Messages : 2635
Enregistré le : 22 mai 2006, 11:55

Mise en forme express

Message par Gloops » 26 juin 2020, 21:35

Bonjour tout le monde,
Cet après-midi, j'ai cherché les heures de mon car, il fallait que je descende à la cinquième ligne des horaires affichés, et en fonction de l'heure d'arrivée correspondante que je sache à quelle heure partir. Et là c'est un cas simplifié car je pars du début de la ligne (de car).
Au début de la ligne (de page web) correspondante, j'ai fait un clic droit, puis "examiner l'élément".
J'ai repéré l'élément "<TR>" (pour table row) correspondant à la ligne concernée, dans la colonne du milieu j'ai cliqué en face de "élément", puis j'ai tapé

Code : Tout sélectionner

background-color: yellow
Ma ligne de destination s'est alors affichée sur fond jaune, et ce n'était plus un problème que les noms de stations ne soient plus affichés lorsque je me suis déplacé vers la droite (très peu de sites se préoccupent de rendre la première colonne toujours visible, d'ailleurs j'avoue que moi-même j'ai oublié comment on fait).

À cet instant précis, Ma'ame Michu m'a dit "oh mais tout le monde ne sait pas faire ça !"

Alors, à l'intention des gens qui effectivement ne vont jamais aller taper "background-color: yellow" sur leur ligne d'arrivée, et encore moins faire la même chose avec une autre couleur pour leur ligne de départ, existe-t-il un moyen simple de mettre en évidence la ligne sélectionnée ?

Il y a bien mettre un scotch de couleur sur l'écran, mais ça va laisser des traces :)

Agent virtuel
Tyrannosaurus Rex
Messages : 2927
Enregistré le : 29 janv. 2018, 12:06

Re: Mise en forme express

Message par Agent virtuel » 26 juin 2020, 21:59


Gloops
Tyrannosaurus Rex
Messages : 2635
Enregistré le : 22 mai 2006, 11:55

Re: Mise en forme express

Message par Gloops » 26 juin 2020, 22:26

Nous voyons là qu'en rédigeant un mail il est possible de mettre en relief une partie du texte en intervenant sur le code HTML du mail. Cela pour les cas où on a besoin de mises en relief plus variées que juste le gras ou le souligné. On peut recourir à des balises dédiées comme mark (que le navigateur utilise automatiquement pour mettre en relief les résultats de recherche), strong pour un texte fort, em pour un texte mis en emphase, et comme j'y ai fait allusion b pour le gras, i pour l'italique, u pour le souligné.
Dans ma question je pars d'un site web tout prêt, avec les horaires d'une ligne de bus dessus. Et je cherche à mettre en relief une ligne de ces horaires. Si la ligne en question avait été affectée d'un style donné, j'aurais pu intervenir sur la feuille de style à l'aide de l'extension Stylus. Mais pour affecter un style à une ligne en fonction des résultats d'une recherche ou de la sélection dans une liste, je crains qu'il faille être le concepteur du site web. D'ailleurs, je compte bien trouver un petit moment pendant l'été pour travailler là-dessus.

Il serait intéressant que les sites web qui présentent des données en tableau réalisent ce travail, de façon à faciliter la lecture en mettant en relief les lignes visées.

L'objet du présent fil est de chercher à permettre au lecteur, utilisateur de Firefox, de mettre en relief une ligne, dans le cas où le concepteur du site web ne l'a pas fait.

Avatar du membre
lool_lauris
Animal mythique
Messages : 5238
Enregistré le : 14 mars 2008, 22:51

Re: Mise en forme express

Message par lool_lauris » 27 juin 2020, 00:24

Salut,
Gloops a écrit :
26 juin 2020, 21:35
... existe-t-il un moyen simple de mettre en évidence la ligne sélectionnée ?
Un simple triple clic !
En fait, cela dépend beaucoup du site en question. Le mieux serait de fournir un lien.
.
Soutenez le Libre !

Image

Agent virtuel
Tyrannosaurus Rex
Messages : 2927
Enregistré le : 29 janv. 2018, 12:06

Re: Mise en forme express

Message par Agent virtuel » 27 juin 2020, 05:48

Bonjour

Simplement cet ajout https://www.w3schools.com/tags/tag_mark.asp

Gloops
Tyrannosaurus Rex
Messages : 2635
Enregistré le : 22 mai 2006, 11:55

Re: Mise en forme express

Message par Gloops » 27 juin 2020, 22:54

lool_lauris a écrit :
27 juin 2020, 00:24
Salut,
Gloops a écrit :
26 juin 2020, 21:35
... existe-t-il un moyen simple de mettre en évidence la ligne sélectionnée ?
Un simple triple clic !
En fait, cela dépend beaucoup du site en question. Le mieux serait de fournir un lien.
La page que j'ai consultée l'autre jour était là :
http://le91.free.fr/transport/lign9104.htm
mais j'aimerais trouver une solution la plus passe-partout possible. Je me suis dit que quelqu'un avait pu avoir la même démarche, et pour la rendre généralisable proposer une extension.

Le triple-clic sélectionne la cellule où je le fais. Dans la même démarche je peux cliquer au début de la ligne et glisser vers la fin, de façon à sélectionner la ligne. Si il n'y a pas de réponse plus spécifique on se repliera là-dessus.
Modifié en dernier par Gloops le 27 juin 2020, 22:57, modifié 1 fois.

Gloops
Tyrannosaurus Rex
Messages : 2635
Enregistré le : 22 mai 2006, 11:55

Re: Mise en forme express

Message par Gloops » 27 juin 2020, 22:54

Agent virtuel a écrit :
27 juin 2020, 05:48
Bonjour

Simplement cet ajout https://www.w3schools.com/tags/tag_mark.asp
Il me semble avoir déjà répondu à ça.

Agent virtuel
Tyrannosaurus Rex
Messages : 2927
Enregistré le : 29 janv. 2018, 12:06

Re: Mise en forme express

Message par Agent virtuel » 28 juin 2020, 06:59

Bonjour
Gloops a écrit :
26 juin 2020, 21:35
existe-t-il un moyen simple de mettre en évidence la ligne sélectionnée ?
? Try it Yourself https://www.w3schools.com/css/css_table.asp

#customers tr:hover {background-color: #FFFF00;}

https://www.w3schools.com/colors/colors_names.asp

Essai
http://construireunsite.free.fr/essai28 ... dcolor.htm

Gloops
Tyrannosaurus Rex
Messages : 2635
Enregistré le : 22 mai 2006, 11:55

Re: Mise en forme express

Message par Gloops » 28 juin 2020, 10:12

Si on pouvait essayer de se concentrer un peu ? ;)
Je ne cherche pas à construire un site web, je cherche à aider les utilisateurs Firefox à lire les sites web existants.

Agent virtuel
Tyrannosaurus Rex
Messages : 2927
Enregistré le : 29 janv. 2018, 12:06

Re: Mise en forme express

Message par Agent virtuel » 28 juin 2020, 10:22

Gloops a écrit :
26 juin 2020, 22:26
L'objet du présent fil est de chercher à permettre au lecteur, utilisateur de Firefox, de mettre en relief une ligne, dans le cas où le concepteur du site web ne l'a pas fait.
?
Gloops a écrit :
26 juin 2020, 22:26
D'ailleurs, je compte bien trouver un petit moment pendant l'été pour travailler là-dessus.
Pour ma part les petits moments c'est l'hiver

Welcome Home http://fromspacestation.free.fr avec l'aide de https://www.w3schools.com

Vous souhaite une agréable journée ainsi qu'à @

Gloops
Tyrannosaurus Rex
Messages : 2635
Enregistré le : 22 mai 2006, 11:55

Re: Mise en forme express

Message par Gloops » 28 juin 2020, 12:38

Agent virtuel a écrit :
28 juin 2020, 06:59

#customers tr:hover {background-color: #FFFF00;}
Il y a quelque chose à retenir de ça.
Si l'extension Stylus est installée, l'utilisateur peut créer une feuille de style pour la page, et là-dedans insérer :

Code : Tout sélectionner

table tr:hover {background-color: #FFFF00;}
Ceci met sur fond jaune la ligne de tableau où se trouve le curseur de souris (si il y a lieu).

Si la page est zoomée au-delà de 120%, l'utilisation de ceci est réservée à quelqu'un qui, outre être capable d'ajouter une feuille de style, dispose d'un pavé tactile et sait bien s'en servir, puisqu'il faut être capable de déplacer la page vers le côté sans faire bouger le curseur de souris. Attention, si le curseur monte ou descend, le fond jaune suit, il faut donc une certaine concentration pour être sûr que la ligne coloriée est bien celle visée.

Si on trouve un autre moyen de déplacer la page vers le côté, verrouiller le pavé tactile peut éviter que le curseur ne bouge. On peut déplacer le curseur du clavier, mais attention quand on arrive au bout de la ligne.

La solution ne convient qu'à une partie de la cible, mais peut lui rendre service.
Modifié en dernier par Gloops le 28 juin 2020, 14:49, modifié 1 fois.

Gloops
Tyrannosaurus Rex
Messages : 2635
Enregistré le : 22 mai 2006, 11:55

Re: Mise en forme express

Message par Gloops » 28 juin 2020, 14:05

Bien sûr, pendant qu'on en est à la feuille de style, on peut mentionner le grand classique, les couleurs alternées :

Code : Tout sélectionner

tr:nth-child(3n){background-color:pink;}
tr:nth-child(3n+1){background-color:#ddffc0;}
L'avantage de faire ça du côté utilisateur (avec Stylus par exemple) est que ça permet de personnaliser davantage : un daltonien évitera de se reposer sur la distinction de couleurs qu'il confond. Techniquement il existe la possibilité pour un site web de proposer plusieurs jeux de couleurs, mais là il faut une boîte qui puisse mettre les moyens voulus sur la question.

Pendant que nous avons quelqu'un versé sur cet aspect, est-ce qu'on sait sélectionner en CSS une ligne d'après le contenu de sa première cellule ?

Répondre

Qui est en ligne

Utilisateurs parcourant ce forum : galoupia et 9 invités