Avatar

Variable length lines

by Nathan Pitman Aug 6, 2010
Shot_1281089999
Tweet
202 views
http://drbl.in/pKB
Icon-colordrop

Tags

  1. 14
  2. 6
  3. 3
  4. 3
  5. 1
  6. 1
  7. 1

6 Responses

  1. Avatar Nathan Pitman

    Hmm, how to code these... /cc @drewm ;)

    almost 2 years ago

  2. Pro Me Anthony Killeen

    Call me stupid (brain isn't functioning too great today) - can this not be done as a list? The title marked up with a dt and the rest as dd's and then floated alongside each other?

    almost 2 years ago

  3. Avatar Nathan Pitman

    My best shot at this... http://ninefour.co.uk/tmp/perch.html

    almost 2 years ago

  4. Pro Me Anthony Killeen

    Sorry, I was being dumb. Couldn't see those white lines on my screen. I take it that was what you were referring to?

    almost 2 years ago

  5. Peek Drew McLellan

    My solution was to treat it like a carousel. Item 1 is the title, item 2 is a reeeally wide line (a span) and those are wrapped in two containers. The outer container has a set width and overflow:hidden. The inner container has a massive width to allow the two items to float up next to each other.

    The double-pixel effect on the line is a combination of a bottom border and a box shadow.

    almost 2 years ago

  6. Pro Me-80 Craig Erskine

    fieldset and legend tags to the rescue, and no, you don't need a form tag or field to use fieldset. Draws the line in nearly every browser. Set the border to 0 except on the top and blammo, mission accomplished. That would be my quick and dirty method without images.

    almost 2 years ago

keyboard shortcuts: ← previous shot → next shot L or F like