IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

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


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Expert confirmé
    Avatar de Domi2
    Homme Profil pro
    Gestionnaire
    Inscrit en
    Juin 2006
    Messages
    7 194
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : Suisse

    Informations professionnelles :
    Activité : Gestionnaire
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Juin 2006
    Messages : 7 194
    Par défaut [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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    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 css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    h1 a[href$="Mon+titre"]{
      font-size:2px;
      font-weight:normal;
      color:red;
    }
    avec ton code
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <h1 id="title-text" class="with-breadcrumbs">
        <a href="/outils/xxxxx/display/MONESPACE/Mon+titre">Le lien</a>
    </h1>

  3. #3
    Expert confirmé
    Avatar de Domi2
    Homme Profil pro
    Gestionnaire
    Inscrit en
    Juin 2006
    Messages
    7 194
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : Suisse

    Informations professionnelles :
    Activité : Gestionnaire
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Juin 2006
    Messages : 7 194
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    .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

  4. #4
    Expert confirmé
    Avatar de Domi2
    Homme Profil pro
    Gestionnaire
    Inscrit en
    Juin 2006
    Messages
    7 194
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : Suisse

    Informations professionnelles :
    Activité : Gestionnaire
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Juin 2006
    Messages : 7 194
    Par défaut
    Bonjour,

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

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  6. #6
    Expert confirmé
    Avatar de Domi2
    Homme Profil pro
    Gestionnaire
    Inscrit en
    Juin 2006
    Messages
    7 194
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : Suisse

    Informations professionnelles :
    Activité : Gestionnaire
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Juin 2006
    Messages : 7 194
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    <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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 27
    Dernier message: 29/08/2014, 12h29
  2. Réponses: 5
    Dernier message: 22/04/2013, 14h10
  3. [MySQL] recuperer une valeur dans une liste deroulante pour l'utiliser dans une seconde liste
    Par tortue_22 dans le forum PHP & Base de données
    Réponses: 12
    Dernier message: 12/05/2010, 11h50
  4. [XL-2007] [débutante VBA] trouver la liste des images utilisée dans une feuille
    Par EmmanuelleC dans le forum Macros et VBA Excel
    Réponses: 4
    Dernier message: 09/10/2009, 13h46
  5. Réponses: 3
    Dernier message: 20/04/2009, 09h13

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo