Plan arborescent

Introduction

Grâce à quelques astuces CSS appliquées à une liste, il est possible d’obtenir un plan du site présenté sous forme arborescente. Il suffit d’appliquer des bordures aux bons éléments.

Dans l’exemple donné ci-dessous les rubriques sont en gras et un petit peu plus grande que les articles pour les différencier. Je n’ai pas intégré les brèves dans ce plan.

Un exemple se trouve ici

La boucle

<ul class="plansite"><BOUCLE_secteurs(RUBRIQUES){racine}{par titre}>
  <li><strong><a href="#URL_RUBRIQUE">#TITRE</a></strong>
  <B_artsecteur><ul>
    <BOUCLE_artsecteur(ARTICLES){id_rubrique}{par titre}>
    <li><a href="#URL_ARTICLE">#TITRE</a></li>
    </BOUCLE_artsecteur>
  </ul></B_artsecteur>
  <B_sousrub><ul>
    <BOUCLE_sousrub(RUBRIQUES){id_parent}{par titre}>
    <li><strong><a href="#URL_RUBRIQUE">#TITRE</strong></a>
      <B_artsousrub><ul>
        <BOUCLE_artsousrub(ARTICLES){id_rubrique}{par titre}>
        <li><a href="#URL_ARTICLE">#TITRE</a></li>
        </BOUCLE_artsousrub>
      </ul></B_artsousrub>
          <BOUCLE_sousousrub(boucle_sousrub)></BOUCLE_sousousrub>
    </li>
    </BOUCLE_sousrub>
  </ul></B_sousrub>
  </li>
</BOUCLE_secteurs></ul>

Le code CSS

A intégrer en entête de votre page ou dans le fichier CSS de votre squelette.

ul.plansite, ul.plansite ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-left: 1.5em;
  font-size: 12px; }
ul.plansite li {
  border-left: 1px solid black;
  color: black;
  margin: 0;
  padding: 0; }
ul.plansite li a {
  padding-left: 0.5em;
  text-decoration: none;
  color: black;
  border-bottom: 1px solid black; }
ul.plansite li strong {
  font-size: 105%; }

Vos commentaires

# Le 5 novembre 2005 à 19:06, par druith En réponse à : Plan arborescent

J’ai un problème sous I.E avec ce plan. Les balises

sont décalées de 5px vers la droite par rapport à Firefox, et il faut mettre margin-left : -5px ; dans ul.plansite li a mais dans ce cas c’est Firefox qui n’affiche plus correctement ! Je vais quand même pas utiliser du JavaScript pour ça ?!

Je suis le seul à rencontrer ce problème ?

Répondre à cet article

Qui êtes-vous ?

Nom [Se connecter]
Veuillez laisser ce champ vide :
Courriel (non publié)

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )

Texte de votre message
Prévenez-moi de tous les nouveaux commentaires de cette discussion par email

Ajouter un document

gif, jpg, png

Ça discute par ici

Mise à jour automatique des plugins

5 octobre 2009 – 156 commentaires

Une nouvelle lame du Couteau Suisse permet de visualiser les plugins nécessitant une mise à jour, tout comme SPIP lui-même ! Présentation Rendons à César ce qui est à César, voici un extrait de la présentation du Couteau Suisse pour sa lame « Mise (...)

Plugin Modèles media

25 avril 2011 – 170 commentaires

Les modèles , et produisent chacun un résultat différent et ce résultat, pour les images, dépend du fait qu’elle soit dans le portfolio ou non. Ce plugin propose une nouvelle série de modèles ayant un comportement unifié et indépendant du mode des (...)

Refonte de l’identité graphique

10 juillet – 68

Lors de la SPIP Party 2017 à Toulouse, un nouveau contributeur est venu nous présenter son travail sur une refonte du logo. Au delà de la refonte du logo, c’est une toute nouvelle identité graphique pour SPIP que Jordan nous propose. Voici une (...)

Mailsubscribers

16 janvier 2013 – 306 commentaires

Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

Saisies

27 mars 2010 – 490 commentaires

Introduction Créer un formulaire est une tâche toujours un peu répétitive : les champs ont souvent les mêmes propriétés, le même accompagnement (message d’erreur, explication, ...) et la même structure HTML. Ce plugin est un outil pour les développeurs (...)

# Le 5 novembre 2005 à 19:06, par druith En réponse à : Plan arborescent

J’ai un problème sous I.E avec ce plan. Les balises
sont décalées de 5px vers la droite par rapport à Firefox, et il faut mettre margin-left : -5px ; dans ul.plansite li a mais dans ce cas c’est Firefox qui n’affiche plus correctement ! Je vais quand même pas utiliser du JavaScript pour ça ?!
Je suis le seul à rencontrer ce problème ?

# ^ Le 28 février 2005 à 12:56, par ? En réponse à : > variante

Inutile d’aller jeter un coup d’oeil sur le site ci-avant. Je suis revenue de cette arborescence suite à de gros problèmes sous MSIE. En effet, le menu en question refusait alors de rester dans sa boîte CSS et s’étalait sur le texte à sa droite.

# ^ Le 28 février 2005 à 13:05, par ? En réponse à : > > variante

Tu aurais dû le laisser, qu’on puisse regarder pourquoi il s’étalait. C’est assez étonnant que ta liste actuelle ne s’étale pas et que l’autre si. Si tu la remets préviens-moi que je fasse quelques tests pour voir l’origine du pb sous IE.

# ^ Le 28 février 2005 à 16:51, par Bionet En réponse à : > > > variante

Je l’ai remis en ligne dans le style « menu hiérarchique ». Voilà, il est tout prêt pour les tests. Les CSS se trouvent dans http://www.biospip.org/biospip/biocss/.

# ^ Le 28 février 2005 à 16:58, par Bionet En réponse à : > > > > variante

Je complète mon précédent message :
- J’ai placé un sélecteur de styles en haut à gauche de chaque page comme celle-ci ;
- En choisissant « menu hérarchique » on obtiens la même page avec le menu arborescent de cette contribution ;
- Le squelette du menu se trouve à l’adresse : http://biospip.org/biospip/inc_menu.html ;
- Les CSS du menu se trouvent à l’adresse : http://biospip.org/biospip/biocss/d....

Voilà je crois qu’il y a tout maintenant ;-)

# ^ Le 28 février 2005 à 21:58, par Miss Mopi En réponse à : > > > > > variante

Problème résolu : ne pas mettre de width sur les ul de deuxième niveau (et plus) mais seulement sur le premier niveau. Si on prend l’exemple ci dessus : on peut mettre une taille sur ul.plansite mais pas sur ul.plansite ul.

Firefox donne la priorité au niveau le plus haut et IE au niveau le plus bas. On a donc des comportements différents.

SPIP-Contrib

Introduction

La boucle

Le code CSS

Rubriques

Derniers commentaires

Compatibilité

Tris Alphabétiques

Vos commentaires

Répondre à cet article

Ça discute par ici

Mise à jour automatique des plugins

Plugin Modèles media

Refonte de l’identité graphique

Mailsubscribers

Saisies

Ça spipe par là

SPIP Blog

SPIP - Seenthis

SPIP Forums

SPIP-Zone

SPIP SVN