Ruby Catalog how to list sideways

Hi

when i use <% for groceries in @groceries %> in the html file what i
get when i list objects is this:

#(object 1)
#(object 2)
#(object 3)
#(object 4)

what i want is this

# # # # (end of page)
# # # # (end of page)

how do i code this type of listing?

tyliong wrote:

Hi

when i use <% for groceries in @groceries %> in the html file what i
get when i list objects is this:

#(object 1)
#(object 2)
#(object 3)
#(object 4)

what i want is this

# # # # (end of page)
# # # # (end of page)

how do i code this type of listing?

If you are using a a list <ul id = 'my_list'><li></li><li></li>...</ul>

You can have a style that says .my_list{display: inline;} and that will
display all the elements in a row on the page and not on different
lines.

-S

I am kinda of a newbie to css as well. Could u show an example of
setting an inline css div and how it works in the .html.erb file?

Actually, the example shown in the previous post does show your both the
HTML and CSS. The example is not using a <div> but rather an unordered
list <ul> with list items <li> which is then styled to be rendered
inline .my_list {display: inline;}.

However, you are likely going to need some additional styles applied to
get the effect that you're after. Like the one to turn off the bullets
on the list items (list-style-type: none;} and you may need to adjust
margins and padding {margin: 0; padding: 0}.

In a ideal world it would be great if you could use {display:
inline-block;} that would render each list item as a block rather than
inline, but still render horizontally. IMPORTANT: display: inline-block;
is not yet well supported, even by modern browsers. I found that Safari
4.0 (Dev Preview) does support it, but Firefox 3.0 does not.

Also note that I personally use {float:left;} rather than {display:
inline;} Which achieves a very similar effect as {display:
inline-block;}, but is better supported by current browsers.

tyliong wrote:

Will this work with tables? each of my objects # is actually a small
table

Update:
I got what u guys mean. been learning a bit of css.
the next question is:
how do i get this to work with <% @groceries.each do |i| %>

I want it to look something like this below:

http://l.yimg.com/g/images/en-us/tour/organize_1.jpg

a picture with the image and words beside it then have the search
results displayed in a grid manner

Is using a table the wrong way going about representing each element
in the page?
If so how should i represent each element?

Solved. this one is so unbelievably simple. {float:left}