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
[email protected] 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
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. [email protected]
[email protected] 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
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;
}
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:
-
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?
-
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. <