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>Header</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]

"shapper" <md*****@gmail.comwrote in message
news:7e**********************************@a1g2000h sb.googlegroups.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>Header</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]

On May 20, 1:40 am, "Nik Coughlin" <[e-mail]:

"shapper" <[e-mail] in message

news:7e**********************************@a1g2000h sb.googlegroups.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>Header</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]

In article
<7e**********************************@a1g2000hsb.g ooglegroups.com>,
shapper <md*****@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]

"shapper" <md*****@gmail.comwrote in message
news:3f**********************************@34g2000h sf.googlegroups.com...

On May 20, 1:40 am, "Nik Coughlin" <[e-mail]:

>"shapper" <[e-mail] in message

news:7e**********************************@a1g2000 hsb.googlegroups.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>Header</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]

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

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>Header</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]

In article
<7e**********************************@a1g2000hsb.g ooglegroups.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>Header</span></h1>

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

[shapper]

On May 20, 8:16 am, Ben C <[e-mail]:

On 2008-05-20, shapper <[e-mail]:

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>Header</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]

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

On May 20, 8:16 am, Ben C <[e-mail]:

>On 2008-05-20, shapper <[e-mail]:

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]

On May 20, 2:42 pm, Ben C <[e-mail]:

On 2008-05-20, shapper <[e-mail]:

On May 20, 8:16 am, Ben C <[e-mail]:

On 2008-05-20, shapper <[e-mail]:

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]

On May 20, 2:42 pm, Ben C <[e-mail]:

On 2008-05-20, shapper <[e-mail]:

On May 20, 8:16 am, Ben C <[e-mail]:

On 2008-05-20, shapper <[e-mail]:

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]

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.