Task A: Product Maintenance. #3

Kerruptor1 says:

…this aligns perfect on multiple browsers..
I added span class to both elements..

<span class="list-price">Price</span><br />
<span class="price-num"><%= number_to_currency(product.price) %><span>

and the extra css elements:

#product-list .list-price {
display: block;
text-align: right;
}

#product-list .price-num {
display: block;
text-align: right;

}

Dave says:

I added a new column to the table in list.rhtml:

<td>
  <span class="list-price"><%= h(product.price) %></span>
</td>

I added a new entry in the depot.css stylesheet for list-price

#product-list .list-price {
        text-align:  right;
}

SydneyStephen? says:

but the price still does not align correctly…

Eric says:

If you want the price to truly align right, you would need to use a div tag instead of span

Axel says:

span & div both won't help as in both cases we would only have used the style on a little container which is in no way connected to the other little containers of its kind. So inside its little container it would be aligned correctly but the containers don't have the same width and are themselves aligned to the left of the surrounding td. The style has to be applied to the td itself.

<td class="list-price">
  <%= number_to_currency(product.price) %>
</td>

Steve says:

I added the line below the product image

<td><center>
  <img class="list-image" src="<%= product.image_url %>" /><br />
  <%= number_to_currency(product.price) %></center>
</td>

I added the price to the title of the book as follows:

<span class="list-title" ><%= h(product.title) %> (<%=number_to_currency(product.price)%>)</span><br />

Dave says:

Steve, nice way to currencify a number. I used the clunkier

h('$'+product.price.to_s)

I needed to cast price to a string using .to_s, otherwise ruby attempts to add a number to a string (and fails).

Donovan says:

I added a third column with a "Price" heading using the following snippet in list.rhtml:

<td>
    <span class="list-price">Price</span><br />
    <%= number_to_currency(product.price) %>
</td>

Hi…this not exactly listed as one of the excercises but I wanted my application to show real JPG images. I tried putting an image in the <pre><depot_root>/images/svn.jpg</pre> location and the image_url value in the database is /images/svn.jpg but I still get a red X on the screen.

What am I doing wrong?

your image has to go to <depot_root>/public/images/svn.jpg

I'm having the same problem as the guy above, except.. that my images are in <depot_root>/public/images/ dir. In the database the image_url is /images/imagename.jpg Not sure what the problem is, when you right click the red-x it shows the image location as

(you need to make sure the filename in the database looks like '/images/imagename.jpg' instead if 'images/imagename.jpg' otherwise you end up with a relative path, which is what that looks like.. alternatively, if you eliminate the path from the database all-together, and put <pre> src="images<%= product.image_url %>" </pre> in the list.rhtml )

Ok problem solved, when I copied and named the files I encluded the .jpg or .png in the filename and was left with imagename.jpg.jpg fixed this and everything is working just fine.

Align right can be done with CSS. I too created a span of class list-price. In depot.css you can do the following:

#product-list .list-price {
    display: block;
    text-align: right;
}

It is important to remember that the span element is an inline element and not a block element, but you can use CSS to suggest it to be a block element. (remember CSS is only a suggestion to the user-agent, it is never guaranteed) This gives it dimensions like p or div element. Now you can use text-align, because it doesn't work with inline elements. The number_to_currency is important not to miss!

Zach says:

I like the number_to_currency helper method more than what I used:

h("$%.2f" % product.price)

Andrew says:

Thanks for the number_to_conversion hint. I figured out how to insert/change the currency symbol as:

<td>
<span class="list-price">Price</span><br />
<%= number_to_currency(product.price, :unit => "£") %>
</td>

And I didn't like the colours too much so I changed these lines in depot.css :

#product-list .list-line-even {
background: #f0f3fa;
}

#product-list .list-line-odd {
background: #d6ddf0;
}

Trientalis says:

I just created a new column and styled it with css:

</td>
<td class="price"> 
<%=h product.price %>&nbsp;&euro;
</td>

and

#product-list .price {
  width:        10%;
  font-size:    small;
  text-align:   right;
  padding: 0em 0em 0em 1em;
  vertical-align: middle;
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License