Need some CSS help on my Shopp site
Building a WordPress site with an online store using the Shopp plugin. I am not very good at CSS and am stuck with how to get the catalog to appear how I want. Here is my store: http://matiz.websitewelcome.com/~vpdstore/shop
I want all the products to be horizontally aligned, all the product names to be horizontally aligned and then all the 'Add to Cart' buttons to be horizontally aligned. I can't figure it out!
Then, when you click on a detail page, for example, http://matiz.websitewelcome.com/~vpdstore/shop/womens-decorative-print-h... the larger image is totally cut off and I can't figure out why. Any guidance anyone can give would be much appreciated!!!
webwiz posted this at 06:10 — 19th September 2010.
He has: 629 posts
Joined: May 2007
If all the thumbnails were the same size (96 x 96) the descriptions at least would line up. Getting the buttons to line up with just CSS is not possible, considering how you have no control over text size, and therefore how many lines of text each description takes. I would use a script for this, getting the height of each box and applying the height of the tallest to every one.
To get the "Add to Cart" button to sit at the bottom of each box, I'd put "position: relative;" on each box, and absolutely position each button to the bottom of its box (left: 0; bottom: 5px; ?). You'd need to add enough padding to the box bottom to make room for it.
The reason your larger image is not appearing is because the "spacer image" you use in the li#preview-fill is set to its actual size--10 x 10 px--on account of this rule in style.css, line 363 -
.hentry img {...
height: auto !important;
width: auto !important;
}
Result - the ul.previews is only one text line high--not the 240px you intend.
Cordially,
David
--
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
redrobin12 posted this at 18:45 — 19th September 2010.
They have: 3 posts
Joined: Sep 2010
Hi David- Thanks so, so much for your response. I really need to learn more about CSS. Any recommendations? Also, I understand a bit the theory behind what you are saying, but I'm still not totally sure how to fix it... How do I make the thumbnails all the same size, as you suggest? Will it distort them? What do you mean 'use a script to get the height of each box and applying the height of the tallest to every one?' I don't know how to do that.
What would the CSS look like to make each add to cart button position to the bottom? I'm good at tweaking CSS, but not writing it.... I didn't realize when I bought this plugin I would need to know CSS... Not your fault of course but now I'm stuck trying to fix this! LOL
I'm also not totally sure what I'm supposed to change to fix the spacer image problem? I don't see 10px x 10px anywhere so I can't figure out where to tweak that.
Again, thank you so much for your kindness.
Sincerely,
Lisa
webwiz posted this at 05:41 — 20th September 2010.
He has: 629 posts
Joined: May 2007
Your spacer image is set in the HTML and in the CSS to the size of the large image, to make room. The large images, which are absolutely positioned, take up no room themselves.
Because of the "overflow: hidden;" on the container, the large image is cut off, as you can see. The "!important" on the spacer width and height trumps both the CSS and HTML width and height, so the spacer only takes up 10px by 10px instead of the size you want. Take off the "!important" from the width and height, and you may get to see the large image. Of course, that may affect something else, perhaps on another page... :\
I made an attempt with the gallery here, trying to avoid any JavaScript:
http://webwiz.robinshosting.com/temp/shop/
CSS and comments included on the page. It's not perfect, but close, I think. It survives substantial increased text size quite well. Also will reduce to four "columns" on a narrow window... Except in IE 6, of course.
Tested in Safari, Firefox, IE 6,7, and 8.
Cordially,
David
--
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
redrobin12 posted this at 18:15 — 20th September 2010.
They have: 3 posts
Joined: Sep 2010
David, I can't thank you enough for your help! I managed to get the detailed pages fixed but I still can't figure out how to get the catalog pages to work as the CSS is fairly complex. I am not sure exactly where to apply each of the css attributes that you created in your example. Any further direction you can give would be much appreciated. Please let me know if there is anything I can do for you. Regards, Lisa
webwiz posted this at 20:56 — 20th September 2010.
He has: 629 posts
Joined: May 2007
You said:
Personally, I'd complain that it's the HTML that is way, way too complex. It's my belief that using POSH markup--Plain Old Semantic HTML--is the only way to go. A few DIVs and SPANs *may* be needed as hooks for CSS, but, as I tried to demonstrate, even these may not be necessary.
What I tried to give you was some minimal styling of a simple list of products, using the bare necessities of CSS to get it to work cross-browser. The CSS properties (no attributes in CSS!) are applied to the elements that are selected by the--err--selectors.
FWIW - Sitepoint has some "Live" courses I can recommend. Perhaps the one on CSS will help you:
http://courses.sitepoint.com/css-live
The "live" course already took place, but the material is still good. I have not taken this particular course, but took 3 others, all of which were terrific value. (But a lot of work--they are quite comprehensive.)
Cordially,
David
--
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.