[Débutant] Récupérer une ID en vue d'utilisation dans une feuille de style CSS

Bonjour,

Je vous prie tout d'abord d'accepter mes excuses si je ne poste pas au bon endroit.

Voici mon problème.

Je travaille ces derniers temps avec un logiciel de wiki et j'ai quelques soucis pour masquer certaines parties indésirables, notamment lors de l'export vers un fichier .pdf.

Dans le code source de ma page, j'ai ceci :

Code:

---

1 2 3

<h1 id="title-text" class="with-breadcrumbs"> <a href="/outils/xxxxx/display/MONESPACE/Mon+titre"></a> </h1>

---

Ce que je désire, c'est récupérer l'ID de "title-text" pour pouvoir lui appliquer un style en CSS, sachant que "Mon+titre" est le seul élément qui peut me permettre de créer des ID distinctes.

J'ai déjà essayé diverses syntaxe, mais sans succès.

Pouvez-vous m'aider ?

Merci.

Bonjour,
en récupérant une information du A tu ne pourra pas remonter au H1 parent, cascade seulement, mais tu peux toujours détourner en stylant le A en récupérant la fin de son HREF.
exemple de CSS

Code:

---

1 2 3 4 5

h1 a[href$="Mon+titre"]{ font-size:2px; font-weight:normal; color:red; }

---

avec ton code

Code:

---

1 2 3

<h1 id="title-text" class="with-breadcrumbs"> <a href="/outils/xxxxx/display/MONESPACE/Mon+titre">Le lien</a> </h1>

---

Bonsoir,

Merci tout d'abord de t'intéresser à mon problème.

J'ai essayé ta solution, visiblement, ce n'est pas ok.

Il peut y avoir au moins deux raisons.

La première, c'est que je ne connais qu'assez peu HTML+CSS et que je suis guère capable d'appliquer des solutions un tant soit peu complexes.

La deuxième, c'est que je ne suis pas non plus certain que le logiciel de wiki utilisé utilise strictement les normes, ce qui cumulé avec la première raison rend la chose vraiment difficile car je suis bien incapable de détecter où peut se trouver l'erreur.

Je vais essayer d'expliquer plus exactement mon problème, mais ce n'est pas vraiment simple, sachant que visiblement, aucune solution n'a été trouvée sur le forum du fournisseur du wiki.

Le wiki est Confluence, d'Atlassian.

Pour chaque page du wiki, il y a un titre, en h1.

Je ne veux voir ce titre ni à l'écran, ni lors de l'exportation en .pdf.

A l'écran, c'est simple :

Code:

---

.pagetitle h1{display: none;}

---

Si j'exporte une page en .pdf, cela fonctionne également parfaitement.

Mais si j'exporte la totalité de mon espace wiki, c'est le bazar, car pour une raison probablement parfaitement compréhensible du point de vue technique, il y a dégradation selon la profondeur des pages de l'espace.

Ainsi, h1 devient h2 au premier niveau, h1 devient h3 au deuxième niveau, etc.

Et évidemment, cette logique est appliquée partout.

Donc si je n'affiche pas h4, par exemple, et bien tout les h4 sont masqués, mais pas que le titre...

Mon idée est donc la suivante. Récupérer non pas h1, h2, etc. mais l'ID exacte du titre de la page.

Et de l'utiliser avec une media queries pour supprimer mon titre lors de l'export de la totalité de l'espace.

Et je ne suis même pas certain que cela fonctionne :aie:

Bonjour,

NoSmoking, je te prie d'accepter mes excuses car :

Code:

---

h1 a[href$="Mon+Titre"]{display: none}

---

fonctionne, tout du moins partiellement. C'est-à-dire que c'est en ordre à l'écran, mais ce n'est toujours pas ok à l'impression.

J'ai regardé attentivement le .pdf généré et il me semble qu'il y a une différence.

En effet, à l'écran, le titre est un lien, ce qui me semble est bien le code donné précédemment, mais pas pas dans le document .pdf.

J'ai à nouveau regardé attentivement le code HTML qu'on peut générer et j'ai encore trouvé ceci :

Code:

---

1 2 3 4 5 6 7

</div> <h1 id="title-heading" class="pagetitle"> <span id="title-text"> NomEspace : Mon titre </span> </h1> </div>

---

Ma question est donc la même, est-il possible d'en faire une ID, variable selon "NomEspace : Mon titre" ?

Merci d'avance.

En CSS on ne peut pas, pas encore, remonter l'arbre, il te faudrait avoir recours au javascript pour cela.

Peut être pourrais tu cibler plus précisément les H1 qui t’intéressent via un sélecteur enfant, par exemple >
exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<body> <h1>Titre page 1</h1>   <div class="section"> <h1>Titre section 1</h1> </div> <div class="section"> <h1>Titre section 2</h1> </div>   <h1><span>Titre page 2</span></h1> <div class="section"> <h1>Titre section 3</h1> </div> <div class="section"> <h1>Titre section 4</h1> </div>   <h1>Titre page 3</h1> <div class="section"> <h1>Titre section 5</h1> </div> <div class="section"> <h1>Titre section 6</h1> </div> </body>

---

on a ici des H1 directement enfant de BODY et d'autres enfants de DIV, pour masquer les H1 directement enfant de BODY il suffit d'appliquer le CSS suivant

