Saturday, July 21, 2012

An HTMLish Question

A quick one, web-savvy readers: As of last week, I reorganized my big word-of-the-week list. Instead of bullet points like you see here, with the inexplicable line breaks that sometimes even occurred mid-word, I now have the words arranged into three columns. This solves the line break problem and it’s not a single column that you’d sprain your scrollwheel finger trying to get to the bottom of, but I don’t love the look of it.

Does anyone have any suggestions for tidy ways of managing lone lists of links? Thanks in advance if you do.

5 comments:

  1. Hrm. Well, a couple suggestions:

    # If the weird mid-word wrapping was your main concern on the old list of links, you could fix that by 1.) removing the `.content { word-wrap: break-word; }` from your CSS, and 2.) removing the   that follows each link.
    # I actually don’t mind the three column-layout, myself. Maybe if you grouped them by letter, with a heading preceding each section? Shortening them up might help.

    Anyway, good luck!

    ReplyDelete
    Replies
    1. Hey. Thanks much for the reply. I shall fiddle and see what I can do. And while I guess I don't mind the three-column set up so much myself, but it effs up the mobile layout. Not that anyone on a smartphone is scouring that list, but still.

      Delete
  2. Anonymous10:51 PM

    If you know any javascript, using Dojo's or jQuery UI's accordian pane would be a good choice. They're essentially collapseable panes containing items within. You could also use serveral select menus, indexed by starting letter.

    http://dojotoolkit.org/reference-guide/1.7/dijit/layout/AccordionContainer.html

    http://jqueryui.com/demos/accordion/

    ReplyDelete
    Replies
    1. I shall look into this as well. Thanks, masked stranger!

      Delete
  3. Hi there,

    You could use the following code:

    [check list]
    Bullet point
    Bullet point
    Bullet point
    [/check list]

    Or alternatively, you could make a div list like below. Just change the square brackets to triangular ones.

    [div class="list"]
    [h2]Title/H2 heading here[/h2]
    [ul]
    [li]Bullet point[/li]
    [li]Bullet point[/li]
    [li]Bullet point[/li]
    [/ul]
    [/div]

    Hope that helps.

    ReplyDelete