Particular Header Style

Anyone know how it's done

[bachya]

I want to create a particular header style that does something like this:

##text############################################

To explain what's going on here: where "text" is, I want the background of that particular area to be the same background color as the container. Where all the #'s are, I want a different background color.

Anyone have an idea of how I can accomplish this? Thanks.

[zackattack]

Hi bachya

This can be acheived easily using a span inside the heading. Adjust the padding on the span style to increase space to the left and right of the text, and adjust the margin on the span to indent the text.

HTML:

<h1><span>Hello</span></h1>

CSS:

h1 {
background: #ccc;
}
h1 span {
background: #fff;
padding: 0 15px;
margin-left: 15px;
}

Hope this helps

ZA

[bachya]

Great ZA, that works perfectly - thanks! :D