SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Wizard silver trophybronze trophy asp_funda's Avatar
    Join Date
    Jun 2003
    Location
    ether
    Posts
    4,479
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Unhappy setting the background colour of a list Item in OL

    Ok, before anyone tells me, I know that it can be done like
    Code:
    li {
    	background-color:#990000;
    }
    but that gives a red background colour to the content of the list item. I'm using OL & I want to give a background colour to the number that comes up before the list item's content. There doesn't seem to be any property to do that, or I can't find one. Can anyone help. I know that it can be done by using a coloured image & positioning it under the number but I would like to avoid using that technique.
    And it needs to work in IE5+, FireFox & if possible, Opera. So don't give me any solutions that work only on FireFox or anything saying that IE don't support web-standards, etc. That's not the point of this thread.

    Anyone?
    Our lives teach us who we are.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Me - Photo Blog - Personal Blog - Dev Blog
    iG:Syntax Hiliter -- Colourize your code in WordPress!!

  2. #2
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    OL item color

    Hi -
    You may just want to knock me on the head for
    suggesting this but:

    Skip the ol and just type it out using decimals
    and text. The styles can still be completely controlled via CSS.

    I've never heard how one can properly fiddle with the list-item
    marker backgrounds.

    Good luck,
    El

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    Other than positioning spans with coloured blocks under the numbers I can't think of any reasonable way to do this.

    LJK's solution is obviously one solution and your idea of a bg image in the list item would be another.

    (I assume you just wanted the number coloured and not the content otherwise you could pull the marker into the content with list-style-position: inside; but I'm assuming you knew that anyway.)

    Paul

  4. #4
    SitePoint Wizard silver trophybronze trophy asp_funda's Avatar
    Join Date
    Jun 2003
    Location
    ether
    Posts
    4,479
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by LJK
    You may just want to knock me on the head for
    suggesting this but:

    Skip the ol and just type it out using decimals
    and text. The styles can still be completely controlled via CSS.
    Yeah, you are right, I do want to knock on your head. No, actually, you don't understand. I can't use decimal numbers. Here, first take a look at http://blog.igeek.info/still-fresh/2...ons-continued/ to see why I'm using OL. Just scroll a little & you'll find a box containing some ASP code. Well, that's where I'm using OL, to give Line numbers to code so that when selected & copied, only code is copied instead of the line numbers. The way you sugested was implemented earlier & after complaints from users & readers, the decimal numbering was removed & OL was implemented. Its a syntax hiliting plugin that I made for WordPress(the open source Blogging software which I use).
    So when hard numbering of lines was being done, the line numbers had different bg colours, like grey for odd & black for even line numbers. But since now OL is being used, this feature has to be done away with. Some people do want that feature back & have asked me if it can be put back in.

    So I thought that there must be some easy way of changing the background color of the list markers.
    But if that's all the options I have, then I think that it'll be better to either use Paul's idea of positioning a <span> with a coloured background or my idea of using a coloured image as background.
    Our lives teach us who we are.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Me - Photo Blog - Personal Blog - Dev Blog
    iG:Syntax Hiliter -- Colourize your code in WordPress!!

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You people make this so hard . Here's a solution:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
    <title>List number coloring</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css" media="screen">
    <!--
    ol {
    margin: 0;
    padding: 0 0 0 2em;
    border: 1px solid #ccc;
    background: lime;
    }
    li {
    background: white;
    color: black;
    padding-left: 1em;
    font-family: monospace;
    }
    -->
    </style>
    </head>
    
    <body>
    <div>
    <ol>
    <li>private function myFoo (intOne, intTwo)</li>
    <li>myFoo = intOne + intTwo</li>
    <li>end function</li>
    </ol>
    </div>
    </body>
    </html>

  6. #6
    SitePoint Wizard silver trophybronze trophy asp_funda's Avatar
    Join Date
    Jun 2003
    Location
    ether
    Posts
    4,479
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That's some manipulation Vinnie. Thanks. But this isn't something that will work nicely. Read my previous post. I mentioned about my plugin having the alternate bgcolours for odd & even lines. So as per this method of yours, only one bgcolour is possible.

    So, can you suggest anything for accomodating 2 bgcolours?
    Our lives teach us who we are.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Me - Photo Blog - Personal Blog - Dev Blog
    iG:Syntax Hiliter -- Colourize your code in WordPress!!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    lol - very neat

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by asp_funda
    That's some manipulation Vinnie. Thanks. But this isn't something that will work nicely. Read my previous post. I mentioned about my plugin having the alternate bgcolours for odd & even lines. So as per this method of yours, only one bgcolour is possible.

    So, can you suggest anything for accomodating 2 bgcolours?
    If you know the size of your lines in pixels (very easy to do, just set the height and/or line-height of the list items), you can use a tiling background image on the list instead of the background color I used. Just create a graphic that's the height of both lines and use your two alternating colors, name the graphic "stripe.gif", and use this code for your list and items:
    Code:
    ol {
    margin: 0;
    padding: 0 0 0 2em;
    border: 1px solid #ccc;
    background: url(stripe.gif);
    }
    li {
    background: white;
    color: black;
    padding-left: 1em;
    font-family: monospace;
    height: 15px;
    }
    Using my code above, your image should be 30px tall, with two stripes, each stripe taking up 15px (the height of each list item).

  9. #9
    SitePoint Wizard silver trophybronze trophy asp_funda's Avatar
    Join Date
    Jun 2003
    Location
    ether
    Posts
    4,479
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yeah that's a neat way to do it but it will be difficult for users to set the bgcolours. Earlier they had to just change the colour values to customise the bgcolours, now they'll have to modify the image.

    I'll try this. Thanks a bunch.
    Our lives teach us who we are.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Me - Photo Blog - Personal Blog - Dev Blog
    iG:Syntax Hiliter -- Colourize your code in WordPress!!

  10. #10
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just free thinking here. what about doing some javascript to set vinnie's css style inline as it loops through the OL? change the bgcolor back and forth as the number changes from even to odd.

  11. #11
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by bbolte
    just free thinking here. what about doing some javascript to set vinnie's css style inline as it loops through the OL? change the bgcolor back and forth as the number changes from even to odd.
    My background coloring applies to the entire list (the CSS applies to the <ol> rule), not each individual item. asp_funda was going with the "style each item" approach, but that colors the background of the entire item (including its contents) rather than just the list marker.

  12. #12
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    right but he had said this at one time:
    I mentioned about my plugin having the alternate bgcolours for odd & even lines.
    was just trying to think of how he could do that.

    edit: actually i'm not sure what i'm saying. as now i'm really confused...

  13. #13
    SitePoint Wizard bbolte's Avatar
    Join Date
    Nov 2001
    Location
    The Central Plains
    Posts
    3,301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok here's what i meant. i was thinking that he could use JS to write the background color inline, changing the color for alternate LI elements as needed, rather than use a tiling image. that's what i was thinking. not sure if it's a valid idea or whatever...

  14. #14
    SitePoint Wizard silver trophybronze trophy asp_funda's Avatar
    Join Date
    Jun 2003
    Location
    ether
    Posts
    4,479
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bbolte
    right but he had said this at one time:
    I mentioned about my plugin having the alternate bgcolours for odd & even lines.
    was just trying to think of how he could do that.

    edit: actually i'm not sure what i'm saying. as now i'm really confused...
    Well, since my plugin is for WordPress(which is written in PHP), its also in PHP. And my plugin uses GeSHi as its syntax hiliting engine which again is in PHP. So basically, the alternate line number bgcolours were done by GeSHi core which specified one class for one line number & another class for other line number. No JS involved, just plain HTML & CSS.
    Our lives teach us who we are.
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Me - Photo Blog - Personal Blog - Dev Blog
    iG:Syntax Hiliter -- Colourize your code in WordPress!!


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
  •