CSS/HTML Diagrama de flujo

Question

necesito una muy simple, sencillo diagrama de flujo CSS/HTML en el siguiente formato:

Node1 
    | 
Node2 
    | 
Node3 
    | 
Node4 
    | 
Node5 
    | 
Node6 

sé casi nada acerca de CSS, pero ha intentado modificar la detallada en el siguiente enlace. ¡El problema era que solo quería un gráfico lineal vertical y terminaba por todos lados!

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

¿Alguien puede ayudar?

Answer 1

Hope esto es que funciona para usted:

http://jsfiddle.net/wkCNm/

---

En caso de que el violín de JS desaparece, aquí está el código.

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; 
}