CSS/HTML Organigramme

J'ai besoin d'un simple CSS/HTML diagramme de flux dans le format ci-dessous:

Node1
  |
Node2
  |
Node3
  |
Node4
  |
Node5
  |
Node6

Je sais rien à propos de CSS, mais tenté de modifier celui détaillé dans le lien ci-dessous. Le Problème était que je voulais seulement linéaire, verticale graphique et ça a fini dans tous les sens!

http://www.htmlforums.com/css/t-flowchart-using-css-85999.html

Peut aider quelqu'un?

HTML n'est pas conçu pour être un diagramme de la langue. J'aimerais passer à l'utilisation de SVG à la place.
Pouvez-vous me donner un exemple de comment je pourrais utiliser SVG pour créer l'organigramme puis ajouter du code HTML ou des éléments jQuery?

OriginalL'auteur jaxxstorm | 2011-04-26

  1. 4

    Espère que c'est ce qui fonctionne pour vous:

    http://jsfiddle.net/wkCNm/

    Dans le cas où la JS Fiddle disparaît, voici le code.

    HTML

    <h1>A simple family tree using 32 divs</h1>

<div id="container">

<div id="no1"><a href="#">Production Director</a></div>
<div id="line1"></div>
<div id="no1"><a href="#">Production Director</a></div>
<div id="line1"></div>
<div id="no1"><a href="#">Production Director</a></div>
<div id="line1"></div>
<div id="no1"><a href="#">Production Director</a></div>

</div>

    CSS

    h1 {
width:580px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:18px;
text-align:center;
margin:40px auto;
}
#container {
width:580px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:11px;
text-align:center;
margin:auto;
}
#container a {
display:block;
color:#000;
text-decoration:none;
background-color:#f6f6ff;
}
#container a:hover {
color:#900;
background-color:#f6f6ff;
}
#no1 {
width:190px;
line-height:60px;
border:1px solid #000;
margin:auto;
}
#no1 a {
height:60px;
}
#line1 {
font-size:0;
width:1px;
height:20px;
color:#fff;
background-color:#000;
margin:auto;
}
#line2 {
font-size:0;
width:424px;
height:1px;
color:#fff;
background-color:#000;
margin:auto;
}
#line3 {
font-size:0;
display:inline;
width:1px;
height:20px;
color:#fff;
background-color:#000;
margin-left:78px;
float:left;
}
#line4,#line5,#line6 {
font-size:0;
display:inline;
width:1px;
height:20px;
color:#fff;
background-color:#000;
margin-left:140px;
float:left;
}
#no2 {
display:inline;
border:1px solid #000;
clear:both;
margin-left:35px;
float:left;
}
#no2 a,#no4 a,#no8 a {
width:84px;
height:50px;
padding-top:8px;
}
#no3 {
display:inline;
border:1px solid #000;
margin-left:58px;
float:left;
}
#no3 a,#no5 a,#no6 a,#no7 a,#no9 a {
width:84px;
height:42px;
padding-top:16px;
}
#no4 {
display:inline;
border:1px solid #000;
margin-left:53px;
float:left;
}
#no5 {
display:inline;
border:1px solid #000;
margin-left:55px;
float:left;
}
#line7,#line13 {
font-size:0;
display:inline;
width:1px;
height:38px;
color:#fff;
background-color:#000;
margin-left:219px;
float:left;
}
#line8,#line14 {
font-size:0;
display:inline;
width:1px;
height:38px;
color:#fff;
background-color:#000;
margin-left:281px;
float:left;
}
#no6,#no8 {
display:inline;
border:1px solid #000;
margin-left:107px;
float:left;
}
#line9,#line11,#line15,#line17 {
font-size:0;
display:inline;
width:26px;
height:1px;
color:#fff;
background-color:#000;
margin-top:29px;
float:left;
}
#line10,#line12,#line16,#line18 {
font-size:0;
display:inline;
width:1px;
height:60px;
color:#fff;
background-color:#000;
float:left;
}
#line16,#line18 {
height:30px;
}
#no7,#no9 {
display:inline;
border:1px solid #000;
margin-left:169px;
float:left;
}
.clear {
clear:both;
}
    C'est en regardant une grande! Si je devais ajouter un nombre illimité de nœuds, comment dois-je procéder?
    Si vous utilisez une sorte de boucle pour afficher toutes votre diagramme de flux des articles, vous pourriez dire à rendre la ligne1 div après chaque élément de la faire ressembler à cela.
    Pour ajouter plus, il suffit de dupliquer les suivants: <pre> <div id="line1"></div> <div id="n ° 1"><a href="#">Directeur de Production</a></div> </pre>
    J'ai oublié de mentionner. Faire les ID dans les classes, Que ce que son actuel ne sera pas validé. Espérons que cela a du sens.
    Ainsi, au lieu de div id, changer div class et ensuite modifier le css . au lieu de #?

    OriginalL'auteur gutierrezalex