desideratum

Jul 25

Death to the Bottom Line

Some creative nth-child()-ing. In a table-esque inline-block list, it will remove the extra line that results from needing both container and list item borders.

Why might this be useful?

• Rounded corners on container: setting a negative margin on list items in the top/bottom row leave the corners misaligned.
• Pixel perfection: using a negative margin on either the top/bottom borders of the list items sometimes shaves off a pixel, resulting in slight vertical-misalignments.

For this example, I’ll be using a 3-column layout using only inline-block list items. The three selectors used in combination to select the bottom row in all permutations are:

For this example, I’ll be using a 3-column layout using only inline-block list items. The three selectors used in combination to select the bottom row in all permutations are:

There’s a pattern/strategy here. Let x be the total number of columns. All we have to do is figure out how to select each list item when it’s on the bottom row, and deselect it when it’s not. Let’s try this with four columns:

1. Select the last item, regardless of its position.

   li:last-child

2. Select the next to last child, except when it’s in the rightmost column (where it’s not touching the bottom).

   li:nth-last-child(2):not(:nth-child(xn))

3. Select the third to last child, except when it’s in the two rightmost columns.

   li:nth-last-child(3):not(:nth-child(xn)):not(:nth-child(xn-1))

4. Select the fourth to last child, except when it’s in any column but the leftmost one.

   li:nth-last-child(4):not(:nth-child(xn)):not(:nth-child(xn-1)):not(:nth-child(xn-2))

For additional columns, add another selector incrementing the nth-last-child() parameter, and add another :not(:nth-child(xn-?)), incrementing the ?.

Questions? Find me on Twitter and ask away! Or just view some working code on Dabblet.

Jun 20

[video]

Jun 04

[video]

[video]

Mar 01

DirecTV WTF

• Ren: [the tv's] fixed, but here were all the problems:
• Ren: 1) the first dish got filled to capacity, so they put up a 2nd dish and moved some of the connections to it (including ours)
• Ren: 2) the guy who put up the second dish used four way splitters for all the cables going to the units when they didn't need to be split
• Ren: 3) whoever did our original install also gave us a four way splitter inside our apartment, AND connected the wrong kind of cable ending to it (we only needed a two way splitter, one per receiver)
• Ren: 4) the software update directv did made the receivers way better at detecting issues, which is why all this stuff didn't get found before
• Keith: ho
• Keith: ly
• Keith: crap

Feb 07

Social Media Explained… with donuts

Jan 30

[video]

Jan 25

“If I had only one hour to save the world, I would spend fifty-five minutes defining the problem, and only five minutes finding the solution.” — Albert Einstein