# Solved: Paragraph Bullet Starts in CSS



## tjc15 (Mar 16, 2011)

I need to make a paragraph start with a custom bullet image. How can I do this with out making it an UL or LI?

Thanks for any and all help,
tjc15


----------



## sepala (May 20, 2010)

According to my knowledge, that is an option only for lists not for paragraphs. I tried to use that with

but it didn't work. There is no CSS text property to do such a thing.


----------



## tjc15 (Mar 16, 2011)

Is there any way to start a paragraph with an image at all?


----------



## sepala (May 20, 2010)

What about manually inserting a SMALL image before the

? But that is time consuming.


----------



## tjc15 (Mar 16, 2011)

This is the link to the page I am wanting to do this on.

www.notmybattle.com

I want the sword to be positioned like the big fancy letters on old manuscripts from the time of knights. Just positioned there not looking like that.

Are you talking about positioning each on individually with divs?!


----------



## colinsp (Sep 5, 2007)

You could put this in the first line of each of your paragraphs manually


```
<img src="swordgoodtrans90angLborder.png" width="220" height="49" alt="logo" />
```
You could then use the pseudo element in in your css to increase the first line height so something like


```
p:first-line {line-height:50px;}
```
I haven't tested this but it should work.


----------



## sepala (May 20, 2010)

tjc15 said:


> This is the link to the page I am wanting to do this on.
> 
> www.notmybattle.com
> 
> ...


yes, I meant small div's which has images in it, but colinsp has given a good way better than mine. I haven't checked that anyway, if that works, use that.


----------



## tjc15 (Mar 16, 2011)

Looks like it would work. Haven't tried it yet but thanks!


----------



## tomdkat (May 6, 2006)

colinsp said:


> You could put this in the first line of each of your paragraphs manually
> 
> 
> ```
> ...


Neat idea. I would also explore making the bullet image a background image that could be assigned to the paragraph element through a CSS class. That might result in less markup in the HTML and the bullet could be easily changed by updating the stylesheet.

I like your idea, though. I've never used the "first-line" pseudo element before. 

Peace...


----------



## tjc15 (Mar 16, 2011)

Thanks for all the input! I have moved away from this idea for now but if it helps someone else find the answer to this problem I guess it would have been worth it.


----------



## tomdkat (May 6, 2006)

Cool. What did you end up doing? Also, why wasn't using an unordered list an option for getting the bullets?

Peace...


----------



## tjc15 (Mar 16, 2011)

I actually used the float property in CSS to position roughly where I needed it and it looked a lot better that I thought it would. 
I don't remember why an UL was a problem honestly. lol
You can see what I did on the website below.
Thanks again,
tjc15


----------



## tomdkat (May 6, 2006)

Cool. Any particular page? I looked at the main CSS file and didn't see any paragraph rules with a float property.

Peace...


----------



## tjc15 (Mar 16, 2011)

If you look at the main.css file look toward the bottom for img.leftborder and img.rightborder.
Those are the definer things that tell what to style.


----------



## tomdkat (May 6, 2006)

Ah, I see. Instead of styling the paragraphs a different way, you positioned images instead. That's why I got confused. 

Cool. Glad you got things working the way you want.

Peace...


----------

