# Does anyone know how to build the SHOW template as Fieldname (left side) -\> value (right side)? **URL:** \ **Category:** Rails\ **Created:** [July 11, 2008, 9:22pm UTC](https://www.ruby-forum.com/t/does-anyone-know-how-to-build-the-show-template-as-fieldname-left-side-value-right-side/142826 "2008-07-11T21:22:07Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\ **Post date:** [July 11, 2008, 9:22pm UTC](https://www.ruby-forum.com/t/does-anyone-know-how-to-build-the-show-template-as-fieldname-left-side-value-right-side/142826/1 "2008-07-11T21:22:07Z")
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; **State:** \<%=h @account.state %\> 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 ---
**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\ **Post date:** [July 11, 2008, 9:44pm UTC](https://www.ruby-forum.com/t/does-anyone-know-how-to-build-the-show-template-as-fieldname-left-side-value-right-side/142826/2 "2008-07-11T21:44:21Z")
removed\_email\_address@domain.invalid wrote: > 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; > > **State:** \<%=h @account.state %\> > > 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 Hi Kathleen, You need two divs (well, you could probably do it with spans, but I use divs), one for the label and one for the data. Float both left, text-align both left, then included a clearer div. Here’s an example State: Illinois and in the css file .label { float: left; text-align: left; font-weight: bold; } .data { float: left; text-align: left; } .clearer { clear: both } That should do it. You need the clearer to make sure the next “line” is actually on the next line because of the float: left. Peace, Phillip ---
**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\ **Post date:** [July 11, 2008, 10:44pm UTC](https://www.ruby-forum.com/t/does-anyone-know-how-to-build-the-show-template-as-fieldname-left-side-value-right-side/142826/3 "2008-07-11T22:44:05Z")
Phillip, Thank you for your kind explanation. What do you think about using a table to organize the show, for example; \<%= render :partial =\> “title” %\> | Laboratory | | | --- | --- | | **Labname:** | \<%=h @lab.labname %\> | | **Email:** | \<%= auto\_link(@lab.email) %\> | | **Website:** | \<%= auto\_link(@lab.website) %\> | | **Phone:** | \<%=h @lab.phone %\> | | **Address:** | \<%=h @lab.address %\> | | **City:** | \<%=h @lab.city %\> | | **State:** | \<%=h @lab.state %\> | | **Zipcode:** | \<%=h @lab.zipcode %\> | \<%= link\_to ‘Back’, labs\_path %\> It sure looks good. Kathleen On Jul 11, 1:46 pm, Phillip K. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) ---
**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\ **Post date:** [July 11, 2008, 10:48pm UTC](https://www.ruby-forum.com/t/does-anyone-know-how-to-build-the-show-template-as-fieldname-left-side-value-right-side/142826/4 "2008-07-11T22:48:00Z")
removed\_email\_address@domain.invalid 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 🙂 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 ---
**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\ **Post date:** [July 11, 2008, 9:46pm UTC](https://www.ruby-forum.com/t/does-anyone-know-how-to-build-the-show-template-as-fieldname-left-side-value-right-side/142826/5 "2008-07-11T21:46:15Z")
Phillip K. 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; } ---
**Author:** ![casper\_the\_ghost](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/58956e/32.png) [@casper\_the\_ghost](https://www.ruby-forum.com/u/casper_the_ghost)\ **Post date:** [July 11, 2008, 11:01pm UTC](https://www.ruby-forum.com/t/does-anyone-know-how-to-build-the-show-template-as-fieldname-left-side-value-right-side/142826/6 "2008-07-11T23:01:49Z")
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. 🙂 Just throwin’ my .02 around. On Fri, Jul 11, 2008 at 3:48 PM, Phillip K. \<