CODEWITHSUNDEEP
csshtml
Jones-Rocks
Jones-Rocks

Reputation: 15

Heading with text background

I want to make a heading, that looks like this

enter image description here

I tried the following:

HTML

<span class="header">Hallo</span><br /><span class="header">und Willkommen</span>

CSS:

span.header {
    background: #404040;
    color: #fff;
    display: inline;
    line-height: 43px;
    padding: 5px 10px;
    font-size: 24px;
    text-transform: uppercase;
}

It works, but I want the line to break automatically within a h1, without using <span> and a <br />.

Upvotes: 1

Views: 855

Answers (4)

Fico
Fico

Reputation: 2407

I suggest two alternative solutions using mentioned restrictions

"h1 heading without breaks and without span..."

First one: using only the heading tag h1 , Second one :helping with < a > tags

First alternative:Using only the heading tag h1

enter image description here

With small limitations you can take advantage of the white-space property with a value of "pre-wrap" (you can experiment with other values. I think this is the more suitable) It will work as when using the pre tag.

Take care of starting the text immediatly following the first tag and in the same line. if not you will get an extra line in your heading You break the heading as writing inside a pre tag.

<div>
   <h class="header">HALLO&nbsp;
 UND WILLKOMMEN</h>   
</div>

For the css you may avoid the display:inline declaration, if you will.

h.header{
    background: #404040;
    color: #fff;
    /* display:inline;*/
    line-height: 43px;
    padding: 5px 10px;
    font-size: 24px;
    text-transform: uppercase;
    white-space:pre-wrap;
  }

Little problem with the absence of right padding in the first line which I hacked with a nbsp instance;

fiddle here

Second alternative:Helping with < a > :

enter image description here

<div>
   <h1 class="header">
       <a>HALLO</a>
       <a>UND WILLKOMMEN</a>
    </h1>   
</div>

Trying to keep your original .header class , I only modify the display to table and instead of padding for top and bottom i included a margin declaration

h1.header a{
    background: #404040;
    color: #fff;
    display:table;
    line-height: 43px;
    padding: 0px 10px;
    margin:5px;
    font-size: 24px;
    text-transform: uppercase;
  }

fiddle here

Upvotes: 1

Brian Stephens
Brian Stephens

Reputation: 5261

Without a <br> how are you indicating where the line should break? Or, since you are calling it "automatic", how should the code determine where to break? It might help to provide the HTML that you want to be using so we get a better picture.

If you use a single h1 with no other tags, it would have to break on width, I guess.

Upvotes: 0

Firoz Ansari
Firoz Ansari

Reputation: 2515

You can use clear: both to create line break without <br/>

h1.header {
    background: #404040;
    color: #fff;
    display: inline;
    line-height: 43px;
    padding: 5px 10px;
    font-size: 24px;
    text-transform: uppercase;
    clear: both;
    float: left;
}

http://jsfiddle.net/S2m9n/1/

Upvotes: 0

periback2
periback2

Reputation: 1469

I like to use this set of attributes in a class to help me dealing with some problems of alignment (also cross-browsing problems):

.line_100{
    display:inline;
    float:left;
    height:auto;
    position:relative;
    text-align:left;
    width:100%
}

if you want each phrase to use one full line and you don't want to use the </br>, you can add each line them in a and call this css class I mentioned... take a look at this jsfiddle I made.

Upvotes: 1

Related Questions