Put div on top of the text - html

Question

I have been trying and I don't really know how to solve this:
I need to style the title of the content like this:
Now, I've been trying to have position:absolute some other stuff, but it just doesn't seem to work.
My code:
<div class="content_item">
<div class="double_line"></div>
<h2>Ce facem</h2>
</div>
css:
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display:inline-block;
width:100%;
height:5px;
position: absolute;
}
.content_item>h2{
text-align: center;
background-color: #ffffff;
}
So what I wanted was to put the text over the line and a white background on the text.
fiddle: http://jsfiddle.net/Qu849/
Can you please help me?

Answer 1

This fiddle kinda works:
http://jsfiddle.net/Qu849/4/
Anyway I wouldn't do that code for this purpose. Consider this:
Just use a div with a background image (repeat-x) with those "borders"
Inside that div use a span, centered, and with a background:#fff;
That is just better.
EDIT
Check #drip answer to do what I described: https://stackoverflow.com/a/20070686/2600397

Answer 2

You need to position you h2 above your bordered div. My idea would be to make h2 display:inline-block; so you can use text-align:center; on the parent to center the child h2 and then just use position:relative; and top:-20px; on the h2 to move it up a bit
.content_item{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
position:relative;
text-align:center;
margin-top:50px;
}
.content_item > h2{
text-align: center;
background-color: white;
padding:3px 15px;
font-size:14px;
display:inline-block;
position:relative;
top:-20px;
}
http://jsfiddle.net/Qu849/8/

Answer 3

Since the double_line div is absolutely positioned, it will be above any none positioned elements.
to put both elements on a relative plane, you need to position the h2 in the same manner (either absolute, or relative).
After that you can play with the margins or top/left properties of the elements to position them over each other.

Answer 4

You can do it with a backgruund image very easy.
If you are ok with using background images.
HTML:
<h2><span>Ce facem</span></h2>
CSS:
h2 {
background: url(http://i.imgur.com/7LGlQ0I.png) repeat-x 0 center;
text-align: center;
}
h2 span { padding: 0 20px; background-color: #fff; }
Demo
Or if you really prefer usin bordered element:
Then with a little tweaks in the css:
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
position: absolute;
top: 12px;
}
.content_item>h2{
display: inline;
position: relative;
z-index: 2;
text-align: center;
padding: 0 10px;
background-color: #ffffff;
}
.content_item{
text-align: center;
position:relative;
}
Demo

Answer 5

Yes, Rodik is right
Try using:
.content_item>h2 {
text-align: center;
display: block;
width: 200px;
background-color: #ffffff;
margin-top: -20px;
margin-left: 30%;}

Answer 6

You have to give position:absolute; and margin to your <h2>
Replace your <h2> style with this:
.content_item>h2{
text-align: center;
background-color: #ffffff;
position:absolute;
margin:-10px 41% 0px;
}
fiddle

Answer 7

if in doubt, you could just make the text an image with full transparent background, this makes it easier when it comes to responsive webpage layouts (different resolutions etc.)

Answer 8

Pure Css with No images
Ammend this in your CSS to check if it helps :
.content_item>h2{
text-align: center;
background-color: #ffffff;
display:inline-block; // makes header size equal to text width
width : 30%; //gives indented left-right white-space
position:absolute; //to overlay it on double-line
top : 0px; //position
display: table; //centre inline elements
margin : 0 auto;
margin-left : 40% //hack to center it
}

Answer 9

.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display: inline-block;
width: 100%;
height: 5px;
position: relative;
}
.content_item>h2{
background-color: #FFFFFF;
width: 200px;
z-index: 12;
position: absolute;
top: -23px;
text-align: center;
left: 0;
right: 0;
margin: 20px auto;
}
.content_item{
position:relative;
}
}
use this code usefull for you.
see this link http://jsfiddle.net/bipin_kumar/35T7S/1/

Answer 10

Here is one way of doing it:
.content_item {
position:relative;
}
.content_item > div {
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
XXdisplay:inline-block; /* not needed */
width:100%;
height:5px;
position: absolute;
z-index: -1;
top: 50%;
margin-top: -3px;
}
.content_item > h2 {
text-align: center;
background-color: #ffffff;
width: 200px; /* must be specified */
margin: 0 auto; /* for centering */
}
To the .double-line div, add z-index: -1 to force it to be painted under the h2 element.
Use top: 50% and a negative margin-top: -3px to vertically align the double lines (if that is what you need).
You then need to specified a width for h2 other wise it will be 100% wide and the white background will paint over the dobule-lines. Add margin: 0 auto to center the h2 within the parent container.
You do not need display: inline-block for the .double-line since the absolute positioning will force the display type to be block.
Demo at: http://jsfiddle.net/audetwebdesign/nB2a3/

Answer 11

You can do this without absolute positioning and without changing the HTML.
Rather than having the text-align: center on the <h2>, you can set it on the .content-item. Then use display: inline-block on the <h2> and relatively position it with a negative top value.
Like so:
.content_item>div {
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
width:100%;
height:5px;
}
.content_item>h2 {
background-color: #ffffff;
display: inline-block;
margin: 0;
padding: 0 40px;
position: relative;
top: -15px;
}
.content_item {
text-align: center;
}
http://jsfiddle.net/Qu849/11/

Answer 12

Try this, another way
.content_item>div{
border-top: 2px solid #c2c1c1;
border-bottom: 2px solid #a5a4a4;
display:inline-block;
width:100%;
height:5px;
position: relative;
}
.content_item>h2{
text-align: center;
background-color: #ffffff;
position:absolute;
margin-top:-30px;
margin-left:50%;
}
When z-index not used this type of issue, use above format.