Flowchart with CSS/HTML

Question

Currently I'm trying to make a flowchart, this is the code I've got so far:

 #flowchart {
        width: 580px; 
        text-align: center;
        font-family: sans-serif;
        font-size: .8em;
        margin: auto;
    }  
    #flowchart a {
        display: block;
        color: white;
        text-decoration: none;
        background-color: #2F41B1;
        padding: 2em 1em;
    }
    #flowchart a:hover {
        color: #111;
        background-color: #EFA707;
    }
    .no1 {
        width: 390px;
        border: 1px solid #444;
        margin: 0 auto;
    }
    .line1 {
        width: 1px;
        height: 20px;
        background-color: #000;
        margin: 0 auto;
    } 
    .clear {
        clear:both;
    }

    <div id="flowchart">
        <div class="no1"><a href="http://example.com/page1">Step 1:
    Blah blah blah, do this.</a></div>
        <div class="line1"></div>
        <div class="no1"><a href="http://example.com/page2">Step 2: 
    Then this and that.</a></div>
        <div class="line1"></div>
        <div class="no1"><a href="example.com/page3">Step 3: 
    Now finally go here and there.</a></div>
    
    </div>

How can I make only the headings ("step x") for each section be bold and larger? (and not the content after, "blah blah then this etc")

Also, how can I make rounded corners instead of sharp edges?

1. font-weight:bold; and font-size:2em; 2.border-radius:3px; — Sven Bieder, Mar 31 '12 at 16:10
Thanks Sven, but I only want the headings and not the rest of the text to be changed (I tweaked what I posted to make that clearer). If it was all the text I wanted the change to be done to I know enough to do that myself :-P :-P — Matthew Galloway, Mar 31 '12 at 16:15
then put the text you want explicitly changed in a span with a class and attach the styles to that class — Sven Bieder, Mar 31 '12 at 16:19

score 2 · Answer 1 · answered Mar 31 '12 at 16:13

2

i made a quick fiddle of what you wand dude. http://jsfiddle.net/jalbertbowdenii/NY973/1/

answered Mar 31 '12 at 16:13

albert

8,112
3
47
63

Cheers! As yours was posted first is what I've been using :-P However, now I see the other replies I've got one more question.... Why do you have this extra portion that the others haven't suggested: -webkit-border-radius: 5px; -moz-border-radius:5px; -ms-border-radius:5px; -0-border-radius:5px; – Matthew Galloway Mar 31 '12 at 16:27
that covers all browsers that only support vendor prefixes; the last one, border-radius by itself, is just the fallback. it covers you're bases in more browsers – albert Mar 31 '12 at 16:41
1

`-webkit`, `-moz`, and `-o` are prefixes specific to Chrome/Safari, Firefox, and Opera, respectively. They implemented these features before the CSS specification added in the attribute (which is listed without the prefix). The most recent version of all those browsers and IE support the border-radius attribute, but older versions may or may not support it without the prefixed version. – saluce Apr 02 '12 at 16:05

score 1 · Accepted Answer · edited Mar 22 '13 at 10:01

1

To make the Step x styled differently, you need to wrap it in a <span class="flowchartHeader">...</span> tag, then add this to your CSS:

.flowchartHeader {
    font-size: 1.2em;
    font-weight: bold;
}

As for rounding, add border-radius: 6px to .no1.

edited Mar 22 '13 at 10:01

Matthew Strawbridge

19,940
10
72
93

answered Mar 31 '12 at 16:14

saluce

13,035
3
50
67

Unfortunately I could only pick one as an answer, but I picked this one as it is was the most "complete" answer because it answered both parts of my question. Thanks! I'm once again very impressed by the community at Stackoverflow :-D – Matthew Galloway Mar 31 '12 at 16:35

score 0 · Answer 3 · answered Mar 31 '12 at 16:14

0

Use this to generate the round corners css for you border-radius.com

.myClass{

-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;

}

answered Mar 31 '12 at 16:14

Milindu Sanoj Kumarage

2,714
2
31
54

score 0 · Answer 4 · answered Mar 31 '12 at 16:16

0

 .no1
    {
        width: 390px;
        border: 1px solid #444;
        margin: 0 auto;
        border-radius:5px;  //add this
    }

answered Mar 31 '12 at 16:16

AliRıza Adıyahşi

15,658
24
115
197

Flowchart with CSS/HTML

4 Answers4