SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to stylize ordered list numbers exclusive of the list text

    I have an ordered list and I would like to stylize the numbers to be very large, in color and in a different typeface than the lists that they represent.

    Can this be done with CSS or CSS3 without using images?

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Hm, yes and no.

    It can if you manually create the numbers yourself. I don't believe you can style the browser-generated numbers consistently if at all with CSS (or even Javascript).

    This isn't an ordered list, but an example of what you can do with CSS alone (not great in IE<9): http://www.scooterverzekeren.com/content/vragen click on any of the links in the ordered list; the styling I'm talking about is in the definition list below.

    You can use a proper ol for semantics, set it to list-style: none, and then use CSS generated content to create a number :before the li and style it somewhat.

    Depending on how many browsers you want to support, you can go further and instead of explicitly writing the number in your CSS and having a different class or id on each li, you could use the (old) counter() css function to count for you.
    https://developer.mozilla.org/en/CSS_Counters
    Even though it's old, browser support for this has been kind of recent, really. I mean, it works in the latest webkit.... lawlz.

    But if you're supporting everyone and their brother, then you'll want to do it old-fashioned:

    <ol>
    <li><span>1</span>blah blah</li>
    <li><span>2</span>blah blah</li>
    <li><span>3</span>blah blah</li>
    <li><span>4</span>blah blah</li>
    <li><span>5</span>blah blah</li>
    <li><span>6</span>blah blah</li>
    </ol>

    ol {
    list-style: none;
    }
    li {
    styles;
    }
    li span {
    style your numbers;
    }
    etc.

    by adding a separate class/id on each li I meant, if you wanted to not use counter() but did want to use content:
    <ol>
    <li class="foo1">blah blah</li>
    <li class="foo2">blah blah</li>
    <li class="foo3">blah blah</li>
    <li class="foo4">blah blah</li>
    <li class="foo5">blah blah</li>
    <li class="foo6">blah blah</li>
    </ol>

    then

    li:before {
    styles;
    }

    .foo1:before {
    content: "1 \a0";

    }
    .foo2:before {
    content: "2" \a0";
    }
    etc

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,823
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    yeah.. Stommey beat me to the punch again.

    Alternatively.. i was also going to suggest this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<style type="text/css">
    		     ul,li,p {margin:0; padding:0;/* gneral reset*/}
    			.lg {list-style-type:upper-roman; padding-left:6em; }
    			.lg li {font-size: 250%; padding-top:.5em}
    			.lg li >p{font-size: 40%;}
    		</style>
    	</head>
    	<body>
    <ol class="lg">
    	<li><p>This is the LI's content note that it is wrapped in a clock level tag(P, DIV, etc. ... which ever is most appropriate semantically) of its own</p>
    	<p>Remember to us an OL not a UL. </p>	</li>
    	<li><p> this is the LI's content note that it is wrapped in a clock level tag(P, DIV, etc. ... which ever is most appropriate semantically) of its own</p></li>
    	<li><p> this is the LI's content note that it is wrapped in a clock level tag(P, DIV, etc. ... which ever is most appropriate semantically) of its own</p></li>
    	<li><p> this is the LI's content note that it is wrapped in a clock level tag(P, DIV, etc. ... which ever is most appropriate semantically) of its own</p></li>
    	<li><p> this is the LI's content note that it is wrapped in a clock level tag(P, DIV, etc. ... which ever is most appropriate semantically) of its own</p></li>
    	<li><p> this is the LI's content note that it is wrapped in a clock level tag(P, DIV, etc. ... which ever is most appropriate semantically) of its own</p></li>
    	<li><p> twill probably hold up to XVII in roman numbers if you need longer  numbers you will need to adjust the space on the left</p></li>
    
    </ol>
    	</body>
    </html>
    .lg li >p{font-size: 40%;} mean it wont support IE6 , of course... but you can just add a class manually to direct children of your LIs if you really need IE6. One of the big draw backs to this or any other method is that you will have to estimate how much space you need on the left yourself.

    Hope that helps

  4. #4
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is an HTML and CSS of stylized Order list number .You can design using this CSS.
    <ol>
    <li>
    <p>This is first line</p>
    </li>
    <li>
    <p>Here is second line</p>
    </li>
    <li>
    <p>And last line</p>
    </li>
    </ol>

    Go to this link for CSS styling this order list numbers,
    http://codeasily.com/css/style-ordered-list#nogo

  5. #5
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry, p tags don't belong inside an li tag. They are not needed at all, as the li is the list's equivalent of the p tag.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    The only time you'd have something else inside the <li> besides an image or anchor or what not, is a <span> or something like that.

    Basically to style a specific word. Dr John is correct, there is absolutely no reason for a <p> there. In your example, there is nothing you can't just style to the <li> tag that you can to the <p> (if I worded that right ).
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,823
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    And this is where lists get fuzzy. As has been stated, P tags / dives, etc dont really belong with an LI. THAT'S ASSUMING your is composed of all singe "paragraph" content. So an P within an LI is perfectly valid but is only semantic SOMETIMES.

    If you find that your content is just if you always intend to have LI P then you might as well get rid of the P (or replace it with SPAN with DISPLAY:BLOCK) as it is a redundant block element in THAT PARTICULAR CASE.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    They are not needed at all, as the li is the list's equivalent of the p tag.
    Did you miss what they're doing? It could be a span (semantically makes more sense anyway), but the point is to have the styles you place on "li" get overridden on everything you see in the li (by putting new styles on the child... p, span, whatever), while the browser-created numbers get hit with the li styles.

    They are adding HTML for styling reasons, but not because they believe a li needs a p in it. Would be nicer if we could say:
    li {
    styles;
    }
    li * {
    other styles;
    }
    where "*" here could hit the anonymous inline boxes of the text inside them. But we can only style elements, not loose text.

    Certainly my suggestion of
    <li><span>1</span> list item</li>
    sucks plenty of donkey balls here, if you take a listen to the page or get it without CSS. 1. 1 list item?? nyan nyan nyan


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •