Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Styling bullet points with CSS

Started by ukdaz, Sep 14 2006 02:56 AM

Please log in to reply

12 replies to this topic

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

Back to top

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

Back to top

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

Back to top

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

Back to top

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

Back to top

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

Back to top

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

Back to top

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

Back to top

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

Back to top

#10 Jem

Mach 1 Member

Members
366 posts

Twitter:https://twitter.com/jemjabella

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

)

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.

Back to top

#11 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 · 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

Back to top

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

Back to top

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

Back to top

Back to Tutorials & Virtual Learning

1 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Bing (1)

Leading Community for Usability, Search Engine Marketing,Social Networking, Site Planning & Web Site Development, Since 1998

Styling bullet points with CSS

1 user(s) are reading this topic

Sign In

Leading Community for Usability, Search Engine Marketing,
Social Networking, Site Planning & Web Site Development, Since 1998