• Chunk with a divider#

  • viewsonic Reply #1, 6 months, 3 weeks ago

    Reply
    Using: MODX Revolution 2.1.3-pl (traditional)

    I have a image list that showing 2 image per row, there is 5 rows (total 10 images). The chunk create for every image a begin < div> and end is < /div> [this is because every images is linked with a title name]
    What I want is a black dotted line divider after a row, Do someone have any solution or can give me the right direction to implement this inside my site, thanks.

    What I want is this: (in the last row will the divider not showing up)
    image image
    ------------------------
    image image
    ------------------------
    image image
    ------------------------
    image image


  • sottwell Reply #2, 6 months, 3 weeks ago

    Reply
    There should be a way to indicate the last item with a classname for it in the script you're using to generate the list, then you can use CSS to add the dotted lines (with a border-bottom) and not have the border at all on the "last" item.

    You could also use the CSS pseudo-class :last-child http://www.quirksmode.org/css/firstchild.html


  • lazylegs Reply #3, 6 months, 1 week ago

    Reply
    This is pretty simple actually and works from ie7 up.

    div { General stylings for your div }
    div + div { border-top: 1px dotted black; } 


    This will skip over the first div as it is not next sibling of div And thus makes divider border for you

    Other way is like scottwell mentioned to use :fist-child in pretty similar manner, just reversed logic. Now removing the top border from the first div

    div { border-top: 1px dotted black; }
    div:first-child { border: 0; }