Develop Reference

How to make a horizontal line without using <hr> tag?

How can I draw a thin horizontal line without using the <hr> tag ?
I tried this:
.horizontal-line{
border-top: 1px solid #9E9E9E;
border-bottom: 1px solid #9E9E9E;
}
Although it works, I want this line to be thinner. I tried to reduce 1px to 0.5px, but it didn't work.

Per this css-tricks discussion, you could give this a go:
.class-name:after {
content: " ";
display: block;
border-bottom: 0.5px solid #9E9E9E;
}
<div class="class-name"></div>

You can use it but there is not much difference.
.line {
display: inline-block;
width: 100%;
border-top: 0.2px solid red;
}
hr {
border-top: 0.2px solid red;
}
<div>
content
</div>
<span class='line'></span>
<div>
content
</div>
<hr>
<div>
content
</div>

There are many ways of doing this. we cant make the size of the borders less than 1px in CSS so I have tried this way. Feel free to change the opacity.
.horizental-line{
width: 100%;
height: 1px;
background-color: rgb(122, 121, 121);
opacity: 0.5;
}

jQuery addClass causes no effect

I have a class where I want to change a single attribute with a javascript function.
.msg_archivedropdown:before {
content:"";
display: block;
position:absolute;
width:0;
height:0;
left:-7px;
top:0px;
border-top: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:7px solid #FFFFFF;
}
I'm already using jQuery, so I've tried to do it with addClass:
function colorbubble(){
$("archivedropdown before").addClass("msg_archivedropdownhover before");
}
The added class looks like this, only the border color changes:
.msg_archivedropdownhover:before {
content:"";
display: block;
position:absolute;
width:0;
height:0;
left:-7px;
top:0px;
border-top: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:7px solid #DFDFDF;
}
Sadly, there's nothing changing. I've tried various kind of ways so far. I've tried to do it with:
$('.msg_archivedropdown before').css('border-right-color','#DFDFDF;');
Which got me nowhere and I also tried to loop through a getElementsbyClass which did not work either. I´m doing something wrong. Can someone please give me a hint? Thank you.
EDIT:
It's a speech-bubble where I made a triangle in the .msg_archivedropdown:before-class. On a mouseover event I want to change the color of the triangle as well. So I only want to change the color of the .msg_archivedropdown:before class.

You don't need jquery for a trivial case like this. You could just use :hover pseudo-class instead.
.msg_archivedropdown {
width: 100px;
height: 100px;
background-color: rebeccapurple;
position: relative;
}
.msg_archivedropdown::before {
content:"";
display: block;
position:absolute;
width:0;
height:0;
left:-7px;
top:0px;
border-top: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:7px solid #FFFFFF;
}
.msg_archivedropdown:hover::before {
border-right:7px solid #DFDFDF;
}
<div class="msg_archivedropdown"></div>

You want to change the pseudo :before element in Jquery and you can't do it use $('.msg_archivedropdown:before')
so your alternative is to add class with pseudo element as msg_archivedropdown and in function toggleClass then the new class apply on DOM with the boreder-color
Do it as below:
function colorbubble(){
$('.msg_archivedropdown').toggleClass('beforeClass');
}
.msg_archivedropdown:before,.beforeClass:before {
content:"";
display: block;
position:absolute;
width:0;
height:0;
left:3px;
top:0px;
border-top: 10px solid transparent;
border-bottom:10px solid transparent;
border-right:7px solid #FFFFFF;
background: red
}
.beforeClass:before{
border-right-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="msg_archivedropdown">show div</div>
<button onclick="colorbubble()">change</button>

How to create custom shape using CSS3 to match this?

I have a graph details, but i would like to show using css shapes. for that i am trying to create a css3 shapes to match my graphics ( see attached ) but i am not able to get the result.
How to reproduce this graphics?
my try: this is very bad:
<div class="container">
<div id="triangle-red"></div>
<div id="triangle-blue"></div>
<div id="triangle-yellow"></div>
</div>
#triangle-red {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
#triangle-blue {
height: 0;
width: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid blue;
}
#triangle-yellow
{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid yellow;
border-bottom: 50px solid transparent;
}
demo online
Note: according to the values of each comb, i would like the calculate the height and width, by the data what i am getting. (it's like graph)

First of all you will need 6 divs.
every div is triangle : to make one with css check this
use transform:rotate(xdeg)
for the shadows just change the color.
also use z-index to make the red divs above the blues

Padding keeps pushing relative elements

I have a div with text-align:center and 3 spans with text in them. I also have mouse over event that sets padding,background color and border. But when doing it it pushes the other 2 spans. Here is a jsfiddle for better visualization.
http://jsfiddle.net/93EBu/
<div id="div">
<span class="span">Word</span>
<span class="span">Word</span>
<span class="span">Word</span>
</div>
#div {
text-align:center;
}
.span {
margin: 0px 5%;
}
.spanhover {
border:1px solid blue;
background-color:lightblue;
padding:5px;
}

You can remove padding: 5px from .spanhover as well as adding border: 1px solid transparent to your span elements:
#div {
text-align:center;
}
.span {
margin: 0px 5%;
border: 1px solid transparent;
}
.spanhover {
border:1px solid blue;
background-color:lightblue;
}
Fiddle Demo
Also, instead of using unnecessary jQuery here, you can make use of :hover selector:
span:hover {
border:1px solid blue;
background-color:lightblue;
}
Fiddle Demo

TRY THIS:
#div {
text-align:center;
}
.span {
margin: 0px 5%;
padding:6px;
}
.spanhover {
border:1px solid blue;
background-color:lightblue;
padding:5px;
}
DEMO HERE: http://jsfiddle.net/93EBu/1/
The reason you are having this problem is because the padding you are adding to the spanhover class is pushing the elements. So you need to have the span already have the padding as well.... but since you have added a 1px border. You need to make the span padding be 6px... Padding + Border.

Prevent hover over active state

How to prevent hovering button,div,li if it already has active status by means of css?
#list-of-tests .item-test:hover {
background-color: #4d5f75;
border: solid 1px #4d5f75;
}
#list-of-tests .item-test:active {
background-color: #93c3cd;
border: solid 1px #93c3cd;
}

Two ways:
1) Use !important for the :active state:
#list-of-tests .item-test:active {
background-color: #93c3cd !important;
border: solid 1px #93c3cd !important;
}
2) Specify multiple states:
#list-of-tests .item-test:active,
#list-of-tests .item-test:active:hover {
background-color: #93c3cd;
border: solid 1px #93c3cd;
}