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

Originally Posted by tomyknoker

Has anyone ever seen a flowchart designed up using CSS?

HTML Code:

<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.

Thread: Flowchart Using CSS

Thread Tools

Search Thread

Flowchart Using CSS

try this code I'm write it and it work

Bookmarks

Bookmarks

Posting Permissions