Need spacing code help

[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.

[lauriesscraps]

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.

[lauriesscraps]

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/i...e=products_new
http://www.lauriesscraps.com/store/i...tured_products
http://www.lauriesscraps.com/store/i...e=products_all

[alisammeredith]

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.

[gjh42]

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.

[lauriesscraps]

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!

[lauriesscraps]

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!?!

[gjh42]

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.