BarGraph side margin Issue

I am making a static graph Bars using simple HTML and CSS i am facing some problem in setting the Graph bar.

I dont want to give margin-left again and again can I give margin-left to my parent class “groupBar” like margin-left :10px, instead to giving every time long left margins.

here are my working:

HTML:

 <div class="groupBar">
 	  <div class="yellowBar"></div>
 	  <div class="greenBar"></div>
 	  <div class="blackBar"></div>
 	</div>
 	
 	<div class="groupBar margin-left30">
 	  <div class="yellowBar"></div>
 	  <div class="greenBar"></div>
 	  <div class="blackBar"></div>
 	</div>
 	
 	<div class="groupBar margin-left60">
 	  <div class="yellowBar"></div>
 	  <div class="greenBar"></div>
 	  <div class="blackBar"></div>
 	</div>
 	
 	<div class="groupBar margin-left90">
 	  <div class="yellowBar"></div>
 	  <div class="greenBar"></div>
 	  <div class="blackBar"></div>
 	</div>

css:

.groupBar{
width: 22px;
position: absolute ;
}

.greenBar {
  background-color: green;
  z-index:2;
  height: 70px;
  cursor:pointer;
}

.blackBar {
  background-color: #000;
  z-index:3;
  height:80px; 
  cursor:pointer;
}

.yellowBar {
  background-color: yellow;
  z-index:1;
  height: 90px;
  cursor:pointer;
}

.greenBar:hover,.yellowBar:hover,.blackBar:hover{
background-color: #ccc;
}

.margin-left30{
margin-left:30px;
}

.margin-left60{
margin-left:60px;
}

.margin-left90{
margin-left:90px;
}

Hi there shahzadsiddiqui8,

try this simplified version…

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
.groupBar {
    float: left;
    width: 1.375em;
    margin-right: 0.5em;
 }
.groupBar span {
     display: block;
     cursor: pointer;
 }
.groupBar span:hover {
    background-color: #ccc;
 }
.groupBar span:nth-of-type(2) {
    height: 4.375em;
    background-color: #008000;
 }
.groupBar span:nth-of-type(3) {
    height:5em; 
    background-color: #000;
 }
.groupBar span:nth-of-type(1) {
    height: 5.625em;
    background-color: #ff0;
 }
</style>
</head>
<body> 
 <div class="groupBar">
  <span></span>
  <span></span>
  <span></span>
 </div>	
 <div class="groupBar">
  <span></span>
  <span></span>
  <span></span>
 </div>	
 <div class="groupBar">
  <span></span>
  <span></span>
  <span></span>
 </div>
</body>
</html>

coothead

can we not try it without nth-of-type because seems it will create some problem on browser IE9…

The nth-of-type selector is supported in IE9.

^ You will have to click on “Show All” to see obsolete browsers like IE9 listed.
Though IE9 is not an MS supported browser any more so you shouldn’t need to support it.

hover is not working…

.groupBar span:hover {
    background-color: #ccc;
 }

Hi there shahzadsiddiqui8,

I am very sorry about that faux pas of mine. :wonky:

This…

.groupBar span:hover{
    background-color: #ccc;
 }

…needs to be removed from it’s present position
and then placed at the end of the CSS code. :winky:

coothead

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.