Circle bullet in Bullet Style

Discussion in 'HTML' started by Al Camp, Jul 30, 2005.

  1. Al Camp

    Al Camp Guest

    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
     
    Al Camp, Jul 30, 2005
    #1
    1. Advertising

  2. Al Camp

    Jedi Fans Guest

    Al Camp wrote:
    > 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?
     
    Jedi Fans, Jul 30, 2005
    #2
    1. Advertising

  3. Al Camp

    Al Camp Guest

    "Jedi Fans" <"news[at]jedifans[--=dot==-]com"> wrote in message
    news:...
    > Al Camp wrote:
    >> 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?


    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
     
    Al Camp, Jul 30, 2005
    #3
  4. Al Camp

    Jedi Fans Guest

    Al Camp wrote:
    > "Jedi Fans" <"news[at]jedifans[--=dot==-]com"> wrote in message
    > news:...
    >> Al Camp wrote:
    >>> 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?

    >
    > 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
     
    Jedi Fans, Jul 30, 2005
    #4
  5. Al Camp

    Toby Inkster Guest

    Al Camp wrote:

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

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Now Playing ~ ./sixpence_none_the_richer_-_kiss_me.ogg
     
    Toby Inkster, Jul 30, 2005
    #5
  6. Al Camp

    Al Camp Guest

    "Jedi Fans" <"news[at]jedifans[--=dot==-]com"> wrote in message
    news:42ebc7d9$...
    > Al Camp wrote:
    >> "Jedi Fans" <"news[at]jedifans[--=dot==-]com"> wrote in message
    >> news:...
    >>> Al Camp wrote:
    >>>> 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?

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


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

    Thank you for your help.
    Al Camp
     
    Al Camp, Jul 30, 2005
    #6
  7. Al Camp

    JDS Guest

    On Sat, 30 Jul 2005 17:56:25 -0400, Al Camp wrote:

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

    --
    JDS |
    | http://www.newtnotes.com
    DJMBS | http://newtnotes.com/doctor-jeff-master-brainsurgeon/
     
    JDS, Jul 30, 2005
    #7
  8. Al Camp

    Al Camp Guest

    Re: Circle bullet in Bullet Style (still fails)

    "Jedi Fans" <"news[at]jedifans[--=dot==-]com"> wrote in message
    news:42ebc7d9$...
    > Al Camp wrote:
    >> "Jedi Fans" <"news[at]jedifans[--=dot==-]com"> wrote in message
    >> news:...
    >>> Al Camp wrote:
    >>>> 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?

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


    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
     
    Al Camp, Jul 30, 2005
    #8
  9. Al Camp

    Jedi Fans Guest

    Re: Circle bullet in Bullet Style (still fails)

    Al Camp wrote:
    > 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 ;)
     
    Jedi Fans, Jul 31, 2005
    #9
  10. Al Camp

    Al Camp Guest

    Re: Circle bullet in Bullet Style (aaargh!!)

    "Jedi Fans" <"news[at]jedifans[--=dot==-]com"> wrote in message
    news:42ec098b$...
    > Al Camp wrote:
    >> 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 ;)


    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
     
    Al Camp, Jul 31, 2005
    #10
  11. Re: Circle bullet in Bullet Style (aaargh!!)

    Al Camp wrote:
    > 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%3A//home.comcast.net/%7Ealcamp/index.html>

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

    --
    -bts
    -This space intentionally left blank.
     
    Beauregard T. Shagnasty, Jul 31, 2005
    #11
  12. Al Camp

    rf Guest

    Re: Circle bullet in Bullet Style (aaargh!!)

    Al Camp wrote:

    > .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.
     
    rf, Jul 31, 2005
    #12
  13. Al Camp

    Adrienne Guest

    Re: Circle bullet in Bullet Style (aaargh!!)

    Gazing into my crystal ball I observed "rf" <@invalid.com> writing in
    news:a4WGe.67337$:

    >> .ul {

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

    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne, Jul 31, 2005
    #13
  14. Al Camp

    Al Camp Guest

    Re: Circle bullet in Bullet Style (aaargh!!)

    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

    "Adrienne" <> wrote in message
    news:Xns96A3CC08340ECarbpenyahoocom@207.115.63.158...
    > Gazing into my crystal ball I observed "rf" <@invalid.com> writing in
    > news:a4WGe.67337$:
    >
    >>> .ul {

    >>
    >> 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.
    >
    > --
    > Adrienne Boswell
    > http://www.cavalcade-of-coding.info
    > Please respond to the group so others can share
     
    Al Camp, Jul 31, 2005
    #14
  15. Al Camp

    Al Camp Guest

    Re: Circle bullet in Bullet Style (aaargh!!)

    "rf" <@invalid.com> wrote in message
    news:a4WGe.67337$...
    > Al Camp wrote:
    >
    >> .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.


    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, Jul 31, 2005
    #15
  16. Al Camp

    Al Camp Guest

    Re: Circle bullet in Bullet Style (Success!)

    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


    "Adrienne" <> wrote in message
    news:Xns96A3CC08340ECarbpenyahoocom@207.115.63.158...
    > Gazing into my crystal ball I observed "rf" <@invalid.com> writing in
    > news:a4WGe.67337$:
    >
    >>> .ul {

    >>
    >> 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.
    >
    > --
    > Adrienne Boswell
    > http://www.cavalcade-of-coding.info
    > Please respond to the group so others can share
     
    Al Camp, Jul 31, 2005
    #16
  17. Re: Circle bullet in Bullet Style (aaargh!!)

    Al Camp wrote:
    > 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:

    <p id="ul>Blah blah blah...</p>

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


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Jul 31, 2005
    #17
  18. Al Camp

    rf Guest

    Re: Circle bullet in Bullet Style (aaargh!!)

    Adrienne wrote:

    > >> .ul {

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

    >
    > _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, Jul 31, 2005
    #18
  19. Al Camp

    rf Guest

    Re: Circle bullet in Bullet Style (aaargh!!)

    Al Camp wrote:

    > 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.
     
    rf, Jul 31, 2005
    #19
  20. Al Camp

    Adrienne Guest

    Re: Circle bullet in Bullet Style (aaargh!!)

    Gazing into my crystal ball I observed "rf" <@invalid.com> writing in
    news:8fYGe.67423$:

    > Adrienne wrote:
    >
    >> >> .ul {
    >> >
    >> > This will select an element that has an ID of "ul", not ul elements.

    >>
    >> _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 :)
    >

    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!

    --
    Adrienne Boswell
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne, Jul 31, 2005
    #20
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Talon

    Circle Hell

    Talon, Sep 4, 2003, in forum: Perl
    Replies:
    2
    Views:
    1,114
    Mark Carter
    Sep 4, 2003
  2. =?Utf-8?B?dGFnaHJlZWQ=?=

    moving label in c# around circle

    =?Utf-8?B?dGFnaHJlZWQ=?=, May 2, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    2,872
    clintonG
    May 3, 2004
  3. =?Utf-8?B?Rmxhc2ggaW4gU21hcnQgZGV2aWNlIEFwcGxu?=

    Create circle in webform

    =?Utf-8?B?Rmxhc2ggaW4gU21hcnQgZGV2aWNlIEFwcGxu?=, Sep 7, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    2,849
    =?Utf-8?B?Rmxhc2ggaW4gU21hcnQgZGV2aWNlIEFwcGxu?=
    Sep 8, 2004
  4. Sphenxes
    Replies:
    2
    Views:
    3,117
    Sphenxes
    Sep 25, 2003
  5. Ken Varn
    Replies:
    0
    Views:
    506
    Ken Varn
    Apr 26, 2004
Loading...

Share This Page