CODEWITHSUNDEEP
htmlcssheader
edgarmtze
edgarmtze

Reputation: 25058

Join separator and header

I have some code to display a separator and header

I currently have

enter image description here

.content-wrap {
    width: 1024px;
    margin: 0 auto;
}

.content-wrap section section {
    background: none;
    margin: 0;
}
.content-wrap section {
position: relative;
padding: 125px 0 25px 0;
background: url(http://www.lebiscuit.com.mx/section-sep.png) repeat-x left 25px;
}



h1 {
    font-size: 40px;
    float: right;
    line-height: 50px;
    letter-spacing: -0.9px;
    color: #ffffff;
    padding:25px 0;
}


body {background-color:#b0c4de;}

this is the html

<div class="content-wrap">
     <section id="services" >
             <h1>title</h1>
    </section>    
</div>

The desired output is

enter image description here

How to keep the separator and add the separator to h1?

Please find the jsfiddle here html

Something like

<h1 class="bck"></div>

.bck h1
{
float: right
margin: 10px
background-color:transparent;
}

Upvotes: 1

Views: 296

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191809

Since you're using relative positioning on the section, you would do well to use absolute positioning on the heading (h1):

#services h1 {
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    right: 0;
    background-color: lightSteelBlue;
}

The background-color is so the border line does not go through the header.

http://jsfiddle.net/ExplosionPIlls/HR2Xa/2/

Upvotes: 1

Related Questions