Image position on category page

Hi, I'm trying to figure out how to change the image on my category pages. Right now it drops the text below the image instead of starting the text next to the image (like on the product pages). Which file has this info and how can I change it?

Post a url to this

kobra:

Post a url to this
I'm thinking I just had the same question. Good thing I looked before I started a new thread.
http://www.liberty-flag.com/index.php?main_page=index&cPath=4_187

I would like to "Align Left" the image so the text wraps around the image.

JOhn ><>

Here's what I'm talking about:

How can I make the image just sit to the left of the text instead of above it?

Hmm, don't know what it did to my url in the above post but here it is again:

https://ssl.perfora.net/outdoordecoronline.com/index.php?main_page=index&cPath=1

This should get what you want and you can adjust values as you see fit.

Find or add this to your stylesheet

#productListHeading {
width: 80%;
float: right;
margin-top: 50px;
}

#categoryImgListing {
width: 20%;
}

I made a few adjustments and "viola" perfect.

THANKS
JOhn ><>

Perfect in IE 6 & 7
Didn't work for Firefox 1.5
http://www.liberty-flag.com/index.php?main_page=index&cPath=4_194

Looks good in FF2... Image at top left and text wrapping neatly around it.

What is it doing in 1.5?

gjh42:

Looks good in FF2... Image at top left and text wrapping neatly around it.

What is it doing in 1.5?
In 1.5 the text is below the image. Not a real problem unless it is an easy fix. Just liking to clean up the text and reduce the space. This is what I have in the stylesheet.css

 
/* Category Image Placement */
#productListHeading {
width: 100%;
float: left;
margin-top: 0px;
}
#categoryImgListing {
width: 40%;
float: left;
/*padding-right: .5em; */
}
/* Category Image Placement End*/

LibertyFlag,

You kinda hijacked this post....and the OP's layout is different than yours and I really do not know what you are seeking but I tried the following and you may or may not like it.

/* Category Image Placement */
#productListHeading {
width: 60%;
float: right;
margin-top: 0px;
}

#categoryImgListing {
width: 40%;
float: left;
margin-top: 32px;
/*padding-right: .5em; */
}

#indexProductListCatDescription {
float: right;
width: 57%;
}
/* Category Image Placement End*/

Thanks for your concern Kobra! You're right, Liberty Flag's fix didn't work on my page but once I realized I needed to fix the CSS, it was just finding the right CSS file and playing with it. Here's what I ended up using that works:

#productListHeading {
float:none;
margin: 5px 0 15px 0;
}

#categoryImgListing {
float:left;
margin: 10px 10 10 0;
padding: 10px 10px 10px 0;
}

That code isn't perfect but it works well enough for now and adjusts depending on image size:

https://ssl.perfora.net/outdoordecoronline.com/index.php?main_page=index&cPath=1&zenid=6a284bf9b47fd6661fccd0eeb585f39b

What I'm trying to fix now is the distance between the product images lower down on the page because they sit on top of one another. Haven't yet figured out what file has that table info though. Anyone know?

Add to your stylesheet:

.productListing-even, .productListing-odd {
margin-bottom: 23px;
}

Adjust to taste, and also possibly add border-bottom and padding if desired.

This is missing a bit, unless it is just mistyped for your post:

#categoryImgListing {
float:left;
margin: 10px 10 10 0;
padding: 10px 10px 10px 0;
}

should be
margin: 10px 10px 10px 0;

Thanks, that *almost *did it ... but it only worked using "padding-bottom" instead of your "margin-bottom." It looks much better now!