PDA

View Full Version : List in for of organizational chart



xionhack
Mar 20th, 2009, 02:12 AM
Hello. I want to make a list look like an organizational chart. Meaning to be in 3 levels from top to bottom, the bottom one being every word bellow the other. For example



<ul>
<li>Hola</li>
<ul>
<li>Si</li>
<ul>
<li>Yes</li>
<li>No</li>
</ul>
<li>No</li>
<ul>
<li>Yes</li>
<li>No</li>
</ul>
</ul>
<li>Hello</li>
<ul>
<li>Si</li>
<ul>
<li>Yes</li>
<li>No</li>
</ul>
<li>No</li>
<ul>
<li>Yes</li>
<li>No</li>
</ul>
</ul>
</ul>


That code I want it to look like



Hola Hello
Si No Si No
Yes Yes Yes Yes
No No No No

PitbullMean
Mar 20th, 2009, 04:02 AM
For something as simple as that why dont you just use a table?

xionhack
Mar 20th, 2009, 05:03 AM
What IUm trying to do is something with php and with the table it would be very hard for me to do. The only thing that I have to know is how to style a list in that way.

Excavator
Mar 20th, 2009, 05:41 AM
Hello xionhack,
Have a look at some list examples, view the source to see how they're done, maybe one will help. That first link, the list at the top might work for you.

one (http://nopeople.com/CSS/dl/index.html)
two (http://nopeople.com/CSS/3%20column%20ul/index.html)
three (http://nopeople.com/CSS/dl/another_dl.html)

xionhack
Mar 21st, 2009, 02:17 AM
No, still stucked. Can you help me out?

Excavator
Mar 21st, 2009, 02:51 AM
From that dl I mentioned -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#wrap dl {
width: 200px;
float: left;
margin: 50px 10px 50px 0;
}
#wrap dt {
float: left;
clear: left;
width: 100px;
text-align: right;
padding-right: 5px;
}
#wrap dt.title {
width: 200px;
text-align: center;
font-size: 18px;
color: #006600;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="wrap">
<dl>
<dt class="title">Hola</dt>
<dt>Si</dt>
<dd>No</dd>
<dt>Yes</dt>
<dd>Yes</dd>
<dt>No</dt>
<dd>No</dd>
</dl>
<dl>
<dt class="title">Hello</dt>
<dt>Si</dt>
<dd>No</dd>
<dt>Yes</dt>
<dd>Yes</dd>
<dt>No</dt>
<dd>No</dd>
</dl>
<!--end wrap--></div>
</body>
</html>

Is that more what you're looking for ?