SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Ordered List woes. Aligned LI's backgrond-image to item's number

    I'm trying to achieve a way to the following (attached image). However, the closest I can get still have a couple of kinks:

    a) the number is on the left but the background-image is aligned with the LI's content,

    or b) using list-style-position:inside, the content does a weird wrap directly underneath where the number is at.

    I have put a test page over here: http://test.pixelbebop.com/test29

    TIA,
    Sherwin
    Attached Images Attached Images
    Last edited by piku; Oct 26, 2007 at 11:25.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I would do it like this with one class only and about a quarter of the html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    ol.wrap{
        color:666;
        margin:0;
        padding:10px 10px 10px 2.5em;
        text-align:left;
        font-size:77&#37;;
        width:165px;
      background:#f7f7f7;
    }
    ol.wrap span{
        color:#666;
        display:block;
        text-align:left;
        font-size:92%;
      background:url('http://test.pixelbebop.com/test29/images/dashx_1_2.gif') left bottom repeat-x;
        padding-bottom:.5em;
        margin:0 0 0 -1.9em;
        text-indent:1.7em;
    }
    ol.wrap li{
        color:#06c;
        padding:2px 0;
        margin-bottom:.3em;
    }
    ol.wrap  em{
        font-style:normal;
        font-weight:normal;
        float:right;
      color:#666;
        text-align:left;
        font-size:92%;
    
    }
    
    </style>
    </head>
    <body>
    <ol class="wrap">
        <li><em>25,858</em>Title<span>(Category)</span></li>
        <li><em>16,441</em>Title<span>(Category)</span></li>
        <li><em>15,951</em>Title<span>(Category)</span></li>
        <li><em>12,989</em>Longer Title<span>(Category that's long)</span></li>
        <li><em>10,643</em>Longest Longer Title<span>(Another Category)</span></li>
    </ol>
    </body>
    </html>
    Hope that was what you wanted

  3. #3
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    At first glance, yes! I'll probably have to dissect this and make it work w/ the CSS library I'm extending from. I have put your example here for public consumption:

    http://test.pixelbebop.com/test29/solution-pob.html

    Thanks Paul!

  4. #4
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    Two questions regarding your example:

    1. What's the need for the "text-align:left" rule (in ol.wrap, ol.wrap span, and ol.wrap em)?

    2. Is there a better way to determine the numbers for these... as I thought it was more of a trial and error(?)

    Code:
    ol.wrap span {
    ...
    margin:0 0 0 -1.9em;
    text-indent:1.7em;
    ...
    }

    3. I noticed that you added:

    Code:
    ol.wrap li { ... padding:2px 0; ...}
    I recall it fixes spacing issues in IE(6) at most, but seems fine w/o it in FF. What is the particular bug name that this address btw? Links/pointers would be great for further reading.

    Again, thanks for the homework over the weekend =)

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    1) You don't really need the text-align:left at all. I just put it in there in case the menu was inside a parent that had text-align:center applied. IE6 (and under) would then have centred the menu in error as it centers block level elements in error when the parent had text-align:center applied. You can safely remove it if your menu has no such structure.

    2) I just did it by eye You can't really control where the browsers will place the marker so I just check in the major browsers and use something that looks good in all.

    You can of course work out exactly what each one should be in relation to the next as the em size is based on the elements font-size. The em padding on the ol is based on the ol's font-size but the negative margin on the span is based on the span's font-size and as both are different sizes then the em distance will be different on both. If you have a calculator and some simple maths you can work it out exactly

    The text-indent is just to move the text back into a decent position because we have shifted the span under the marker to get the border we wanted.

    3) The padding on the list was just to match it closer to your example and has no significance. It is often better to use pixel padding for top and bottom rather than em padding because of rounding errors where you will often lose a top or bottom border in certain circumstances when ems are used.


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
  •