Creating vertical and horizontal lines to link text paragraphs with each other

Question

For our project website we wish to create a special layout where one line or several lines link text paragraphes or text boxes with each other, something like shown on this draft.

Do you know anything about a plugin or about html/css techniques I could use to do that?

The only thing I found so far is descriptions about how to create horizontal and vertical lines (hr and div class="verticalLine") and about css positioning.

Yet, I wonder if this strategy could cause problems with responsiveness of the website and if there are not any other direction I need to look.

I am ready to work on learning the HTML/CSS skills and then post the result here, just would like to know from an experienced person if this is the right direction to go.

Thanks a lot!

please could you visually explain what you're describing? as (at least to me), it sounds like some sort of flow chart? — jbutler483, Dec 12 '14 at 09:04
thanks jbutler483 for your question, I added a draft to my question above. (still learning how to use this interesting forum) — sabrina-gcc, Dec 12 '14 at 10:12
flow chart seems to be a concept that could fit to our idea, thanks! This might help with that, I will check it out now: http://stackoverflow.com/questions/15567278/how-to-make-a-flowchart-diagram-using-only-html-and-css — sabrina-gcc, Dec 12 '14 at 10:17
i'm glad I could give you a possible solution. However, I must tell you that this is most definitely ***not*** a forum. It is a question and answer site (very much so). But if you wanted to learn more, we always have the tour (top right of screen) you can take :) — jbutler483, Dec 12 '14 at 10:19

score 0 · Answer 1 · answered Dec 12 '14 at 10:28

You could pull this off using just CSS and pseudo elements. It's feasible to make it responsive, and browser support would be fairly good, but not complete. It's the kind of feature that is not completely necessary, so would degrade nicely:

.box {
    /* Default styles for our text boxes */
    background:rgb(240, 240, 240);
    border: 1px solid rgb(180, 180, 180);
    padding:2em;
    width:50%;
    float:left;
    position:relative;
    /* Need this for the after elements */
}
.box:nth-child(even) {
    /* Move every other box to the right */
    float:right;
}
.box:after {
    /* Creates an after element for our lines */
    content:"";
    height:50%;
    border-top:2px solid grey;
    border-right:2px solid grey;
    width:25%;
    position:absolute;
    left:100%;
    top:50%;
}
.box:nth-child(even):after {
    /* Move the lines for the even boes to the other side */
    left:auto;
    right:100%;
    border-right:none;
    border-left:2px solid grey;
}

<div class="box">
    
<h2>A title</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="box">
    
<h2>A title</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="box">
    
<h2>A title</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Take a look at this JS Fiddle to get started.

Creating vertical and horizontal lines to link text paragraphs with each other

1 Answers1