CODEWITHSUNDEEP
htmlcss
Laetis
Laetis

Reputation: 1357

Draw a line in a div

I want to make a div that is a line. Here is my HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
    <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.

Upvotes: 35

Views: 244035

Answers (6)

Ashutosh Kumar
Ashutosh Kumar

Reputation: 1

You change position absolute to relative

Upvotes: 0

Mohammad Reza Shahrestani
Mohammad Reza Shahrestani

Reputation: 1149

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.

Upvotes: 0

ProgLover
ProgLover

Reputation: 561

No need for css, you can just use the HR tag from HTML

<hr />

Upvotes: 35

CreativePS
CreativePS

Reputation: 1093

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;
}

Upvotes: 2

imGaurav
imGaurav

Reputation: 1053

$('.line').click(function() {
  $(this).toggleClass('red');
});
.line {
  border: 0;
  background-color: #000;
  height: 3px;
  cursor: pointer;
}
.red {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<hr class="line"></hr>
<p>click the line</p>

Upvotes: 10

Mukul Kant
Mukul Kant

Reputation: 7122

Its working for me

 .line{
width: 112px;
height: 47px;
border-bottom: 1px solid black;
position: absolute;
}
<div class="line"></div>

Upvotes: 40

Related Questions