Align Category Grid Images

Store UI, layout, design, look and feel; Discussion on the customer facing pages of your online store. Cascading Style Sheets, Themes, Scriptlets, NVelocity and the components in the ConLib directory.
Post Reply
User avatar
hassonmike
Lieutenant (LT)
Lieutenant (LT)
Posts: 76
Joined: Tue Apr 19, 2011 2:13 pm
Contact:

Align Category Grid Images

Post by hassonmike » Tue Jan 10, 2012 1:08 pm

On almost all of the pages of our store, the category images are staggered because they sit on top of the summary text. I would like to know how I can have all the images aligned to the top of the grid, while keeping the summaries aligned to the bottom.

An example can be seen here: http://www.trickconcepts.com/Juggling-C71.aspx - where the image for "juggling torch" sits lower than the rest.


I found some code that resembles this in CategoryGridPage.aspx but when I modified this code at line 54

Code: Select all

 
                    <ItemStyle HorizontalAlign="center" VerticalAlign="bottom" Width="33%" CssClass="tableNode" />
to look like

Code: Select all

 
                    <ItemStyle HorizontalAlign="center" VerticalAlign="top" Width="33%" CssClass="tableNode" />
it seemed to have no effect. Where else might I want to look to accomplish this?

User avatar
hassonmike
Lieutenant (LT)
Lieutenant (LT)
Posts: 76
Joined: Tue Apr 19, 2011 2:13 pm
Contact:

Re: Align Category Grid Images

Post by hassonmike » Tue Jan 10, 2012 1:10 pm

I also added

Code: Select all

VerticalAlign="top"
to the tag on line 53

Code: Select all

OnItemDataBound="CatalogNodeList_ItemDataBound" DataKeyField="CatalogNodeId" CssClass="catalog" EnableViewState="false" HorizontalAlign="Left">
with no apparent effect

mouse_8b
Commander (CMDR)
Commander (CMDR)
Posts: 115
Joined: Mon Oct 11, 2010 1:21 pm
Location: Austin, TX
Contact:

Re: Align Category Grid Images

Post by mouse_8b » Tue Jan 10, 2012 6:17 pm

Applying text-align:center should center the image too. I just used firebug on your site to add text-align: center to the <td class="tableNode"> and it centered text and image.

RKS_213
Lieutenant (LT)
Lieutenant (LT)
Posts: 69
Joined: Mon Dec 26, 2011 2:48 pm

Re: Align Category Grid Images

Post by RKS_213 » Fri Jan 13, 2012 10:47 am

@mouse I don't think he's talking about the center position of the images relative their boxes, what he really wants is each tr is have a specific height and the images aligned to the top. This isn't happening because (like many outdated table sites) the styling limits of tables. What you're going to have to do is go into your AC code where they love putting tables and inline styling and separate your images from the data.

Right now, AC is grouping all the data into one cell, including the image. Stupid and lazy design, but hey, what do you expect from a group of people still using tables? What that causes (along with their inline styling) is that moving the image to the top isn't going to solve your problem. Because then you will get a site that the bottoms don't block correctly and the price of the torches will not align with the other prices of the other products. It will be one line up. So unless you're going to change all your descriptions to ensure they are all uniform, either way you align the boxes isn't going to solve your problem. It's going to look bad no matter what. So going in and changing the way the table is handling the product data is the only way you're going to be able to get it to look good.

So the first tr td will be product 1 image, the second td will be product 2 image, then the second tr td will be product 1 summary, the second td product 2 summary, then finally the lat tr holds the add to cart if you wanted that. So each row contains the same type of information and will be able to have a height and look aligned all the way across. Otherwise things aren't ever going to align like the example I'm going to post below.

@Mike, you're right. This is very annoying. Just a few days ago on some AC partner site they were advertising an AC wine store and said they designed it or something. Within seconds I saw things that turned me off. The firs thing was the product grid page http://www.napacabs.com/New_wine_arrivals.aspx.

If anyone thinks that page looks good they're just outdated in their thinking and living in 1995. The sad truth is that things like this turn customers away. No, it isn't the designers fault that AC builds their cart on outdated methods but letting a site go out like that is unacceptable.

Post Reply