Header Background

[shapper]

Hello,

I am trying to create a header with a background color and a padding
of the text.
I know that if I apply the background color to the header it will
expand 100%.
So I did the following:

<h1><span>Heade r</span></h1>

h1 {}

h1 span {
background-color: #252525;
color: #D2D2D2;
font: normal 1.2em/1.8 Verdana, Geneva, sans-serif;
letter-spacing: 0.1em;
padding: 0.8em;
}

But now I am not able to apply the top and bottom border.

How should I created this header?

Thanks,
Miguel

[David Stone]

In article
<7e************ *************** *******@a1g2000 hsb.googlegroup s.com>,
shapper <md*****@gmail. comwrote:

Hello,

I am trying to create a header with a background color and a padding
of the text.
I know that if I apply the background color to the header it will
expand 100%.
So I did the following:

<h1><span>Heade r</span></h1>

Not immediately answering your question, but why bother with
the span at all? The css can be applied directly to h1...

[Ben C]

On 2008-05-21, shapper <md*****@gmail. comwrote:
[...]

The guessing is ok but I am afraid that there will be a browser or
configuration when this will break the design.
I am trying to put the header just next to the tag after ... no space
and no overlapping ... just on the limit.

That's why guessing is no good. It's all right if you just want a small
gap-- you can make the gap a bit too big. But if you want things to fit
together exactly, use the float.

I was using px for margin guessing because when I was solving the list
problem that space increased with the text resize ... now in the
header it does not ... I am confused ... In my opinion it should
increase.

Here are my latest experiments:
http://www.27lamps.com/public/Header1.htm
http://www.27lamps.com/public/Header2.htm
http://www.27lamps.com/public/Header3.htm

On Header2 example I am not sure why am I getting a bigger size ...
maybe the spam is getting 1.2em relative to the h1?

Yes, that's what's happening

H1 gets a big font-size from the default stylesheet (probably about
2em). In Header1.htm you're replacing that with 1.2em, so making it
smaller.

In Header2.htm, the H1's font size is still 2em (since you didn't set
it), and you're making the span 1.2 times as big again.

Not sure ... how to solve this?

Just put the font-size: 1.2em on the H1 instead of on the span in all
cases.