Need spacing code help

Do you mean the "New Products For October - Kits"? Those are all center-aligned.
The images in the New Products sidebox look like they are aligned left, but they are actually just too wide for their container and spill over to the right while their titles are properly contained, giving the appearance of being left-aligned.

gjh42:

Do you mean the "New Products For October - Kits"? Those are all center-aligned.
The images in the New Products sidebox look like they are aligned left, but they are actually just too wide for their container and spill over to the right while their titles are properly contained, giving the appearance of being left-aligned.

That would help to shrink those, so I will do that, but I am talking about the grid of images down the center of the page under the category links that we changed.

I repeat, those are all centered, individually and as a group. The sidebox image overflow may give the appearance that the center column has less space on the left than on the right; fixing the sidebox image sizes will fix that.

gjh42:

I repeat, those are all centered, individually and as a group. The sidebox image overflow may give the appearance that the center column has less space on the left than on the right; fixing the sidebox image sizes will fix that.

Alrighty then.... you were right, as always....thank you. You have been a saint.....thank you!
:yes::flex:

Did you respond to the breaks between attributes 1 and 2 listed below the description? Is that what you meant about 2 spaces after the image?

Different subject. The two spaces was for the all products listing image.

For the attributes gap, add to your stylesheet

#productAttributes br.clearBoth {clear: left}

This is getting hung up on the right-floated #cartAdd, and doesn't need to avoid it.

gjh42:

Different subject. The two spaces was for the all products listing image.

For the attributes gap, add to your stylesheet

#productAttributes br.clearBoth {clear: left}

This is getting hung up on the right-floated #cartAdd, and doesn't need to avoid it.

Thank you very much. It was great doing business with you.... I feel like I know you now, hahaha. But for real...Thank you.

I am needing to move the text from below the product image to next to the image and vertical and horizontally align the text there in the center. I did this for the "All Products" listing, but need to do it for the "Featured Products" and "New Products" listing.

On the "New Products" listing page the description text is next to the image but I need it centered vertically and horizontally.

On the "Featured Products" listing I need to move the text to next to the image and center it vertically and horizontally.

Can you help please?

Thank you!

http://www.lauriesscraps.com/store/index.php?main_page=products_new
http://www.lauriesscraps.com/store/index.php?main_page=featured_products
http://www.lauriesscraps.com/store/index.php?main_page=products_all

Hi Laurie.

Just a suggestion for if you don't already have it:

Firefox has a great web developer extension that will allow you to view CSS information from your browser. It is very helpful in finding where you need to change something in your stylesheet. It's also nice for looking at other people's sites to see how they've used the stylesheet.

I'm just kind of starting out with the zen cart stylesheet and this has been so useful. Hope it helps.

Yes, you should be learning to use the Firefox Web Developer (and Firebug too) so that you can start to fix little styling issues yourself. We are happy to help get people started, but everyone needs to learn to walk on their own eventually. Ask for pointers if you need help using the tools.

I downloaded and started using the web developer. BTW, google has one too. The firefox one is more detailed, but does not highlight the code for you like the google one does, but the google one does not show exactly what files the code is in. So my question is this....how do I know exactly where the coding is that needs to be altered when using the firfox web developer?

Any help would be great, thanks!

I don't think is helping me with the coding. I am not able to find the coding to alter and then where to alter it and how is the other problem. Any suggestions!?!

My usual approach to a styling problem is to use the Web Developer's Information > Display Element Information button. It will show class/id, ancestors and children of any element you click on, and then you can use the CSS > Edit CSS button to search your stylesheet(s) for the element and try out changes. When you get it right, you can go and edit your stylesheet (perhaps copy/paste the changes) with your usual method. It is possible to save the edited stylesheet directly on your computer, but I don't use that method.

For more complex styling problems, I like Firebug. Right-click on an element and "inspect", and you will get a nice view of the HTML and all of the styles that apply to the element (including marking overridden ones) in a side pane. Firebug can handle background images, too, unlike Web Dev, which is sometimes important.

Thanks for the feedback. It was helpful, but the only thing is that it shows the coding in HTML, when the style sheet is not in HTML.... so I am having a hard time finding the right coding for the specific problem listed above.

I have been able to find the coding for the vertical alignment in the tpl_modules_products_featured_listing.php, and tpl_modules_products_new_listing.php files, but not the coding to move the description up from below the image to next (to the right) of the image.

Thanks!

Don't try to use Web Dev or Firebug for the description relocation. You need to just go and edit the PHP files as described above for new and featured centerboxes. That is what you did to get the all products box to work.

And the HTML code is useless for editing the stylesheet. In either Web Dev or Firebug, you want to use CSS > Edit to try out styling changes, then your regular file editing process to make those changes permanently in your stylesheet.