Circle bullet in Bullet Style

[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

 

[Jedi Fans]

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?

 

[Al Camp]

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

 

[Jedi Fans]

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

 

[Toby Inkster]

(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.

 

[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

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

Thank you for your help.
Al Camp

 

[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.

 

[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

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

 

[Jedi Fans]

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

 

[Al Camp]

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

 

[Beauregard T. Shagnasty]

I uploaded the latest files to
http://home.comcast.net/~alcamp/index.html,

It may make a difference if you corrected the errors in the page.

<URL:http://validator.w3.org/check?verbose=1&uri=http://home.comcast.net/~alcamp/index.html>

You should also use a Strict doctype for new documents. That may help
your problem.

 

[rf]

.ul {

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.

 

[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.

 

[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

 

[Al Camp]

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

 

[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

 

[Jonathan N. Little]

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>

 

[rf]

_Class_ of ul, id would be #ul.

Yes, of course :-(

Has it been a long day, rf?

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

You don't
usually make mistakes like that.

Must have been those rum&cokes last night

Cheers
Richard.

 

[rf]

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.

 

[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!