Code:

---

1 2 3

body >h1 { /* cible les H1 directement enfant de BODY */ display:none; }

---

cela peut être une piste.

Une piste pourrait être de mettre un attribut particulier aux titres indésirables, <h1 data-titre="titre">Titre page 1</h1> par exemple et de le supprimer via un

Code:

---

1 2 3

h1[data-titre="titre"] { display:none; }

---

Une autre piste serait de cibler par une class particulière comme déjà mentionné plus haut mais qui visiblement ne suffit pas mais peut être qu'en cumulant.

PS : j'ai du mal à visualiser le problème ne connaissant absolument pas le wiki Confluence d'Atlassian.

Bonsoir,

Je ne pense pas, malheureusement, qu'aucune de ces solutions ne soient applicables.

En effet, la modification du code HTML des pages se fait via des "macros" et ce n'est pas vraiment top.

Par contre, ton idée de data-titre m'en donne des autres.

Une solution serait peut-être de ne pas utiliser des titres préformatés (Titre 2 = h2, Titre 4 = h4, etc.), mais d'encapsuler mes titres dans des "macros div" (cela devrait fonctionner, on peut leur attribuer une classe ou une id).

Il y en aurait encore une plus simple, mais je n'ai rien trouvé de très convaincant malgré mes recherches.

Si j'utilise le style "normal" du wiki, soit "paragraphe", le code est le suivant (exemple) :

Code:

---

<span style="color: rgb(0,0,0);">Utilisation de l'aide</span>

---

Est-il possible d'appliquer un style particulier, au sein d'un page, à "Utilisation de l'aide" ?

Je suppose que oui, mais je n'ai rien trouvé comme exemple.

Encore merci de ton aide.

Citation:

---

Est-il possible d'appliquer un style particulier, au sein d'un page, à "Utilisation de l'aide" ?

---

ce n'est pas le texte qui va te permettre de cibler le SPAN mais son "attribut" style, pas sûr que tous les navigateurs apprécient.

exemple :

Code:

---

1 2 3 4 5

span[style="color: rgb(0,0,0);"] { color:#00f; /* ne sera pas prise en compte le CSS inline étant prioritaire */ background:#abc; font-weight:bold; }

---

ou encore

Code:

---

1 2 3 4 5

span[style^="color"] { color:#00f; /* ne sera pas prise en compte le CSS inline étant prioritaire */ background:#abc; font-weight:bold; }

---

Merci pour ta réponse rapide.

Ca ne m'arrange pas vraiment, mais bon...

Je vais regarder ce que je peux faire avec des div.

Bonjour,

J'ai fait quelques tests en utilisant une macro div avec une classe "test_font" et le css suivant :

Code:

---

1 2 3 4 5

.test_font{font-size: 20px;} .test_font{font-style: italic;} .test_font{font-weight: bold;} .test_font{color: #808080} .test_font{background-color: yellow;}

---

A l'écran, c'est parfait !

Mais lors de l'export .pdf, patatras, seules la mise en italique et la couleur de fond sont correctement prises en compte.

Les trois autres propriétés sont totalement ignorées.

Une idée ?

Merci d'avance

Citation:

---

Mais lors de l'export .pdf, patatras, seules la mise en italique et la couleur de fond sont correctement prises en compte.

---

il n'y a pas de raison, je verrais plutôt un problème de configuration par défaut coté convertisseur HTML -> PDF

Bonsoir,

Effectivement, le problème doit se situer à ce niveau, je l'ai signalé à l'administrateur du wiki, on verra la suite qui y est donnée.

Bon, pas très grave, car pour finir, j'ai utilisé le span.

En effet, à relire la discussion, je me suis dit que je n'aurais qu'une mise en page minimale à refaire, car je n'utilise que deux niveaux de titre, h2 et h4.

Je les ai donc modifié en paragraphe simple et leur ai donc attribué deux couleurs différentes, ce qui n'est pas plus mal visuellement et ajouté un peu de CSS :

Code:

---

1 2 3 4 5 6 7 8 9

span[style="color: rgb(0,128,0);"] {font-size: 20px;} span[style="color: rgb(0,128,0);"] {font-weight: bold;} @media print{span[style="color: rgb(0,128,0);"] {font-size: 18px;}} @media print{span[style="color: rgb(0,128,0);"] {font-weight: bold;}}   span[style="color: rgb(128,128,128);"] {font-size: 14px;} span[style="color: rgb(128,128,128);"] {font-weight: bold;} @media print{span[style="color: rgb(128,128,128);"] {font-size: 12px;}} @media print{span[style="color: rgb(128,128,128);"] {font-weight: bold;}}

---

Le résultat dépasse mes espérances, car ainsi je peux personnaliser de façon très précise l'affichage à l'écran et les exportations.

De plus, mes exports sont parfaitement homogènes, que je fasse l'export page par page ou que j'exporte la totalité de mon espace.

Il me reste juste une chose à régler, suite à l'introduction de ce code, j'ai un petit problème avec les éléments flottants qui ne flottent plus correctement.

Je dois encore faire quelque recherche sur {clear:both}, si je n'y arrive pas, j'ouvrirai une autre discussion.

Un grand merci, tes interventions m'ont permis de considérablement avancer dans mon projet.