Log in

View Full Version : Flowchart Using CSS


tomyknoker
11-23-2006, 12:10 PM
Has anyone ever seen a flowchart designed up using CSS?
coothead
11-23-2006, 03:24 PM
...or this one...

http://www.htmlforums.com/showthread.php?t=85999
coothead
Salha
03-27-2017, 10:46 AM
Has anyone ever seen a flowchart designed up using CSS?



<html>
<head>
<style>
#ddd {
border-style: solid;
padding-top: 10px;
padding-right: 40px;
padding-bottom: 10px;
padding-left: 40px;
box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.2);
background-color:#f6f6ff;
}
#f{ border-left-style: solid;
}
#r{ border-right-style: solid;}
#b{ border-bottom-style: solid;}
</style>
<style>
.dropdown {
position: relative;
display: inline-block;

}

.dropdown-content {
display: none;
position: absolute;
min-width: 140px;
padding: 10px 10px;
z-index: 1;
}
p{border-style: solid;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
box-shadow: 0px 8px 12px 0px rgba(0,0,0,0.2);
background-color:#f6f6ff;


}
.dropdown:hover .dropdown-content {
display: block;

}
</style>
</head>
<body>
<h1>herarchy

</h1>
<table>
<!------------------ start top tr-------------->
<tr>
<td colspan="3"></td> <td id="ddd" colspan="4"><center>top</center> </td>
</tr>
<!------------------ end top tr--------------->

<!--------------------------------------------------start row---------------------------------------------------->
<!------------------ start long line----------->
<tr>
<td colspan="5"></td>
<td id="f">&nbsp;<br/>&nbsp;</td>
<td colspan="1"></td>
</tr>
<!------------------ end long line--------------->

<!------------------- start middle line------------------->

<tr>
<td id="b" colspan="10"></td>
</tr>
<!------------------- end middle line------------------->

<!---------------------------start small lines ----------->
<tr>
<td id="f">&nbsp;<br/>&nbsp;</td>
<td ></td>
<td id="f"></td>
<td ></td>
<td id="f"></td>
<td ></td>
<td id="f"></td>
<td ></td>
<td id="f"></td>
<td ></td>
<td id="f"></td>
</tr>
<!------------------------------end small lines -------->

<!-----------------------------------content--------------------------------->
<tr>
<!--------start td---------->
<td id="ddd" class="dropdown">level one </td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<!---------end td--------->
<!--------start td---------->
<td id="ddd" class="dropdown">level one </td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<!---------end td--------->
<!--------start td---------->
<td id="f">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<!---------end td--------->
<!--------start td---------->
<td id="ddd" class="dropdown">level one </td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<!---------end td--------->
<!--------start td---------->
<td id="ddd" class="dropdown">level one </td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<!---------end td--------->
<!--------start td---------->
<td id="ddd" class="dropdown">level one </td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<!---------end td--------->

</tr>

<!--------------------------------------end content--------------------------------->
<!------------------------------------------end row--------------------------------------------------------->



<!--------------------------------------------------start row---------------------------------------------------->
<!------------------ start long line----------->
<tr>
<td colspan="4"></td>
<td id="f">&nbsp;<br/>&nbsp;</td>
<td colspan="4"></td>
</tr>
<!------------------ end long line--------------->

<!------------------- start middle line------------------->

<tr>
<td id="b" colspan="12"></td>
</tr>
<!------------------- end middle line------------------->

<!---------------------------start small lines ----------->
<tr>
<td id="f">&nbsp;<br/>&nbsp;</td>
<td ></td>
<td id="f"></td>
<td ></td>
<td id="f"></td>
<td ></td>
<td id="f"></td>
<td ></td>
<td id="f"></td>
<td ></td>
<td id="f"></td>
<td ></td>
<td id="f"></td>
</tr>
<!------------------------------end small lines -------->

<!-----------------------------------content--------------------------------->
<tr>
<!--------start td---------->
<td id="ddd" class="dropdown">level one <div class="dropdown-content">
<p>level two</p>
<p>level two</p>
</div></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<!---------end td--------->
<!--------start td---------->
<td id="ddd" class="dropdown">level one <div class="dropdown-content">
<p>level two</p>
<p>level two</p>
</div></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<!---------end td--------->
<!--------start td---------->
<td id="ddd" class="dropdown">level one <div class="dropdown-content">
<p>level two</p>
<p>level two</p>
</div></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<!---------end td--------->
<!--------start td---------->
<td id="ddd" class="dropdown">level one <div class="dropdown-content">
<p>level two</p>
<p>level two</p>
</div></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<!---------end td--------->
<!--------start td---------->
<td id="ddd" class="dropdown">level one </td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<!---------end td--------->
<!--------start td---------->
<td id="ddd" class="dropdown">level one <div class="dropdown-content">
<p>level two</p>
<p>level two</p>
</div></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<!---------end td--------->
<!--------start td---------->
<td id="ddd" class="dropdown">level one <div class="dropdown-content">
<p>level two</p>
<p>level two</p>
</div></td>
<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
<!---------end td--------->

</tr>

<!--------------------------------------end content--------------------------------->
<!------------------------------------------end row--------------------------------------------------------->



</table>

</body>
</html>
jscheuer1
04-06-2017, 05:54 PM
As this is an old thread, I'm closing it. Even though one post is more recent, I'm keeping that because it works. Two posts containing broken links have been deleted. Anyone wishing more information on this topic may open a new thread.