Results 1 to 4 of 4

Thread: Flowchart Using CSS

  1. #1
    Join Date
    Apr 2006
    Posts
    584
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Flowchart Using CSS

    Has anyone ever seen a flowchart designed up using CSS?

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,094
    Thanks
    1
    Thanked 205 Times in 201 Posts

  3. #3
    Join Date
    Mar 2017
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up try this code I'm write it and it work

    Quote Originally Posted by tomyknoker View Post
    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>

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,371
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •