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

[Nik Coughlin]

Re: Header Background

"shapper" <mdmoura@gmail. comwrote in message
news:7e2ee920-7fdc-4de4-b503-82cea40e28ae@a1 g2000hsb.google groups.com...

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?

What do you mean?

I was able to apply a top and bottom border just fine, using exactly your
code::

http://nrkn.com/headerBackground/

[shapper]

Re: Header Background

On May 20, 1:40 am, "Nik Coughlin" <nrkn....@gmail .comwrote:

"shapper" <mdmo...@gmail. comwrote in message
>
news:7e2ee920-7fdc-4de4-b503-82cea40e28ae@a1 g2000hsb.google groups.com...
>
>
>

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?

>
What do you mean?
>
I was able to apply a top and bottom border just fine, using exactly your
code::
>
http://nrkn.com/headerBackground/

Sorry, not border. Top and Bottom padding.

[dorayme]

Re: Header Background

In article
<7e2ee920-7fdc-4de4-b503-82cea40e28ae@a1 g2000hsb.google groups.com>,
shapper <mdmoura@gmail. comwrote:

I know that if I apply the background color to the header it will
expand 100%.

How do you know things that look false?

--
dorayme

[Nik Coughlin]

Re: Header Background

"shapper" <mdmoura@gmail. comwrote in message
news:3f987ee7-740d-4c6e-ac1d-6ac2c6617187@34 g2000hsf.google groups.com...

On May 20, 1:40 am, "Nik Coughlin" <nrkn....@gmail .comwrote:

>"shapper" <mdmo...@gmail. comwrote in message
>>
>news:7e2ee92 0-7fdc-4de4-b503-82cea40e28ae@a1 g2000hsb.google groups.com...
>>
>>
>>

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?

>>
>What do you mean?
>>
>I was able to apply a top and bottom border just fine, using exactly your
>code::
>>
>http://nrkn.com/headerBackground/

>
Sorry, not border. Top and Bottom padding.

Top and bottom padding work fine. See the following example, where I've
removed top and bottom padding from the second h1:

http://nrkn.com/headerBackground/

[Ben C]

Re: Header Background

On 2008-05-20, shapper <mdmoura@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%.

It will take all of the available width, since auto width is "greedy"
for normal-flow block boxes.

So I did the following:
>
><h1><span>Head er</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?

Are you talking about the way the span's padding and border overflow the
<h1>'s box?

I would advise don't decorate inline boxes in this way. Background
colours are OK, but as I tried to explained previously, top and bottom
borders and padding on inline boxes are ephemera without substance that
are visible but have no ability to move anything else on the page out of
their way.

(Inline box top and bottom margins are even worse: they are invisible
ephemera without substance.)

