235 users online (0 members and 235 guests)  

> > > > help with <ol><li> behavior

  Results 1 to 4 of 4

Related

  1. Pop up menu AP Div buttons behavior    Forum: CSS Forum
    Replies: 5
  2. Unusual CSS behavior    Forum: CSS Forum
    Replies: 4
  3. Strange view source behavior.    Forum: HTML Forum
    Replies: 1
  1. 06-16-2009, 10:52 AM #1
    illusionbuster
    illusionbuster is offline
    illusionbuster's Avatar
    New User
    Status
    Offline
    Join Date
    Mar 2009
    Location
    north carolina
    Posts
    4

    help with <ol><li> behavior

    I am trying to have my <li> show up in red but I want the text that follows to be in black.
    I have a CSS as follows: li {color:red;}
    But in order to have text in black I have to use either <font color or a font class="color" or a <span class="color">. Is there a way of cancelling the effect of the text being red following the <li> being red? thanks
    ib
    Reply With Quote Reply With Quote
  2. 06-16-2009, 11:40 AM #2
    jthayne
    jthayne is offline
    jthayne's Avatar
    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: help with <ol><li> behavior

    So you are looking to make the dot/number of the list a different color from the text, right?

    If so, then you have two choices:
    1. Use an image as the marker
    2. Put the text within a <span> tag that is styled differently from the list as in the following code:
    HTML Code:
    <html>
    <head>
        <style type="text/css"><!--
            ul.specials li { color:green; } 
            ul.specials li span { color:navy; } 
        --></style>  
    </head>  
    <body>  
        <ul class="specials">  
            <li><span>One.</span></li>  
            <li><span>Two.</span></li>  
        </ul>  
    </body> 
</html>
    Personally, I would choose the second choice, but that is up to you.

    Code borrowed from http://http://www.gidforums.com/t-7254.html
    Last edited by HTML; 03-09-2012 at 10:47 AM.
    Coding and Misc Thoughts.
    Reply With Quote Reply With Quote
  3. 06-16-2009, 12:47 PM #3
    illusionbuster
    illusionbuster is offline
    illusionbuster's Avatar
    New User
    Status
    Offline
    Join Date
    Mar 2009
    Location
    north carolina
    Posts
    4

    Re: help with <ol><li> behavior

    Thanks for the tip it work perfectly.
    I did something similar but used it a bit differently and your method saves some xtra typing. and since I am using it a lot of times it save a real lot of typing.
    here is how I did it.
    <style type="text/css">
    li {color:red;}
    .black {color:#000000;}
    </style>
    <body>
    <ol>
    <li><span class="black">One.</span></li>
    </ol>
    </body>

    As you can see your method putting the class in <ol> saves me from a lot of work considering there may be up to 10 <li> items. Again I thank you very much.
    Reply With Quote Reply With Quote
  4. 06-16-2009, 05:31 PM #4
    jthayne
    jthayne is offline
    jthayne's Avatar
    Status
    Offline
    Join Date
    Aug 2008
    Location
    Texas
    Posts
    508

    Re: help with <ol><li> behavior

    No problem. Glad to be of assistance.
    Coding and Misc Thoughts.


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread