h1 background color

[shapper]

Hello,

I am using CSS to apply a background to a header:

<h1>Header</h1>

h1 {background-color: black;}

The problem is that the background color is applied not only to the
text but to the full lenght of the h1.
How to apply it only to the header text?

Thanks,
Miguel

[Harris Kosmidhs]

shapper wrote:

Hello,

I am using CSS to apply a background to a header:

<h1>Header</h1>

h1 {background-color: black;}

The problem is that the background color is applied not only to the
text but to the full lenght of the h1.
How to apply it only to the header text?

Thanks,
Miguel

<h1><span>Header</span></h1>
h1 span{background-color: black;}

[Jonathan N. Little]

shapper wrote:

Hello,

I am using CSS to apply a background to a header:

<h1>Header</h1>

h1 {background-color: black;}

The problem is that the background color is applied not only to the
text but to the full lenght of the h1.
How to apply it only to the header text?

A it is supposed to do by default. Her are your options:

1) Set the with explicitly

h1 { color: white; background-color: black; width: 3.25em; }

PROS: Does what you wish across browsers, sets the width and will be
proportional to font if you use ems.

CONS: Must be adjusted depending on the length of the content

2) Use float, will auto adjust width:

h1 { color: white; background-color: black; float: left; }

PROS: Does what you wish with most browsers

CONS: Changes flow of document, will need to clear float after the H1.
May interfere with layout if there are other floated elements on page.
IE is notorious for being 'twitchy' with floats

3) Change display like a table cell...

h1 { color: white; background-color: black; display: table-cell; }

PROS: Does exactly what you wish, but leaves IE out of the picture

CONS: Even though this would be the perfect solution, with IE's market
share it will be a hard case to make (even though from a designer's
perspective "life would be great" if IE would just go away...)

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Jonathan N. Little]

Harris Kosmidhs wrote:

<h1><span>Header</span></h1>
h1 span{background-color: black;}

Good one! I miss that one. I would point out to OP those that it is bad
practice to set the background without setting the foreground. with the
default foreground color as black the above example will give you a
black box. Whereas if you do it properly

h1 span{ color: white; background-color: black; }

the problem would never arise.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[BootNic]

"Jonathan N. Little" <lw*****@central.netwrote in news:ee515$480c96f3
$4************@NAXS.COM:

shapper wrote:

>Hello,

I am using CSS to apply a background to a header:

<h1>Header</h1>

h1 {background-color: black;}

The problem is that the background color is applied not only to the
text but to the full lenght of the h1.
How to apply it only to the header text?

[snip]

3) Change display like a table cell...

h1 { color: white; background-color: black; display: table-cell; }

PROS: Does exactly what you wish, but leaves IE out of the picture

Conditional comment for IE.

CONS: Even though this would be the perfect solution, with IE's market
share it will be a hard case to make (even though from a designer's
perspective "life would be great" if IE would just go away...)

Block element displayed inline add zoom to trigger haslayout mayhaps
result in inline-block behavior for IE.

<!--[if IE]>
<style type="text/css">
h1 {
display:inline;
zoom:1;
}
</style>
<![endif]-->

--
BootNic Monday April 21, 2008 10:18 AM
Good communication is as stimulating as black coffee and just as
hard to sleep after.
*Anne Morrow Lindbergh*

[Jonathan N. Little]

BootNic wrote:

Block element displayed inline add zoom to trigger haslayout mayhaps
result in inline-block behavior for IE.

<!--[if IE]>
<style type="text/css">
h1 {
display:inline;
zoom:1;
}
</style>
<![endif]-->

A code fork is a code fork....I still stand by my comment...I do not
have a rosy memory of the browser-war 90's.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[shapper]

On Apr 21, 4:09 pm, "Jonathan N. Little" <[e-mail]:

BootNic wrote:

Block element displayed inline add zoom to trigger haslayout mayhaps
result in inline-block behavior for IE.

<!--[if IE]>
<style type="text/css">
h1 {
display:inline;
zoom:1;
}
</style>
<![endif]-->

A code fork is a code fork....I still stand by my comment...I do not
have a rosy memory of the browser-war 90's.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

Thank you all ...

A little while I tried the span tag inside the h1 tag but I was trying
to figure if there was another way.

I was trying to avoid adding one more tag.

I see using span tags inside other tags very often for solving a few
issues like in menus that uses lists. For example:

<ul>
<li>
<a id="singup" href="/signup/">
<span>
Sign-Up
</span>
</a>
</li>
<li>
<a id="tour" href="/tour/workflow">
<span>
Tour
</span>
</a>
</li>
</ul>

About the Foreground color I do set it up. I was just placing the code
directly related to my problem.

Thank You,
Miguel

[Jonathan N. Little]

shapper wrote:

I see using span tags inside other tags very often for solving a few
issues like in menus that uses lists. For example:

<ul>
<li>
<a id="singup" href="/signup/">
<span>
Sign-Up
</span>
</a>
</li>
<li>
<a id="tour" href="/tour/workflow">
<span>
Tour
</span>
</a>
</li>
</ul>

What issue does the addition of a span do for you here?

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Beauregard T. Shagnasty]

shapper wrote:

About the Foreground color I do set it up. I was just placing the code
directly related to my problem.

...and therein lies the reason everyone asks for a URL, instead of code
fragments. When people just post bits of code, there is often other
necessary bits incorrect or unmentioned that could be the reason for the
problem.

Like your:

<ul>
<li>
<a id="singup" href="/signup/">
<span>
Sign-Up
</span>
</a>
....

1. You could assign CSS to: li a { } and not need a <span>
2. Do you *really* have id="singup" misspelled in your test page?

--
-bts
-Friends don't let friends drive Vista

[Jukka K. Korpela]

Scripsit Jonathan N. Little:

h1 span{ color: white; background-color: black; }

Better still:

h1 span{ color: white; background: black; }

Just in case some odd style sheet sets a (possibly white) background
image for the element. Very unlikely, but why not take the precaution,
especially when it makes the rule shorter?

Moreover, adding something like
padding: 0 0.2em
would probably be a good idea. You don't want the heading text to extend
to the very edge of the background area but leave a little padding
there.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[shapper]

On Apr 21, 6:26 pm, "Jonathan N. Little" <[e-mail]:

shapper wrote:

I see using span tags inside other tags very often for solving a few
issues like in menus that uses lists. For example:

<ul>
<li>
<a id="singup" href="/signup/">
<span>
Sign-Up
</span>
</a>
</li>
<li>
<a id="tour" href="/tour/workflow">
<span>
Tour
</span>
</a>
</li>
</ul>

What issue does the addition of a span do for you here?

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

For example the menu in the following web site:
http://www.springloops.com/

I have seen a lot of this lately.

Thanks,
Miguel

[Jonathan N. Little]

shapper wrote:

On Apr 21, 6:26 pm, "Jonathan N. Little" <[e-mail]:

>shapper wrote:

>>I see using span tags inside other tags very often for solving a few
issues like in menus that uses lists. For example:
<ul>
<li>
<a id="singup" href="/signup/">
<span>
Sign-Up
</span>
</a>
</li>
<li>
<a id="tour" href="/tour/workflow">
<span>
Tour
</span>
</a>
</li>
</ul>

What issue does the addition of a span do for you here?

<snip signature>

For example the menu in the following web site:
http://www.springloops.com/

I have seen a lot of this lately.

Turn off JavaScript and reload the page. They have the spans because
there are using JavaScript to do and image replacement for the text on
the links...unless you are doing such JavaScript slight-of-hand the span
is not needed.
--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com