Better decorate the <h1itself but give it shrink-to-fit width, which
you can do by floating it left or making it display: table (the latter
won't work in IE).

Or you could stick to inline box decoration but give the <h1enough
padding to make room for it, but this involves guesswork.

[David Stone]

Re: Header Background

In article
<7e2ee920-7fdc-4de4-b503-82cea40e28ae@a1 g2000hsb.google groups.com>,
shapper <mdmoura@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...

[shapper]

Re: Header Background

On May 20, 8:16 am, Ben C <spams...@spam. eggswrote:

On 2008-05-20, shapper <mdmo...@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%.

>
It will take all of the available width, since auto width is "greedy"
for normal-flow block boxes.
>
>
>

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?

>
Are you talking about the way the span's padding and border overflow the
<h1>'s box?
>
I would advise don't decorate inline boxes in this way. Background
colours are OK, but as I tried to explained previously, top and bottom
borders and padding on inline boxes are ephemera without substance that
are visible but have no ability to move anything else on the page out of
their way.
>
(Inline box top and bottom margins are even worse: they are invisible
ephemera without substance.)
>
Better decorate the <h1itself but give it shrink-to-fit width, which
you can do by floating it left or making it display: table (the latter
won't work in IE).
>
Or you could stick to inline box decoration but give the <h1enough
padding to make room for it, but this involves guesswork.

Hi,

Sorry, for the delay of my answer. I had problems with my ISP for the
past hours.

Ben, if I use float I will need to clear the float after it the header
tag?
I am using the guessing method in this method using pixels as measure
and not em.
It work with the list items I was working on ...

About display: table I have done it a few hours ago and it worked ...
but I was told this is not a good option sometime ago.
I am not sure if I can do this ...

I will upload some of my experiences later today ...

Thank You,
Miguel

[Ben C]

Re: Header Background

On 2008-05-20, shapper <mdmoura@gmail. comwrote:

On May 20, 8:16 am, Ben C <spams...@spam. eggswrote:

>On 2008-05-20, shapper <mdmo...@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%.

>>
>It will take all of the available width, since auto width is "greedy"
>for normal-flow block boxes.

[...]

>>
>Are you talking about the way the span's padding and border overflow the
><h1>'s box?
>>
>I would advise don't decorate inline boxes in this way. Background
>colours are OK, but as I tried to explained previously, top and bottom
>borders and padding on inline boxes are ephemera without substance that
>are visible but have no ability to move anything else on the page out of
>their way.
>>
>(Inline box top and bottom margins are even worse: they are invisible
>ephemera without substance.)
>>
>Better decorate the <h1itself but give it shrink-to-fit width, which
>you can do by floating it left or making it display: table (the latter
>won't work in IE).
>>
>Or you could stick to inline box decoration but give the <h1enough
>padding to make room for it, but this involves guesswork.

>
Hi,
>
Sorry, for the delay of my answer. I had problems with my ISP for the
past hours.
>
Ben, if I use float I will need to clear the float after it the header
tag?

Yes.

I am using the guessing method in this method using pixels as measure
and not em. It work with the list items I was working on ...

At least guess with em-- then it should be fairly close. The inline box
usually runs vertically from the font's max ascent to its max descent,
which is about 1em.

But it all depends on what the particular font designer thought "1em"
and "max ascent" and "max descent" meant, and whether/how the browser
creators also fudged things...

About display: table I have done it a few hours ago and it worked ...
but I was told this is not a good option sometime ago.
I am not sure if I can do this ...

Display: table is a good 'un, except it doesn't work in IE. So it just
depends on whether you need to support IE.

[shapper]

Re: Header Background

On May 20, 2:42 pm, Ben C <spams...@spam. eggswrote:

On 2008-05-20, shapper <mdmo...@gmail. comwrote:
>
>
>

On May 20, 8:16 am, Ben C <spams...@spam. eggswrote:

On 2008-05-20, shapper <mdmo...@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%.

>

It will take all of the available width, since auto width is "greedy"
for normal-flow block boxes.

[...]
>

Are you talking about the way the span's padding and border overflow the
<h1>'s box?

>

I would advise don't decorate inline boxes in this way. Background
colours are OK, but as I tried to explained previously, top and bottom
borders and padding on inline boxes are ephemera without substance that
are visible but have no ability to move anything else on the page out of
their way.

>

(Inline box top and bottom margins are even worse: they are invisible
ephemera without substance.)

>

Better decorate the <h1itself but give it shrink-to-fit width, which
you can do by floating it left or making it display: table (the latter
won't work in IE).

>

Or you could stick to inline box decoration but give the <h1enough
padding to make room for it, but this involves guesswork.

>

Hi,

>

Sorry, for the delay of my answer. I had problems with my ISP for the
past hours.

>

Ben, if I use float I will need to clear the float after it the header
tag?

>
Yes.
>

I am using the guessing method in this method using pixels as measure
and not em. It work with the list items I was working on ...

>
At least guess with em-- then it should be fairly close. The inline box
usually runs vertically from the font's max ascent to its max descent,
which is about 1em.
>
But it all depends on what the particular font designer thought "1em"
and "max ascent" and "max descent" meant, and whether/how the browser
creators also fudged things...
>

About display: table I have done it a few hours ago and it worked ...
but I was told this is not a good option sometime ago.
I am not sure if I can do this ...

>
Display: table is a good 'un, except it doesn't work in IE. So it just
depends on whether you need to support IE.

Hi,

using the display: table is not a solution. I would like IE to not
exist ... but it does. lol

About the float left is a good solution because I don't need guessing
but I don't like very much to add empty tags only for clear ...
.... but if it is needed then ...

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.

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? Not sure ... how
to solve this?

Thanks,
Miguel

[shapper]

Re: Header Background

On May 20, 2:42 pm, Ben C <spams...@spam. eggswrote:

On 2008-05-20, shapper <mdmo...@gmail. comwrote:
>
>
>

On May 20, 8:16 am, Ben C <spams...@spam. eggswrote:

On 2008-05-20, shapper <mdmo...@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%.

>

It will take all of the available width, since auto width is "greedy"
for normal-flow block boxes.

[...]
>

Are you talking about the way the span's padding and border overflow the
<h1>'s box?

>

I would advise don't decorate inline boxes in this way. Background
colours are OK, but as I tried to explained previously, top and bottom
borders and padding on inline boxes are ephemera without substance that
are visible but have no ability to move anything else on the page out of
their way.

>

(Inline box top and bottom margins are even worse: they are invisible
ephemera without substance.)

>

Better decorate the <h1itself but give it shrink-to-fit width, which
you can do by floating it left or making it display: table (the latter
won't work in IE).

>

Or you could stick to inline box decoration but give the <h1enough
padding to make room for it, but this involves guesswork.

>

Hi,

>

Sorry, for the delay of my answer. I had problems with my ISP for the
past hours.

>

Ben, if I use float I will need to clear the float after it the header
tag?

>
Yes.
>

I am using the guessing method in this method using pixels as measure
and not em. It work with the list items I was working on ...

>
At least guess with em-- then it should be fairly close. The inline box
usually runs vertically from the font's max ascent to its max descent,
which is about 1em.
>
But it all depends on what the particular font designer thought "1em"
and "max ascent" and "max descent" meant, and whether/how the browser
creators also fudged things...
>

About display: table I have done it a few hours ago and it worked ...
but I was told this is not a good option sometime ago.
I am not sure if I can do this ...

>
Display: table is a good 'un, except it doesn't work in IE. So it just
depends on whether you need to support IE.

Hi,

using the display: table is not a solution. I would like IE to not
exist ... but it does. lol

About the float left is a good solution because I don't need guessing
but I don't like very much to add empty tags only for clear ...
.... but if it is needed then ...

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.

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? Not sure ... how
to solve this?

Thanks,
Miguel

[Ben C]

Re: Header Background

On 2008-05-21, shapper <mdmoura@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.