h1 background color
in [CSS]
|
From: shapper on 21 Apr 2008 08:45 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
From: Harris Kosmidhs on 21 Apr 2008 09:09 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;}
From: Jonathan N. Little on 21 Apr 2008 09:30 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
From: Jonathan N. Little on 21 Apr 2008 09:35 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
From: BootNic on 21 Apr 2008 10:18 "Jonathan N. Little" <lws4art(a)central.net> wrote in news:ee515$480c96f3 $40cba7cc$8985(a)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*
|
Next
|
Last
Pages: 1 2 3 Prev: Chinese Stainless Steel Stone Ring KR037 Next: Font size at Wikipedia |