Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Styling bullet points with CSS


  • Please log in to reply
12 replies to this topic

#1 ukdaz

ukdaz

    Light Speed Member

  • Members
  • 738 posts

Posted 14 September 2006 - 03:04 AM

Hi

Spent some time looking here and over the web before posting this question.

Had a request from a client that they want the bulletpoints on their page to be in line if the text in the bullet point flows down to the next line.

As an example:

Posted Image

SO can CSS take care of this requirement?

Thanks

Daz

Edited by ukdaz, 14 September 2006 - 03:04 AM.


#2 yannis

yannis

    Sonic Boom Member

  • 1000 Post Club
  • 1634 posts

Posted 14 September 2006 - 03:14 AM

Daz

It can definitely done through CSS. I am not sure exactly what you want (I see no bullets in your description, if you provide some more info maybe we can help).

You can use

ul
{
list-style-type: circle;

text-align:center;
}


You can use quite a few other choices other than circle anything from roman, greek numerals to hebrew and cjk-ideographic! Bad browser support is limited, however on some of these values but they default gracefully!

You can use the "first-line" or "first-letter" pseudo-element to add special styles to the first line of the text in a selector:
li  {font-size: 12pt}
li:first-line {color: #0000FF; font-variant: small-caps}

<li>Some text that ends up on two or more lines</li>

li {font-size: 12pt}
li:first-line {color: #0000FF; font-variant: small-caps}

<li Some text that ends up on two or more lines</li>


Yannis

Edited by yannis, 14 September 2006 - 03:24 AM.


#3 rmccarley

rmccarley

    Light Speed Member

  • Members
  • 642 posts

Posted 14 September 2006 - 03:16 AM

Maybe this'll help? http://www.w3schools...ss/css_list.asp

You want to use list-style-position: outside

Jere is some sample code:
<html><head><style>
.cnt {
width: 400px;
}

ul
{
list-style-position: outside
}
</style></head><body>

<div class="cnt">

<ul>
 <li>This is some sample text</li>
 <li>This is a whole lot of sample text to see if this declaration works the way I want it 

to so I look smart for my cre8asiteforum friends because I have no life and they validate my 

existance.</li>
 <li>More sample text</li>
</ul>

</div>


</body></html>

Edited by rmccarley, 14 September 2006 - 03:17 AM.


#4 ukdaz

ukdaz

    Light Speed Member

  • Members
  • 738 posts

Posted 14 September 2006 - 04:05 AM

Thanks for the prompt replies guys.

Yannis you may have caught this post before I edited it. If you look at the image you'll see tiny bullet points in the example.

I'll see how I get on with this.

Cheers

Daz

#5 sonjay

sonjay

    Gravity Master Member

  • Members
  • 183 posts

Posted 14 September 2006 - 07:37 AM

Actually, since list-style-position:outside is the default for regular ordered and unordered lists, I'm a little confused that the question even has to be asked.

It makes me wonder if either A. the list is not being coded as a list, but as regular paragraphs with a dot as the first character, or B. there's some css somewhere that's applying list-style-position:inside to the list.

#6 ukdaz

ukdaz

    Light Speed Member

  • Members
  • 738 posts

Posted 14 September 2006 - 08:04 AM

Actually, since list-style-position:outside is the default for regular ordered and unordered lists, I'm a little confused that the question even has to be asked.


:)

Not sure what you mean there sonjay... about confusion over asking the question.

Client wants lined up lists (if they flow down to the next line - see second example in the image I posted) - how do we do that?

Daz

#7 yannis

yannis

    Sonic Boom Member

  • 1000 Post Club
  • 1634 posts

Posted 14 September 2006 - 08:39 AM

Daz

This should actually do the trick.

ul {list-style-type:disc};

Try it on a new fresh page. I suspect you get the indentation by inhereting from a parent element. In this case you will have to add margin:0 to ul.

I tried it on a list with very long texts and it works.

Yannis

#8 sonjay

sonjay

    Gravity Master Member

  • Members
  • 183 posts

Posted 14 September 2006 - 08:40 AM

A basic unordered list with no css styling applied will result in exactly the format you say you want. This is what the code would look like:
<ul>
<li>something</li>
<li>something else</li>
</ul>

That's all you need to do. You don't have to define a style and declare list-style-position or list-style-type -- just putting your list of bullet items in the code above will do exactly what you're asking.

So.... the fact that you were asking how to do this made me think there must be something else going on other than a bog-standard unordered list that needed list-style-type or list-style-position styles created -- because a bog-standard unordered list wouldn't need any styling to do what you want.

#9 ukdaz

ukdaz

    Light Speed Member

  • Members
  • 738 posts

Posted 14 September 2006 - 09:33 AM

Sonjay

Understand what you're saying. BUT its where the text flows down to the next line its there I need it styled.

Thanks Yannis for your help (oh and congrats on your 500th post!)

Daz

#10 Jem

Jem

    Mach 1 Member

  • Members
  • 366 posts

Posted 14 September 2006 - 10:00 AM

Daz: I think you're missing Sonjay's point. The behaviour you want is default for a list as long as it is in fact marked up as a list. To show what he means I've stuck two paragraphs of text in an unordered list on a test layout I'm doing to show you:
http://www.jemjabell...testlayout2.htm

(please let me know when you've seen that so I can turn them back into paragraphs :D)

As long as you mark it up like so:
<ul>
<li>text text text</li>
<li>text text text</li>
</ul>
..it will do what you want.

ETA: Don't click any of the links in that sample page because they won't work :)

Edited by Jem, 14 September 2006 - 10:01 AM.


#11 Mano70

Mano70

    Mach 1 Member

  • Members
  • 256 posts

Posted 14 September 2006 - 10:26 AM

The only reason (I can think of) a bulleted list will not work as you wish is when bullets are used, and not unordered lists. Ex. • or &middot; in your HTML will create a bullet sign, but the text will wrap as your currently text do.

See http://www.strictlyc...ples/bullet.asp

#12 ukdaz

ukdaz

    Light Speed Member

  • Members
  • 738 posts

Posted 17 September 2006 - 10:27 AM

Thanks everyone.

Jem I've checked out your page. Cheers for that.

Daz

#13 ukdaz

ukdaz

    Light Speed Member

  • Members
  • 738 posts

Posted 18 September 2006 - 04:48 AM

Sonjay

My apologies. Your statement was quite correct:

It makes me wonder if either A. the list is not being coded as a list, but as regular paragraphs with a dot as the first character



The designer never styled them as bullet points - should be an easy thing to sort. I am grateful to everyone else for their help, just thought it fair to put my hand up and say Sonjay was correct.

Daz



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users