-
- 25 Posts
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
[ed. note: viewsonic last edited this post 12 years, 10 months ago.]
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
-
- 88 Posts
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; }
Almost retired from web-development industry but still randomly writing at Lazylegs.info and on schedule hopefully in near future to finish Oracle and PostgreSQL ports of MODX