5328 sujets

Sémantique web et HTML

MERCI DE M'AIDER

Je chercher à effacer "Event Category : "
voir image jointe
soit en l'effacent tout simplement, soit en le colorant en bleu du fond, soit mieux (pour moi) mettre à la place "Mots Clés :"
upload/1620728116-83040-capturedaeacran2021-05-11aa11.png

le code de la feuille est le suivant
voir image jointe
upload/1620728754-83040-capturedaeacran2021-05-11aa11.png

le code fait bien changer la couleur de (tout) "Event Category : Conférences" en vert
avec ce code
code
.page-header .author-info > :last-child, .page-header > :last-child, .page-title {
margin-bottom: 0;
color: #ff0;
}
code


Avez vous une solution

MERCI d'avoir lu jusque là

Michel
Modérateur
Bonjour ,

sans javascript , comme tu as le texte à garder dans une balise , une vielle méthode avec text-indent et float + un pseudo devrait convenir:

exemple:
<p class="event">Event Categories : <span>Cat Event</span>.</p>

.event {
  text-indent:-100vw; /* mettre une valeur suffisante pour éjecter les textes et contenu 'inline' hors de l'écran sans créer de barre de défilement)
}
.event span, .event:before {
  float:left;
  text-indent:0;/*reset !*/
}
.event:before {
  content:'Mots Clés :';/* texte visible au lieu du texte caché  mais toujours présent*/
  font-weight:bold;
}


edit demo avec l'astuce de centrage des textes du titre https://codepen.io/gc-nomade/pen/PopPLjL
Modifié par gcyrillus (11 May 2021 - 20:56)
Avec le code
.page-header .author-info > :last-child, .page-header > :last-child, .page-title {
text-indent: -2000px;
}

j'ai bien réussi à faire partir TRES loin sur la gauche de l'écran

MAIS


avec l'ajout du code

.page-header .author-info > :last-child, .page-header > :last-child, .page-title span,
.page-header .author-info > :last-child, .page-header > :last-child, .page-title :before {
float: left;
text-indent: 0;
}

et

.page-header .author-info > :last-child, .page-header > :last-child, .page-title:before {
content: 'Mots Clés :';
font-weight: bold;
}


J'obtiens cela

upload/1620762615-83040-capturedaeacran2021-05-11aa21.png

le résultat n'est pas conforme à ce que je recherche
soit
"Mot clé : Conférence"

NB pas de pb pour les "s"

https://www.ccefr.fr/event_category/conference/


Rappel de la feuille de style voir les images du message précédent

++++++++++++++++++++++++++++++
QUESTION 1
Est ce que remplacer dans votre code
.envent
par
.page-header .author-info > :last-child, .page-header > :last-child, .page-title
est conforme à votre idée ? instruction ?
+++++++++++++++++++++++++++++
QUESTION 2
Comment avoir "Mot clé :" AVANT "Conférence" ?
Comment effacer ou faire sortir de l'écran "Event Category :" ... qui s'est ajouté
++++++++++++++++++++++++++++
je pense que la valeur "Conférence" existe et est mis à jour au lancement de la page
+++++++++++++++++++++++++++++


MERCI de votre aide

je sais JUSTE recopier ce que vous m'envoyez
... je suis DEBUTANT
MAIS
je sais passer des heures à faire des essais
.. et rendre compte

MERCI de votre aide
Modérateur
Il y a apparement des conflits avec vos régles.

retirez les styles que vous avez ajouté et essayez ceux-ci pour les appliquer uniquement dans cette page https://www.ccefr.fr/event_category/conference/ :

.tax-ecwd_event_category.term-conference header .page-title {
  text-indent:-100vw;
  width:100%;
}
.tax-ecwd_event_category.term-conference header .page-title:before,
.tax-ecwd_event_category.term-conference header .page-title span {
  float:left;
  text-indent:0;
}
.tax-ecwd_event_category.term-conference header .page-title:before {
  content:'Mots Clés : ';
}

Wordpress génere different class sur body en fonction de la page affichée (voir le code source dans le navigatuer pour les trouver).

Cdt
Avec toutes mes excuses

je viens de mettre le code suivant

.page-title {
text-indent:-100vw;
}
.page-title span, .event:before {
float:left;
text-indent:0;
}
.page-title :before {
content:'Mots Clés : ';
font-weight:bold;
}


ET

TOUT fonctionne comme voulu

https://www.ccefr.fr/event_category/conference/

upload/1620801523-83040-capturedaeacran2021-05-12aa08.png

MERCI BEAUCOUP

NB

je vais essayer votre deuxième prescription et vous rappelle pour vous donner le résultat
Meilleure solution
Pour gcyrillus

Pour votre deuxième prescription

.tax-ecwd_event_category.term-conference header .page-title {
text-indent:-100vw;
width:100%;
}
.tax-ecwd_event_category.term-conference header .page-title:before,
.tax-ecwd_event_category.term-conference header .page-title span {
float:left;
text-indent:0;
}
.tax-ecwd_event_category.term-conference header .page-title:before {
content:'Mots Clés : ';
}


j'obtiens... seulement "Conférence"

upload/1620802014-83040-capturedaeacran2021-05-12aa08.png

https://ccefr.fr/sitestravail/WP02/category/conference/


MERCI

Pouvez vous prendre un peu de temps pour m'expliquer votre première prescription de code.. celle qui a résolu MON problème... Que je ne reste pas l'idiot de service

j'ai compris ... seulement... le report à gauche, hors champ de vision, du contenu de "page-title"

ET

Pourquoi votre deuxième prescription.. ne fonctionne PAS


MERCI pour votre implication et de votre compétence

Michel BOUDRY
Modérateur
Bonjour,

text-indent a un effet sur tout le texte et élément en ligne contenu dans son conteneur. En utilisant une valeur importante , son utilisation première est détournée. C'est comme cela que votre texte est masqué.

Pour que text-indent n'ai pas d'effet sur le span et le pseudo, tout deux des boite en ligne, float modifie leur interaction dans le flux. Enfin un réinitialisation à 0 du text-indent sur ces élément permet d'afficher leur contenu texte.

Quant à la question pourquoi l'un fonctionne et pas l'autre, cela vient du poids des sélecteur et de l'endroit ou vos tentatives ont été ajoutées. Notion à connaitre à propos de la priorité des sélecteurs : https://www.zonecss.fr/cours-css/poids-des-selecteurs-css.html / https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

complément a propos des sélecteurs https://forum.alsacreations.com/topic-1-63161-1-poids-des-selecteurs.html#p430620 avec un complément sur les selecteur :is() et :where() pour prendre un peu d'avance et maltraiter !important https://re7net.com/article/le-selecteur-is
Modifié par gcyrillus (19 Jun 2021 - 21:23)