h1 background color

#1

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

#2

shapper wrote:

Quote:

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;}

#3

shapper wrote:

Quote:

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

#4

Harris Kosmidhs wrote:

Quote:

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

#5

"Jonathan N. Little" <lws4art (AT) central (DOT) net> wrote in news:ee515$480c96f3
$40cba7cc$8985 (AT) NAXS (DOT) COM:

Quote:

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]

Quote:

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.

Quote:

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.



--
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*

#6

BootNic wrote:

Quote:

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

#7

On Apr 21, 4:09 pm, "Jonathan N. Little" <lws4... (AT) central (DOT) net> wrote:

Quote:

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

#8

shapper wrote:

Quote:

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

#9

Scripsit Jonathan N. Little:

Quote:

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/

#10

On Apr 21, 6:26 pm, "Jonathan N. Little" <lws4... (AT) central (DOT) net> wrote:

Quote:

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