create floating labels in HTML/CSS

Question

Can someone help me to create html for below? I am creating a simple html progress tracker, which looks similar to stacked bar chart. I would like to display title labels pointing to each stack in the graph. How can I do that? It should work on IE8.

Here's a fiddle I have created so far jsfiddle link , but unable to create title labels which you see around the graph

<div class="colWrapper">
        <div class="bar" style="background-color:#4cff00;width:40%">
            <div align="center" class="barLabel"><span>Done</span></div>
        </div>
        <div class="bar" style="background-color:#ff0000;width:5%">
            <div align="center" class="barLabel"></div>
        </div>
        <div class="bar" style="background-color:#00ffff;width:50%">
            <div align="center" class="barLabel"><span>Pending</span></div>
        </div>
        <div class="bar" style="background-color:#0094ff;width:5%">
            <div align="center" class="barLabel"><span></span></div>
        </div>
    </div>

Below is the prototype I am trying to create,

How do you expect to handle overlaping if like done is too thin and collide with the neighbor label? Maybe on hover labels would be simpler to implement. — Victor
– Victor, Commented Jul 24, 2015 at 18:59
if the stack layer is too thin then we will not show them. We can either mouse hover to see the label. But the one you see on the side, for example start date,today, end date, impeded, future enhancement need to be floating around the bar pointing the stack region. — rajcool111
– rajcool111, Commented Jul 24, 2015 at 19:09

Danillo Felixdaal · Accepted Answer · 2015-07-24 19:54:14Z

4

how about this? Try using pseudo elements, (:before/:after),

and absolutely position them above the bars, and below.

i made a quick fiddle showing one of the : its supported by ie8

https://css-tricks.com/browser-support-pseudo-elements/

https://jsfiddle.net/skyz37f9/5/

<-- i did a quick test on browserstack to confirm ie8

Hope this helps

Ps u can also combine hover:after (if u only wish to show on hover)

.colWrapper{
    margin-top:50px;
    height:60px;
    width:500px;
    position:relative;
    border:1px solid #ccc;
}

.barContainer{
    position:absolute;
    bottom:0;
    height:100%;
}

.bar{
    height:100%;
    float:left; 
    font-size:12px;
    position: relative;
}

.bar1:after {
  content: 'Start Date: \A Jan 1st, 2014';
  position: absolute;
  top: -50px;
  width: 100%;
  white-space: pre;
}

.bar1:before {
  content: '';
    border-left: 3px solid black;
    height: 20px;
    width: 100%;
    position:absolute;
    top: -20px;
}

.bar2:hover:after {
	content: 'Impeded';
	position: absolute;
	bottom: -35px;
	width: auto;
	white-space: pre;
	text-align: center;
	margin-left: -35%;
}
.bar2:hover:before {
	content: '';
	border-left: 3px solid black;
	height: 20px;
	width: 100%;
	position:absolute;
	bottom: -20px;
	left: 50%;
	margin-left: -3px;
}

.barLabel{
    margin-top:10px;
}

<div class="colWrapper">
    <div class="bar bar1" style="background-color:#4cff00;width:40%">
        <div align="center" class="barLabel"><span>Done</span></div>
    </div>
    <div class="bar bar2" style="background-color:#ff0000;width:5%">
        <div align="center" class="barLabel"></div>
    </div>
    <div class="bar" style="background-color:#00ffff;width:50%">
        <div align="center" class="barLabel"><span>Pending</span></div>
    </div>
    <div class="bar" style="background-color:#0094ff;width:5%">
        <div align="center" class="barLabel"><span></span></div>
    </div>
</div>

edited Jul 24, 2015 at 19:54

answered Jul 24, 2015 at 19:29

Danillo Felixdaal

5834 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rajcool111 Over a year ago

That's what I am looking for. Thanks! Can you also show, how can I do it for the labels below the bar? For labels like Impeded, Future Enhancements?

Danillo Felixdaal Over a year ago

