Circle bullet in Bullet Style


A

Al Camp

I have the following code...
<style>
..bullet
{
margin-left: 60px;
text-indent: -30px;
}
</style>

<div class="bullet">•&nbsp;&nbsp;Some Text</div>

However the bullet is a small square. How could I make it display as a
(list style) circle?

(I prefer not to use <ul>, as it forces a paragraph before the list items,
and wastes space.)

TIA,
Al Camp
 
Ad

Advertisements

J

Jedi Fans

Al said:
However the bullet is a small square. How could I make it display as a
(list style) circle?

list-style-type:circle; in css
also instead of spaces why not use padding?
 
A

Al Camp

Jedi Fans said:
list-style-type:circle; in css
also instead of spaces why not use padding?

Jedi,
Well, I had tried that with no success.
This is what I have right now, and no bullet is displayed at all.
<style>
..bullet
{
margin-left: 60px;
text-indent: -30px;
list-style-type:circle;
}
</style>
<div class="bullet">&nbsp;&nbsp;Some text</div>

I did solve the problem by using small bullet.gif as a src image in my <div>

Thanks for all your help, and I'll try to check out "padding". I'm a newbie
to HTML...

Al camp
 
J

Jedi Fans

Al said:
Jedi,
Well, I had tried that with no success.
This is what I have right now, and no bullet is displayed at all.
<style>
.bullet
{
margin-left: 60px;
text-indent: -30px;
list-style-type:circle;
}
</style>
<div class="bullet">&nbsp;&nbsp;Some text</div>

I did solve the problem by using small bullet.gif as a src image in my <div>

Thanks for all your help, and I'll try to check out "padding". I'm a newbie
to HTML...

Al camp

sorry forgot you werent using UL and LI, i do suggest that you do
though... but if your concerned about the paragraph space etc:
ul{display:inline;} in css
 
T

Toby Inkster

Al said:
(I prefer not to use <ul>, as it forces a paragraph before the list items,
and wastes space.)

Those are not sensible reasons for avoiding a proper list.
 
A

Al Camp

Jedi Fans said:
sorry forgot you werent using UL and LI, i do suggest that you do
though... but if your concerned about the paragraph space etc:
ul{display:inline;} in css

Yep... that did the trick! Lots to learn in HTML!

Thank you for your help.
Al Camp
 
Ad

Advertisements

J

JDS

Yep... that did the trick! Lots to learn in HTML!

It has been said already, but I will just reiterate.

If something is a list, it really should use <UL> or <OL> plus <LI> --
list markup. All of the presentation can be changed, including your
initial description of "(I prefer not to use <ul>, as it forces a
paragraph before the list items, and wastes space.)", using CSS.

That extra space can be removed using CSS.

Alrighty. Just beating a point to death. Use proper markup. etc.
 
A

Al Camp

Jedi Fans said:
sorry forgot you werent using UL and LI, i do suggest that you do
though... but if your concerned about the paragraph space etc:
ul{display:inline;} in css

Jedi,
I guess I spoke too soon. I tried your css suggestion, but the <ul>
still paragraphs before the list. If I might impose on you further...
I entered this in my css style file... (copying the convention I see in
there)
..ul {
display:inline;
list-style-type: circle;
}
Then I have this code in my page...
<ul>
<li>Some text</li>
</ul>
but, the paragraph still appears.

Am I doing something wrong?

Thanks,
Al Camp
 
J

Jedi Fans

Al said:
Jedi,
I guess I spoke too soon. I tried your css suggestion, but the <ul>
still paragraphs before the list. If I might impose on you further...
I entered this in my css style file... (copying the convention I see in
there)
.ul {
display:inline;
list-style-type: circle;
}
Then I have this code in my page...
<ul>
<li>Some text</li>
</ul>
but, the paragraph still appears.

Am I doing something wrong?

Thanks,
Al Camp
try adding margin:0;padding:0; to the ul too ;)
 
A

Al Camp

Jedi Fans said:
try adding margin:0;padding:0; to the ul too ;)

