Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS flowchart

Posted on 2011-04-26
6
Medium Priority
?
1,056 Views
Last Modified: 2012-05-11
I need a very simply, straightforward CSS/HTML flowchart in the format below:


Node1
    |
Node2
    |
Node3
    |
Node4
    |
Node5
    |
Node6

I would guess someone has already done this before, so wondering if anyone could share their code
0
Comment
Question by:jaxstorm
  • 3
  • 2
6 Comments
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 2000 total points
ID: 35471637
Here is a little <div> and CSS that will work. I made it so it would be easy to customize:
<style type-"text/css">
#box1, #box2, #box3, #box4, #box5, #box6, #box7, #box8, #box9 {
	display: block;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1.01em;
	font-weight: light;
	line-height: 1.8em;
	list-style: none;
	width: 450px;
padding-top: 20px;
padding-bottom: 20px;}
	
#box1 li, #box2 li, #box3 li, #box4 li , #box5 li, #box6 li, #box7 li, #box8 li, #box9 li {
	list-style: none;

}
.seperators {
	font-size: 23px;
	font-weight: 800;
	line-height: 20px;
	color: darkgrey;
	text-align: center;
	display: block;
	width: 450px;
}
#box1 {
background: green;
color: white;
border: 1px solid silver;	
}
#box2 {
background: blue;
color: white;
border: 1px solid silver;	
}
#box3 {
background: black;
color: white;
border: 1px solid silver;	
}
#box4 {
background: orange;
color: white;
border: 1px solid silver;	
}
#box5 {
background: ghostwhite;
color: black;
border: 1px solid darkgrey;	
}
#box6 {
background: skyblue;
color: white;
border: 1px solid silver;	
}
#box7 {
background: tan;
color: white;
border: 1px solid silver;	
}
#box8 {
background: navy;
color: white;
border: 1px solid silver;	
}
#box9 {
background: purple;
color: white;
border: 1px solid silver;	
}
</style>
<ul class="flowchart">
<div id="box1"><strong><li>The Info For Box One Would Go Here</li></strong></div>
<div class="seperators">
|<br>
|<br>
|
</div>
<div id="box2"><strong><li>The Info For Box One Would Go Here</li></strong></div>
<div class="seperators">
|<br>
|<br>
|
</div>
<div id="box3"><strong><li>The Info For Box One Would Go Here</li></strong></div>
<div class="seperators">
|<br>
|<br>
|
</div>
<div id="box4"><strong><li>The Info For Box One Would Go Here</li></strong></div>
<div class="seperators">
|<br>
|<br>
|
</div>
<div id="box5"><strong><li>The Info For Box One Would Go Here</li></strong></div>
<div class="seperators">
|<br>
|<br>
|
</div>
<div id="box6"><strong><li>The Info For Box One Would Go Here</li></strong></div>
<div class="seperators">
|<br>
|<br>
|
</div>
<div id="box7"><strong><li>The Info For Box One Would Go Here</li></strong></div>
<div class="seperators">
|<br>
|<br>
|
</div>
<div id="box8"><strong><li>The Info For Box One Would Go Here</li></strong></div>
<div class="seperators">
|<br>
|<br>
|
</div>
<div id="box9"><strong><li>The Info For Box One Would Go Here</li></strong></div>
</ul>

Open in new window

0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35471649
Here is the screenshot, I forgot to upload it:
Screenshot
0
 
LVL 22

Expert Comment

by:remorina
ID: 35471689
I've written a simple example for you based on one that we've used before but the link below might be useful as it contains variety of options that you can choose from and they are all CSS based, Also my code was based on one of their examples

http://speckyboy.com/2009/02/04/16-usable-css-graph-and-bar-chart-tutorials-and-techniques/

Cheers!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Simple CSS Chart</title>
    <style type="text/css">
        div.progress-container {
          border: 1px solid #ccc; 
          width: 100px; 
          margin: 2px 5px 2px 0; 
          padding: 1px; 
          background: white;
        }

        div.progress-container > div {
          background-color: #313183; 
          height: 12px
        }
        .ctitle {
            font:normal 11px Tahoma, Arial, Helvetica, Serif;
        }
    </style>
</head>
<body>
<div>
    <span class="ctitle">Node 1</span>
    <div class="progress-container">          
        <div style="width: 95%"></div>
    </div>
    <span class="ctitle">Node 1</span>
    <div class="progress-container">          
        <div style="width: 40%"></div>
    </div>
    <span class="ctitle">Node 1</span>
    <div class="progress-container">          
        <div style="width: 78%"></div>
    </div>
    <span class="ctitle">Node 1</span>
    <div class="progress-container">          
        <div style="width: 19%"></div>
    </div>
</div>
</body>
</html>

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 22

Expert Comment

by:remorina
ID: 35471760
Apologies as I seem to have misunderstood your question for a CSS charts not flowcharts.

I've also included a comprehensive CSS flow chart example below

Cheers!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>CSS Flow Chart</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/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;
        }
        -->
        </style>
</head>
<body>
    <h1>Simple Chart</h1>
    <div class="container">
        <div class="no1"><a href="">Node 1</a></div>
        <div class="line1"></div>
        <div class="no1"><a href="">Node 2</a></div>
        <div class="line1"></div>
        <div class="no1"><a href="">Node 3</a></div>
        <div class="line1"></div>
        <div class="no1"><a href="">Node 4</a></div>
    </div>
    
    <h1>Full Chart</h1>
    <div class="container">
        <div class="no1">
            <a href="">Node 1</a></div>
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
        <div class="line4"></div>
        <div class="line5"></div>
        <div class="line6"></div>
        <div class="no2"><a href="#">Node 2</a></div>
        <div class="no3"><a href="#">Node 3</a></div>
        <div class="no4"><a href="#">Node 4</a></div>
        <div class="no5"><a href="#">Node 5</a></div>
        <div class="line7"></div>
        <div class="line8"></div>
        <div class="clear"></div>
        <div class="no6"><a href="#">Node 6</a></div>
        <div class="line9"></div>
        <div class="line10"></div>
        <div class="no7"><a href="#">Node 7</a></div>
        <div class="line11"></div>
        <div class="line12"></div>
        <div class="clear"></div>
        <div class="line13"></div>
        <div class="line14"></div>
        <div class="clear"></div>
        <div class="no8"><a href="#">Node 8</a></div>
        <div class="line15"></div>
        <div class="line16"></div>
        <div class="no9"><a href="#">Node 9</a></div>
        <div class="line17"></div>
        <div class="line18"></div>
        <div class="clear"></div>
    </div>
</body>
</html>

Open in new window

0
 
LVL 8

Author Closing Comment

by:jaxstorm
ID: 35696851
great stuff, thanks
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35698155
You're Welcome.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question