CODEWITHSUNDEEP
htmlcsspositioncss-position
Mihai Bujanca
Mihai Bujanca

Reputation: 4209

Put div on top of the text

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. enter image description here

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?

Upvotes: 0

Views: 1848

Answers (12)

JEYASHRI R
JEYASHRI R

Reputation: 452

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.

Upvotes: 0

Kevin Cittadini
Kevin Cittadini

Reputation: 1469

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

Upvotes: 3

davidpauljunior
davidpauljunior

Reputation: 8338

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/

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

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/

Upvotes: 0

Bipin Kumar Pal
Bipin Kumar Pal

Reputation: 1017

 .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/

Upvotes: 0

NoobEditor
NoobEditor

Reputation: 15871

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
    }

Upvotes: 0

Slavenko Miljic
Slavenko Miljic

Reputation: 3846

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/

Upvotes: 2

JJmason
JJmason

Reputation: 15

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.)

Upvotes: 0

drip
drip

Reputation: 12943

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

Upvotes: 1

Parixit
Parixit

Reputation: 3855

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

Upvotes: 0

Shivang
Shivang

Reputation: 196

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

Upvotes: 0

Rodik
Rodik

Reputation: 4092

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.

Upvotes: 1

Related Questions