Jedi,
Sorry, but no go. I've checked, and there is no <br> or <p> that precedes
the list... the last line of text just ends. The text that precedes this
list is not paragraphed... just straight text.
I uploaded the latest files to http://home.comcast.net/~alcamp/index.html,
(sill under construction) but... I don't expect you to bug shoot my page.
I can only guess that I've made some other mistake somewhere on the page
that's causing this problem.
css...
..ul {
display: inline;
list-style-type: circle;
margin:0;
padding:0;
}
page code...
<ul>
<li>Some text</li>
</ul>

Thanks again,
Al Camp
 
Ad

Advertisements

R

rf

Al said:

This will select an element that has an ID of "ul", not ul elements. None of
your styles are being applied.

What you meant to say was

ul {

This will select all ul elements.

BTW I hope you are going to do something with that banner image. Two hundred
and seventeen K is *way* to big for a picture of a bit of text. It should be
no larger than 10K or so. At the very least convert it to a jpeg. BMP is not
a suitable format for the web.

Cheers
Richard.
 
A

Adrienne

This will select an element that has an ID of "ul", not ul elements.

_Class_ of ul, id would be #ul. Has it been a long day, rf? You don't
usually make mistakes like that.
 
A

Al Camp

Adrienne,
I tried #ul but that didn't work. I tried RF's ul and my lists
now come right up to the text.

But, the bullets are all left-justified now. Whew... seems like I'm
chasing my tail here... I'll keep at it.

If this "thread" gets any longer, I'll be able to knit a sweater! :-D
Thanks,
Al Camp
 
A

Al Camp

rf said:
This will select an element that has an ID of "ul", not ul elements. None
of
your styles are being applied.

What you meant to say was

ul {

This will select all ul elements.

BTW I hope you are going to do something with that banner image. Two
hundred
and seventeen K is *way* to big for a picture of a bit of text. It should
be
no larger than 10K or so. At the very least convert it to a jpeg. BMP is
not
a suitable format for the web.

Cheers
Richard.

Thanks Richard,
I'll try that out.
As to the image, it was originally a jpeg, but I had problems with the
clarity of the display. I'm still just expirementing, building the pages,
and not really "on-line" yet.
I have Paint Shop Pro so I'll revist the graphics once I've got some of
these "beginner's" issues out of the way.
Thanks for the reply,
Al Camp
 
A

Al Camp

To all who contributed... thanks a lot!
I ended up with this css style...

ul {
display: inline;
display: list-item;
list-style-type: disc;
}

The list is right up under the preceding text, is indented, and has the
balck disc.
Thanks again...
Al Camp
 
Ad

Advertisements

J

Jonathan N. Little

Al said:
Adrienne,
I tried #ul but that didn't work. I tried RF's ul and my lists
now come right up to the text.

Of course! *#ul* rule would only work on any element with *id* that is
'ul'. Example:

But, the bullets are all left-justified now. Whew... seems like I'm
chasing my tail here... I'll keep at it.

What do you want? Look up 'text-align'.

Good place to reference....
http://www.w3.org/Style/CSS/
If this "thread" gets any longer, I'll be able to knit a sweater! :-D
Thanks,
Al Camp
<snip previous 'cuz top-posted>
 
R

rf

Al said:
As to the image, it was originally a jpeg, but I had problems with the
clarity of the display.

.... because jpeg uses a lossy compression format, really meant for images.
It doesn't matter if a great deal if image detail is lost, you don't see it
anyway. Not so with pictures of text. Loose some detail and nasty artifacts
creep in around the straight lines.

The correct format for your images of text is PNG or GIF. Both are non-lossy
and give reasonable compression. Because you only have a small number of
colours a GIF might be most appropriate.

Cheers
Richard.
 
Ad

Advertisements

A

Adrienne

Yes, of course :-(


Oddly enough, no. It was only morning whan I wrote that.


Must have been those rum&cokes last night :)
Then you need a York Peppermint Patty:
4 oz fresh espresso
2 oz cold milk
1 tsp sweetened cocoa powder
1 tsp peppermint syrup
4 oz ice

Put all in a blender and mix. Pour into a tall glass and enjoy!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top