--- On Mon, 10/18/10, Linda Miller, DVM <[email protected]> wrote:
> <p class="imageBullets"><img border="0" width="10"
> height="10"
> src="Image_files/image003.gif"> And
> the info for the paragraph></p>
>
>
> Is there a way to shorten the above and use CSS? Something
> like using the image as a background for the paragraph and
> floating it to the left? This to completely remove the
> <img> tag?
Yes, almost exactly that way:
p.imageBullets { background: url('Image_files/image003.gif') no-repeat top
left; padding-left: 16px; /* or however wide your image is + whatever gap you'd
like between it and the text /* }
that will create a 'hanging bullet'. A bullet that acts like a floated element
(text wrapping around it and under it, rather than in a separate 'column') is a
little trickier (and, IMO, uglier) but is possible, I believe, with generated
content.
- Bobby
______________________________________________________________________
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/
