Help with tables in Radiant?

Ruby Apps Radiant CMS
1

Does anyone have experience with building tables or tabular layouts from
Radiant pages?

I’m trying to use a grid-based layout to show excerpts from my pages
with
four columns and an undetermined number of rows. The trouble is that the
rows are of varying height, so I can’t just set the height attribute in
css.

Here’s the page:
http://as.biola.artofmission.net:8000/staff-directory/

If you look at it in Safari, you see what it’s supposed to look like.
It
breaks in Firefox and IE.

Right now it’s laid out using an unordered list. Ideally I’d like to
make it
a table (since it’s tabular data), and then figure out how to make table
rows with Radius tags. So after every fourth record, it would insert a
new

tag and start over. So far I haven't been able to figure this out.

Here’s the Radiant markup:

<r:find url=“about-as/executive-leadership-team”>

Executive Leadership Team

    <r:children:each> <li class=“<r:cycle values=“first, second,
    third, fourth”/>”><r:content/> </r:children:each>

Thanks for any help and advice you can give!

2

When in doubt, use wacky background colors.
Depending on your design, red, lime, yellow, and blue are quick
keywords that clearly alter the view without altering the layout (like
adding borders does). You could try floating the list items left (and
set the ul to overflow: hidden so that it expands to contain the
floated items)

I’d argue that this isn’t really tabular data, or at least that you
don’t intend to display it as such since each new row doesn’t
represent a new group, but a continuation of the previous one.
Unordered list makes more sense to me.

Having said all that, I’m not sure how to achieve the table layout you
want with radius tags. Sorry to be of no help there.

3

Jim G. wrote:

Unordered list makes more sense to me.

Having said all that, I’m not sure how to achieve the table layout you
want with radius tags. Sorry to be of no help there.

On Jan 21, 2008, at 11:05 PM, Ryan H. wrote:

I agree with Jim. Though I’m not such a purist that says you can never
use a table for layout – I just think a table is more trouble than it’s
worth here and not a good structural match anyway.

As to using tables with Radiant, I don’t understand your question.
Using tables is like using any other markup with Radiant. You can. Or
were you trying to automatically create this page from a db somehow with
your own custom tags?

Anyway, this is more of a CSS/Markup question than a Radiant one. I’ll
offer my thoughts, but if you want to discuss more, email me off the
list.

My suggestion…
So, I’d stay off of the tabular bit and keep your unordered lists. You
can probably find a way to use inline-block but FireFox still doesn’t
support it (though it does offer: -moz-inline-block which is similar).
The quick solution is to return to the float: left (that is see you have
commented out). The problem is that you need to clear every 4th item so
that it fully wraps to the left and creates a new line (I might use
something like

  • . Then change your CSS:
    ul#staff li {
    float: left;
    width: 155px;
    margin: 0 10px 18px 0;
    vertical-align: top;
    list-style: none none inside; <-- added this (display: block
    will accomplish this in many browsers too).
    }
    ul#staff li.newRow {
    clear: left;
    }

    I realize that this isn’t ideal since you’re adding some style-info into
    markup but, hey you were considering tables – and that’s pure style
    embedded intermingled with markup – so I figure this solution would be
    acceptable.

    Disclaimer: This might need some tweaking across browsers but probably
    not much if any. Works just fine in FF (don’t have time to test in all
    browsers right now).

    By the way, some of your email addresses are too long and extend over
    into the next column.

    Hope that helps,
    -Chris