Re: [css-d] Background bullet for paragraphs
Philippe Wittenbergh e...@l-c-n.com wrote: You can control the size of background images: that is what the background-size property is for. Supported by Gecko 1.9.2 (Fx 3.6). WebKit (Safari 5+, recent Chrome) Opera 10.5 +. Probably IE 9beta, although I can't test that one. I tested with IE9 Beta and it does support multiple background images and background-size. IE9 uses the official tag, eg, background-size. Now if IE9 would just add CSS3 gradients and text-shadow before shipping. Am I the only one who is miffed those are missing? Chad Lundgren __ css-discuss [cs...@lists.css-discuss.org] 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/
[css-d] Background bullet for paragraphs
I have about 700 pages (eBook) that were once created in Microsoft Office. The author was not intending to create HTML pages in the beginning. I have all of the pages cleaned up except for one thing and I really do not want to go through each of the pages and individually alter them. The problem is some paragraphs that look like they should have originally been unordered list items. The image is a small box that looks like it would have been used on a bulleted list. Instead of an ul this is used and there are thousands of them in the 700+ pages. p class=imageBulletsimg border=0 width=10 height=10 src=Image_files/image003.gifnbsp;nbsp;And the info for the paragraph/p Paragraphs do look fine for this particular resource. If I continue to use them as paragraphs, it means that I would not need to hand code each of these pages to change the lines into list items. 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? Then I would not need to hand code the pages. I could use a search and replace and be done with it in a matter of minutes and not spend days to weeks on it. Thanks, Linda __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] Background bullet for paragraphs
--- On Mon, 10/18/10, Linda Miller, DVM anm...@bellsouth.net wrote:
p class=imageBulletsimg border=0 width=10
height=10
src=Image_files/image003.gifnbsp;nbsp;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 [cs...@lists.css-discuss.org]
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/
Re: [css-d] Background bullet for paragraphs
p.imageBullets { background: url('Image_files/image003.gif') no-repeat top
left; padding-left: 16px;}
Thanks. That is a start. But, since the image is a background, it does not
push the text over. Instead, the image is behind the text. Should I just add
nbsp; to the beginning of the string of the contents of the paragraph to make
sure that the text starts to the right of the image? Or is there another way to
only move the text of the paragraph to the right and still have the image to
the left? (i.e. padding for the text and not for the image)
Linda
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] Background bullet for paragraphs
p.imageBullets { background: url('Image_files/image003.gif') no-
repeat
top left; padding-left: 16px;}
Thanks. That is a start. But, since the image is a background, it does
not push the text over. Instead, the image is behind the text. Should
I just add nbsp; to the beginning of the string of the contents of the
paragraph to make sure that the text starts to the right of the image?
Or is there another way to only move the text of the paragraph to the
right and still have the image to the left? (i.e. padding for the text and
not for the image)
I'm confused... That's what the padding-left: 16px; is for...
p.imageBullets {
background: url('Image_files/image003.gif') no-repeat top left;
padding-left: 16px;
}
note that it's applied to the P, not the IMG. So the image is a background
image to the text. The padding applies to the text, and pushes it over. If
you need more padding, increase the value.
---Tim
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] Background bullet for paragraphs
I get it now. It was me that was confused.
This works.
p.imageBullets { background: url('Image_files/image003.gif') no-repeat left
center; padding-left: 40px;margin-left:0;}
I added a margin-left:0 to position it like I wanted and centered the image
with the text.
Is there a way to style that image within the background of the paragraph? For
instance, in the img tag, you are able to control the width and the height of
the image. How do you do this in the CSS?
Linda
__
css-discuss [cs...@lists.css-discuss.org]
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/
Re: [css-d] Background bullet for paragraphs
For instance, in the img tag, you are able to control the width and the height of the image. How do you do this in the CSS? For background images, you can't. You have to do it by opening the image file and changing its size, and then saving it. ---Tim __ css-discuss [cs...@lists.css-discuss.org] 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/
Re: [css-d] Background bullet for paragraphs
On Oct 19, 2010, at 3:32 AM, Climis, Tim wrote: For instance, in the img tag, you are able to control the width and the height of the image. How do you do this in the CSS? For background images, you can't. You have to do it by opening the image file and changing its size, and then saving it. You can control the size of background images: that is what the background-size property is for. Supported by Gecko 1.9.2 (Fx 3.6). WebKit (Safari 5+, recent Chrome) Opera 10.5 +. Probably IE 9beta, although I can't test that one. http://www.w3.org/TR/css3-background/#the-background-size a couple of examples: http://dev.l-c-n.com/CSS3_border-background/background-size.html Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] 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/
