Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Styling ordered list numbers/letters?

    Hi, I've searched and not found anything, so here goes:

    How do you style the list item numbers or letters in an ordered list? Like making the numbers bold/different colour/font/size?

    Maybe it's a dumb question, I dunno, what I do know - is that I can't think of the answer

    Any help would be greatly appreciated.

    Kind Regards,

    Gary

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Generated text

    I'm afraid there's nothing much to do; these list markers are generated content, so I think they adopt the styles specified for the list items themselves.
    Generating them yourself I guess would offer more posibilities, but of course IE doesn't support that...

    One way I can think of right now is to use background images; I've seen this done in a very appealing way, but this would mean id'ing every single list item and would require a bundle of images.
    You can of course always check the specs for more details; be aware though of browser support issues.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Maybe style the list markers with the li, and re-style the text within using span?

    Code:
    li {
     properties of the numbers
     }
    
    li span {
     properties of the text
     }
    
    <ol>
     <li><span>list item</span></li>
     <li><span>list item</span></li>
    <ol>
    I dunno if it'll work, but it's an idea...

  • #4
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys. I'm afraid you've confirmed my worst fears about this (not that I'll have nightmares about it).



    But it's a shame the only options seem to be some kind of tag fudge

    Many thanks,

    Gary

  • #5
    Regular Coder
    Join Date
    Aug 2004
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    you can check this out...it may be what your looking for
    http://www.alistapart.com/articles/taminglists/

  • #6
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rmedek
    Maybe style the list markers with the li, and re-style the text within using span?

    Code:
    li {
     properties of the numbers
     }
    
    li span {
     properties of the text
     }
    
    <ol>
     <li><span>list item</span></li>
     <li><span>list item</span></li>
    <ol>
    I dunno if it'll work, but it's an idea...
    yes! that worked for what I needed, thankyou so much!

  • #7
    Regular Coder
    Join Date
    Feb 2006
    Posts
    270
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ah lol, resurection !!

    i did something like that using :first-letter pseudo element, take a look:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    
    <head>
      <title></title>
      
      
      <style type="text/css">
      #services ul{list-style-type:none;padding:0;margin:0px 10px;}	
    
    
    
    .list a {text-decoration:none;display:block;letter-spacing:-1px;
             color:#000;}
    .list a:hover {color:#666;
                       text-align:center;}
    #list1 li :first-letter {color: #ccc;display:block;
    					     font-weight:bold;
    						 margin:0.2em;background-color:#b00;}
    
    #list2 li :first-letter {color: #ccc;display:block;
    					     font-weight:bold;
    						 margin:0.2em;background-color:#b00;}
    
    #list1 {float:left;}
    #list2 {float:right;}	
      </style>
    </head>
    <body>
     <div id="services">
     <ul id="list1" class="list">
    				<li><a href="#">&raquo;&nbsp;Windscreens</a></li> 
    				<li><a href="#">&raquo;&nbsp;Side Glass</a></li> 
    				<li><a href="#">&raquo;&nbsp;Rear Glass</a></li> 
    				<li><a href="#">&raquo;&nbsp;Resealing</a></li> 
    				<li><a href="#">&raquo;&nbsp;Chip &amp; Crack Repairs </a></li>
    
    	    </ul>
    </div>		
    </body>
    </html>
    translated: it reduced markup for that span thing, no need for that
    Last edited by orcrist; 04-12-2006 at 03:46 PM.


  •  

    Posting Permissions

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