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}