Draw a Line in a Div
I Want to Make a Div That Is a Line. Here Is My Html: and Here My Css: .Line{ Width: 112Px; Height: 47Px; Border-Bottom: 1Px Solid Black; Position: Absolute; }...
I want to make a div that is a line. Here is my HTML:
<html xmlns="">
<head>
<link href="clickable.css" type="text/css" rel="stylesheet" />
</head>
<body >
<div class="line"></div>
</body >
</html>
And here my CSS:
.line{
width: 112px;
height: 47px;
border-bottom: 1px solid black;
position: absolute;
}
</style>
Nothing is displaying, something is probably wrong in my CSS, but I can't see what.
6 Answers
Its working for me
.line{
width: 112px;
height: 47px;
border-bottom: 1px solid black;
position: absolute;
}<div class="line"></div>No need for css, you can just use the HR tag from HTML
<hr />
$('.line').click(function() {
$(this).toggleClass('red');
});.line {
border: 0;
background-color: #000;
height: 3px;
cursor: pointer;
}
.red {
background-color: red;
}<script src=""></script>
<hr class="line"></hr>
<p>click the line</p>If the div has some content inside, this will be the best practice to have a line over or under the div and maintaining the content spacing with the div
.div_line_bottom{
border-bottom: 1px solid #ff0000;
padding-bottom:20px;
}
.div_line_top{
border-top: 1px solid #ff0000;
padding-top:20px;
}
Answered this just to emphasize @rblarsen comment on question :
You don't need the style tags in the CSS-file
If you remove the style tag from your css file it will work.
You change position absolute to relative
Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.