updated the answer with labels below (just use same value's but bottom: -?px instead of top :)

Victor · Accepted Answer · 2015-07-24 20:09:37Z

.colWrapper {
  height: 60px;
  width: 500px;
  position: relative;
  border: 1px solid #ccc;
  padding: 2em;
}
.barContainer {
  position: absolute;
  bottom: 0;
  height: 100%;
}
.bar {
  height: 100%;
  float: left;
  font-size: 12px;
}
.barLabel {
  margin-top: 10px;
}
.bar {
  position: relative;
}
.label-below {
  position: absolute;
  top: 100%;
}
.label-above {
  position: absolute;
  bottom: 100%;
}

<div class="colWrapper">
  <div class="bar" style="background-color:#4cff00;width:40%">
    <div align="center" class="barLabel"><span>Done</span>
    </div>
    <div class="label-above">Start Date:
      <br>1 Jun 2000</div>
  </div>
  <div class="bar" style="background-color:#ff0000;width:5%">
    <div align="center" class="barLabel"></div>
    <div class="label-above">Today: Mar 2 2014</div>
    <div class="label-below">Impeeded</div>
  </div>
  <div class="bar" style="background-color:#00ffff;width:50%">
    <div align="center" class="barLabel"><span>Pending</span>
    </div>
  </div>
  <div class="bar" style="background-color:#0094ff;width:5%">
    <div align="center" class="barLabel"><span></span>
      <div class="label-above">End Date: Dec 31 2014</div>
      <div class="label-below">Future Enhancement</div>
    </div>
  </div>
</div>

Victor · Accepted Answer · 2015-07-24 20:24:57Z

Another way of doing it in a cleaner flexible way is like this

That way you avoid absolute positioning problems. And I like how the HTML structure looks like.

/*the entire bar */
.bar {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  width: 100%;
  list-style: none;
}
/*each bar segment */
.bar li {
  display: inline-block;
  -border: 1px solid black;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

/*each bar segment fill thing*/
.bar li div {
  background: gray;
  height: 50px;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  text-align: center;
}

/*segments labels*/
.bar li label {
  display: block;
  text-align: center;
}
.bar li:first-child label {
  text-align: left;
}
.bar li:last-child label {
  text-align: right;
}

/* arrow */
.bar label:last-child:before{
  display: block;
  content: "|";
}
.bar label:first-child:after{
  display: block;
  content: "|";
}

<ul class="bar">
  
  <li style="width: 20%">
    <label>above</label>
    <div style="background-color: red">inside</div>
    <label>below</label>
  </li>
  
  <li style="width: 30%">
    <label>above</label>
    <div style="background-color: yellow">inside</div>
    <label>below</label>
  </li>
  
  <li style="width: 20%">
    <label>above</label>
    <div style="background-color: blue">inside</div>
    <label>below</label>
  </li>

  <li style="width: 30%">
    <label>above</label>
    <div style="background-color: magenta">inside</div>
    <label>below</label>
  </li>
  
</ul>

Rachel Gallen · Accepted Answer · 2015-07-24 19:34:09Z

Here's my attempt using divs with borders before and after

https://jsfiddle.net/skyz37f9/3/

.colWrapper {
    height:60px;
    width:500px;
    position:relative;
    border:1px solid #ccc;
}
.barContainer {
    position:absolute;
    bottom:0;
    height:100%;
}
.bar {
    height:100%;
    float:left;
    font-size:12px;
}
.barLabel {
    margin-top:10px;
}
.label1 {
    width:200px!important;
    background-color:#fff;
    display:table-cell;
    font-size:small;
}
#labelWrapper {
    height:50px;
    width:500px;
    position:relative;
    border-right:1px solid;
    border-left:1px solid;
}
.label2 {
    width:50px;
    background-color:#fff;
    display:table-cell;
    border-left:1px solid;
    font-size:small;
}
.label3 {
    width:250px;
    background-color:#fff;
    display:table-cell;
    text-align:right;
    font-size:small;
}
#status {
    height:50px;
    width:500px;
    position:relative;
}
.stat1 {
    width:210px!important;
    background-color:#fff;
    display:table-cell;
    border-right:1px solid;
    font-size:small;
    text-align:right;
}
.stat2 {
    width:280px!important;
    background-color:#fff;
    display:table-cell;
    border-right:1px solid;
    font-size:small;
    text-align:right;
}

<div id="labelWrapper">
    <div class="label1">Start:
        <br>Jan 1 2014</div>
    <div class="label2">Today:
        <br>Mar 2 2014</div>
    <div class="label3">End Date:
        <br>Dec 31 2014</div>
</div>
<div class="colWrapper">
    <div class="bar" style="background-color:#4cff00;width:40%">
        <div align="center" class="barLabel"><span>Done</span>

        </div>
    </div>
    <div class="bar" style="background-color:#ff0000;width:5%">
        <div align="center" class="barLabel"></div>
    </div>
    <div class="bar" style="background-color:#00ffff;width:50%">
        <div align="center" class="barLabel"><span>Pending</span>

        </div>
    </div>
    <div class="bar" style="background-color:#0094ff;width:5%">
        <div align="center" class="barLabel"><span></span>

        </div>
    </div>
</div>
<div id="status">
    <div class="stat1">Impeded</div>
    <div class="stat2">Future Enhancement</div>
</div>

Collectives™ on Stack Overflow

create floating labels in HTML/CSS

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related