On Wed, Jul 9, 2008 at 10:47 PM, Kelly Moore <[EMAIL PROTECTED]>
wrote:
> trying to figure out how to use a small image (such as a fat arrow) as
> a background. want to be able to re use the arrow and place different
> numbers over it. I've tried the following, but the arrow does not
> display:
>
> h3 span.arrow{
> height: 5px;
> width: 24px;
> margin: 10px;
> background-image: url(images/arrow.png);
> background-repeat: no-repeat;
> }
>
> <h3><span class="arrow">2.</span> something here</h3>
>
> any ideas?
>
If I were you I would just stick the background on the <h3> as that's
already being displayed as a block by default. Then put the number in a
<span> like so:
HTML:
<h3><span class="number">3</span>heading text</h3>
CSS:
h3 {
background: url("yourimage.png") no-repeat;
height: 20px; /* height of your image */
}
span.number {
float: left;
width: 20px; /* width of your image */
text-align: center;
margin-right: 10px; /* distance from your image to the rest of the h3 */
line-height: 20px; /* height of your image, to make the number center
vertically */
padding-left: 0; /* add padding if your image isn't symmetric */
padding-right: 0; /* same, don't forget to deduct padding from the width
above */
}
My 0.02 ;)
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
