CODEWITHSUNDEEP
css
Emre Aydin
Emre Aydin

Reputation: 553

How can I create a h1 as in the example?

I want to create the h1 header as an example below. I saw this type of header at some website which I could not remember it's address right now. If I'd remember, I'd copy it from their website. Unfortunally I forgot. Here's the the PSD screen-shot:

image
(source: hizliresim.com)

Anyway, no matter what I've tried I still could not get the result. What I got is:

image
(source: hizliresim.com)

Here's my code:

div.big-header div.header-left h1 {
    float: left;
    color: #fff;
    background: #c00000;
    font: bold 35px "Open Sans";
    padding: 1px 5px;
    margin-bottom: 35px;
}

and here's JSFiddle

Question: How can I create the header as example above (first picture)

Upvotes: 2

Views: 87

Answers (2)

G.L.P
G.L.P

Reputation: 7217

Try like this: Demo

Updated Demo

Update: Just added display:inline, line-height with box-decoration-break along with your code..

CSS:

h1 {
    color: #fff;
    background: #c00000;
    font: bold 35px sans-serif;
    padding: 1px 5px;
    margin-bottom: 35px;
    /* newly added code */
    display:inline;
    line-height:44px;
   -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
     box-decoration-break: clone;
}

Upvotes: 6

pzaenger
pzaenger

Reputation: 11984

Use a span inside your h1:

h1 {
    float: left;
    color: #fff;
    font: bold 35px sans-serif;
    padding: 1px 5px;
    margin-bottom: 35px;
}

h1 > span {
    background: #c00000;
}

And:

<h1><span>How to create a page with PHP?</span></h1>

Upvotes: 3

Related Questions