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

Discussion :

Organigramme en HTML et CSS ?

  1. #1
    Membre éclairé Avatar de Tillo
    Homme Profil pro
    Webmaster
    Inscrit en
    Octobre 2007
    Messages
    494
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Octobre 2007
    Messages : 494
    Points : 683
    Points
    683
    Par défaut Organigramme en HTML et CSS ?
    Bonjour à tous,

    Pour l'un de mes projets, j'ai besoin d'afficher un petit arbre généalogique, un peu comme un petit organigramme.
    Il contient juste un individu et ses 2 parents, le contenu de cet arbre est généré dynamiquement grâce à du PHP et une base de données.

    J'ai bricolé quelque chose de très moche avec du HTML et du CSS :
    En bleu les bordures qui seront affichées, toutes les autres seront masquées.

    Nom : tableau.jpg
Affichages : 2030
Taille : 17,7 Ko

    Mon idée a consisté à afficher un tableau de 6x6 puis à jouer avec les bordures, les colspans et les rowspan.

    J'aimerai savoir si il n'existe pas une meilleure méthode, quelque chose qui serait plus léger.

    A bientôt,
    Alexis
    J'aimerais mieux être le premier dans ce village que le second à Rome. (Caius Julius Caesar)

    J'ai aussi un site sur la Grande Guerre: Histoires de Poilus

  2. #2
    Modérateur
    Avatar de Vil'Coyote
    Homme Profil pro
    Développeur adélia & Web
    Inscrit en
    Février 2008
    Messages
    4 583
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 43
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur adélia & Web
    Secteur : Industrie

    Informations forums :
    Inscription : Février 2008
    Messages : 4 583
    Points : 7 503
    Points
    7 503
    Par défaut
    potentiellement je dirai utilisation de div ou de caneva.
    la vie n'est pas cirrhose des foies ...

    Avant de poster un message Rechercher n'est pas qu'une option.
    FAQ Web - Tuto Web

  3. #3
    Membre habitué Avatar de grafimages
    Homme Profil pro
    Webdesigner
    Inscrit en
    Novembre 2011
    Messages
    99
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Etats-Unis

    Informations professionnelles :
    Activité : Webdesigner

    Informations forums :
    Inscription : Novembre 2011
    Messages : 99
    Points : 170
    Points
    170
    Par défaut
    Pas mieux, les div et une bonne dose de CSS suffiront et ce sera plus propre et plus léger qu'un tableau.

  4. #4
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 700
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 700
    Points : 3 849
    Points
    3 849
    Billets dans le blog
    6
    Par défaut
    C'est un problème amusant — surtout du côté de HTML ! Perso, j'aurais aimé utiliser DL, mais les SPAN sont invalides à l'intérieur.

    Je propose donc cette solution, utilisant le schema de microdonnées PERSON :
    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
    27
    28
    29
    <!DOCTYPE html>
    <html dir="ltr" lang="en">
    <head>
      <meta charset="UTF-8" />
      <title>Diagram</title>
    </head>
    <body>
     
    <p>foo</p>
     
    <section class="diagram" aria-labelledby="a"
      itemscope itemtype="http://schema.org/Person">
      <p class="person parent"
        itemprop="parent" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">Parent 1A</span>
      </p>
      <p class="person parent"
        itemprop="parent" itemscope itemtype="http://schema.org/Person">
        <span itemprop="name">Parent 2A</span>
      </p>
      <span class="fork clear"></span>
      <span class="line"></span>
      <h1 class="person child" id="a" itemprop="name">Child A</h1>
    </section>
     
    <p>bar</p>
     
    </body>
    </html>

    Code css : 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
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    .person {
      margin: 0;
      border: 2px solid blue;
      width: 20%;
      height: 8em;
      line-height: 8em;
      text-align: center;
    }
    .child {
      margin: auto;
      font-weight: normal;
      font-size: 1em;
    }
    .parent {
      float: left;
    }
    .parent + .parent {
      float: right;
    }
    .fork {
      display: block;
      margin: auto;
      border: 2px solid blue;
      border-top-width: 0;
      width: 80%;
      height: 4em;
    }
    .line {
      display: block;
      border-right: 2px solid blue;
      width: 50%;
      height: 4em;
    }
    .clear {
      clear: both;
    }

Discussions similaires

  1. [HTML 5] Organigramme avec HTML ET CSS ?
    Par abdego dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 21/02/2013, 14h23
  2. [HTML?][XHTML?][CSS?] Une image dont la taille s'adapte
    Par zelda dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 11/11/2005, 11h19
  3. [HTML], [XHTML], [CSS]...comment creer un livre d'or ?
    Par douda dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 30/09/2005, 10h26
  4. Transformation d'un tableau html en CSS
    Par titou250 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 27/09/2005, 17h55
  5. [HTML et CSS] Prolème impression tableau html
    Par ofo_tn dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 21/08/2005, 18h27

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