Does anyone know how to build the SHOW template as Fieldname (left side) -> value (right side)?

I am a self admitted .css bumbler in Rails. I steal bits of .css
stylesheets from assorted projects and have completed some large
projects, but their .css is a mystery to me.
My goal is to make my SHOW view(s) show the fieldname on the left and
the value with a little space (hopefully fixed position) on the right.
Here is an example of one line of a show;

<p><b>State:</b> <%=h @account.state %></p>

This obviously puts the title and value right up against each other.
Does anyone have a 'pretty' show form who is willing to share their
secrets?
Thank you,
Kathleen

Phillip Koebbe wrote:

.label {
    float: left;
    text-align: left;
    font-weight: bold;
}

.data {
    float: left;
    text-align: left;
}

I should have added that you can also give them widths:

.label {
    float: left;
    text-align: left;
    font-weight: bold;
    width: 100px;
}

Phillip,
Thank you for your kind explanation. What do you think about using a
table to organize the show, for example;

<%= render :partial => "title" %>

<table><thead><tr><th>Laboratory</th><th></th></tr></thead>
  <tbody>
    <tr><td><b>Labname:</b></td> <td><%=h @lab.labname %></td></

    <tr><td><b>Email:</b></td> <td><%= auto_link(@lab.email)
%></td></tr>
    <tr><td><b>Website:</b></td> <td><%= auto_link(@lab.website)
%></td></tr>
    <tr><td><b>Phone:</b></td> <td><%=h @lab.phone %></td></tr>
    <tr><td><b>Address:</b></td> <td><%=h @lab.address %></td></

    <tr><td><b>City:</b></td> <td><%=h @lab.city %></td></tr>
    <tr><td><b>State:</b></td> <td><%=h @lab.state %></td></tr>
    <tr><td><b>Zipcode:</b></td> <td><%=h @lab.zipcode %></td></

  </tbody>
</table>

<%= link_to 'Back', labs_path %>

It sure looks good.
Kathleen

KathysKode@gmail.com wrote:

Phillip,
Thank you for your kind explanation. What do you think about using a
table to organize the show, for example;

Using tables in layouts can be as hot a discussion as religion or
politics. Generally, if your data is tabular, tables are appropriate. If
you are creating a form, it's probably "more correct" to use divs. But,
the bottom line is, as you pointed out, is how it looks. If you are the
only person that has to maintain the code, what you say goes :slight_smile:

Personally, I use tables only for tabular data and divs for everything
else (including forms).

[By tabular data, I'm meaning something like search results.]

Peace,
Phillip

I’m pretty much a standards advocate, but I suggest using tables for things that make sense for tables.

Tables shouldn’t be used to lay things out. You want to be able to separate your design from your presentation.

That said, “tablular data” could be expanded to mean anything that is two-dimentional. This can include name/value pairs, so it might be appropriate to use a table to display the show page if you really are trying to represent it in a tabular manner.

The same goes for forms, as you have names and values there too.

Standards advocates tend to hate tables for two reasons:

  1. Excessive markup. A lot of times you have way more markup than is necessary. Standards-based design is all about semantic markup - using tags for their intended purpose. However, if you end up using a ton of divs and spans and css to get it to look right, do you still, in the end, have less code?

  2. Accessibility concerns, especially for screen readers. You have to jump through a lot of hoops to get a screen reader to read the tables in the order you think they should be read. When sites use tables completely for the layout, it’s a terrible mess.

My opinion on this boils down to this:

You have requirements. It has to look this way and it has to be done by this time. The only people who are going to pick on you for using a table for a layout are standards advocates and other web developers. How much do their opinions matter to you, and how much time / money do you have to burn to do it the “right” way in their eyes? I break the “rules” from time to time because I have to GET STUFF DONE. :slight_smile:

Just throwin’ my .02 around.