Jump to content

Cre8asiteforums

Web Site Design, Usability, SEO & Marketing Discussion and Support

  • Announcements

    • cre8pc

      20 Years! Cre8asiteforums 1998 - 2018   01/18/2018

      Cre8asiteforums In Its 20th Year In case you didn't know, Internet Marketing Ninjas released many of the online forums they had acquired, such as WebmasterWorld, SEOChat, several DevShed properties and these forums back to their founders. You will notice a new user interface for Cre8asiteforums, the software was upgraded, and it was moved to a new server.  Founder, Kim Krause Berg, who was retained as forums Admin when the forums were sold, is the hotel manager here, with the help of long-time member, "iamlost" as backup. Kim is shouldering the expenses of keeping the place going, so if you have any inclination towards making a donation or putting up a banner, she is most appreciative of your financial support. 
ukdaz

Styling bullet points with CSS

Recommended Posts

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:

 

bulletpoints.gif

 

SO can CSS take care of this requirement?

 

Thanks

 

Daz

Edited by ukdaz

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Maybe this'll help? http://www.w3schools.com/css/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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.jemjabella.co.uk/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

Share this post


Link to post
Share on other sites

Thanks everyone.

 

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

 

Daz

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

×