formatting stylesheet.css multiple pictures

[Verushka]

Does anybody know when having images be the category links on the home page, how to format the spacing. As it is the pictures are touching eachother and there is not space inbetween the pictures. I set the pictures in the Zencart tools layout menubar to display all the time. However the category pictures are touching eachother. Where on the stylesheet.css do you format the spacing of the pictures. Any help would be appreciated. My website is
www.annaclaireshouse.com
Currently the pictures don't all display probably because I changed some of the php text in removing the banner ads.
Any help would be appreciated.

[tony_sar]

you can add margin to your divs .. i only see one image per category so can not tell much .. please add additional image and let us see what we can come up with

[Paul69]

As you can see from below, the "categoryListBoxContents" contain your pictures. I highly recommend using a tool in FireFox called firebug as it saved me much time. You can trace your CSS page by using it and determine where in the stylesheet it lies. You can even add sections if necessary and expiriment by changing CSS settings and viewing before actually changing them. It works great for me!


style="width: 33%;" class="categoryListBoxContents"><a href="http://www.annaclaireshouse.com

[Verushka]

you can add margin to your divs .. i only see one image per category so can not tell much .. please add additional image and let us see what we can come up with

Thanks for responding Tony. I had to redo the website yesterday to make sure everything was right, because previously I had edited some php files to get rid of the banner adds and my edits weren't showing correctly. I've added five other pictures making it six pictures total. There is one picture for each category. There are six pictures on the main page which will be links to go in each category, which actually are collections. Can you please explain how to add margins to the div's. I'm assuming it is on the stylesheet.css. I will be adding the products for each category, which is really in its own collection. Thank you for any input... it makes putting it all together slowly come together.

[Verushka]

As you can see from below, the "categoryListBoxContents" contain your pictures. I highly recommend using a tool in FireFox called firebug as it saved me much time. You can trace your CSS page by using it and determine where in the stylesheet it lies. You can even add sections if necessary and expiriment by changing CSS settings and viewing before actually changing them. It works great for me!


style="width: 33%;" class="categoryListBoxContents"><a href="http://www.annaclaireshouse.com

Hi Paul thanks for responding. I have already loaded firebug into my computer after reading the forum (I am a spoiled dependent upon Dreamweaver to do the coding... Adobe CS3 user), and am constantly viewing my website with it. In taking your advice using firebug I changed the "categoryListBoxContents" style="width: 33%;"class="categoryListBoxContents" from 33% to 42%and it worked by inputting spacing. But now there are only two pictures per line. I'm guessing it's because of the right column having 150px set for it. Do you know how to delete the right column so I can have the space for three pictures per row? Thanks for taking the time to help out. Any and all help is much appreciated.

[stevesh]

Admin - Configuration - Layout Settings - Column Right Status Global.

As I mentioned in your other post, you might want to increase the width of #mainWrapper, too.

[Verushka]

Thanks so much everyone, this worked changing the size of the main wrapper on the stylesheet.css. I kept changing the pixels and ended up with about 875 pixels.


Another question concerning [FONT=Century Gothic]CHANGING IMAGE SIZE: [/FONT]Can anybody help with changing the size of the BannerBoxallContent redirect banner 9 picture. I changed the tile sidebox header to my own of fabric choice. And changed the url to my picture. My picture is about 900 x 900 pixels. But it's as if there is some php coding changing my picture size to 582 px x 532. I looked on the index.php page but didn't see any image sizes to change. Does somebody have this answer. My website is www.annaclaireshouse.com. The first left sidebox picture that says fabric swatch is the link, but then the picture that comes up which shows the available fabrics loads up to small. Thanks ahead of time...... Happy Memorial to you all.

Admin - Configuration - Layout Settings - Column Right Status Global.


As I mentioned in your other post, you might want to increase the width of #mainWrapper, too.

[Verushka]

Thanks so much everyone, this worked changing the size of the main wrapper on the stylesheet.css. I kept changing the pixels and ended up with about 875 pixels. Can anybody help with changing the size of the BannerBoxallContent redirect banner 9 picture. I changed the tile sidebox header to my own of fabric choice. And changed the url to my picture. My picture is about 900 x 900 pixels. But it's as if there is some php coding changing my picture size to 582 px x 532. I looked on the index.php page but didn't see any image sizes to change. Does somebody have this answer. My website is www.annaclaireshouse.com. The first left sidebox picture that says fabric swatch is the link, but then the picture that comes up which shows the available fabrics loads up to small. Thanks ahead of time...... Happy Memorial to you all.

you can add margin to your divs .. i only see one image per category so can not tell much .. please add additional image and let us see what we can come up with

[stevesh]

It displays 910 X 931 here, although it is scaled to 93%, for some reason. Still bigger than 582 X 532, and plenty big enough to see the detail, I think. I'd center it on the page, though.

[Verushka]

Hi Stevesh... thanks for the response. I'm not sure why buy I tried my website on a desktop and checked the swatch picture and although it is sized at about 900 x 900 pixels, it says it is scaling it down to 568 x 582. Do you know how I can change this. I really want the picture to be larger so you can read the pattern objects easier. I tried finding where the banner image sizes are written on one of the php pages but couldn't find it....

Also if it wouldn't be to much trouble could you please tell me how I can put space between the pictures when you click on the pillowsack collection, on the pillowsackdresses when the product pictures are showing in the left column the pictures are touching each other. I'd lik to put some spacing between them.

Thanks so much for helping me from bumping the wall.

V