CODEWITHSUNDEEP
htmlcss
G.Z
G.Z

Reputation: 121

Div with text over <hr> line

How I can do this effect with <hr>? Div with content will be over <hr>. How to do that?

Hr line with text in image

This is my jsfiddle: http://jsfiddle.net/fnaYs/. I don't know how to put this text into image box. Any solutions?

After, I want to add this layout to wordpress, so I want put text in <div> or another element, not in css file.

Upvotes: 2

Views: 9445

Answers (3)

Nir
Nir

Reputation: 4013

Here's a working jsFiddle with what you need: http://jsfiddle.net/2LaLb/

<hr class="line" /> <div class="mydiv">Div with text</div>

and the corresponding CSS would be:

    hr.line {
    padding: 0;
    border: 1px solid;
    color: #333;
    text-align: center;
}

    .mydiv {
background:red;
    border:1px solid red;
    width:100px;
    position:absolute;
    top:0;left:400px;
}

As you can see it produces the result you want.

Upvotes: -2

Anshu Dwibhashi
Anshu Dwibhashi

Reputation: 4675

When you set the position attribute of a variable to relative, it basically means that the position of the element is relative to the browser.

So when you say top:-5px; it means you are requesting the browser to put your element 5 pixels above the position where it actually is supposed to be..

All you have to do is, set the top attribute for the div, in CSS to some negative value. like this:

<hr />
<div style="position:relative;top:-5px;">DIV CONTENT</div>

Replace the -5px with your requirement...

Upvotes: 5

Ali Gajani
Ali Gajani

Reputation: 15091

I have coded a solution (there might be other ways).

Here is a working JSFiddle: http://jsfiddle.net/fnaYs/6/

CSS

hr.line {
    padding: 0;
    border: 1px solid;
    color: #333;
    text-align: center;
}

.box {
    background-color:teal;
    width:100px;
    height:30px;
    position:absolute;
    left: 40%;
    bottom:90%;
    padding-top:20px;

}

HTML

<hr class="line"/>
<div class="box"> Text </div>

enter image description here

Upvotes: 1

Related Questions