编辑Magento 1.9 CSS以自定义类别布局

Question

I'm trying to customize the list.phtml page on magento for a specific category .

I took away the product image as well as the product description and now I want to push the product name over to the left where the image was . I tried using a negative value for margin-left in my css file which takes care of the text but it seems as if something is floating in front of the text (i.e. the text slides behind white space.) Any ideas ? Another way of going about this maybe ?

Thanks !

Before:

http://i.stack.imgur.com/mtlZX.jpg

After:

http://i.stack.imgur.com/OQpCW.jpg

I have also tried modifying these values in the styles.css:

.product-view .product-shop {
   width: 50%;
   float: left;
}

.product-img-box {
   width: 50%;
   float: right;
}

</div>

Answer 1

Try adding this after removing the images to your css file.

.products-list .product-shop {
  float: right;
  padding-left: 20px;
  width: 100%;
}

This will let the products div take up the entire width. But you should first remove the images,

To remove the images go to your Magento installation (1.9.1) and then go to app/design/frontend/YOURMAGENTOTHEME/default/template/catalog/product/list.phtml

YOURMAGENTOTHEME is by default rwd in 1.9 and newer

Now you need to remove the following between line 50 and 63 (1.9.1)

  <?php // Product Image ?>
            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" class="product-image">
                <?php /* Based on the native RWD styling, product images are displayed at a max of ~400px wide when viewed on a
                        one column page layout with four product columns from a 1280px viewport. For bandwidth reasons,
                        we are going to serve a 300px image, as it will look fine at 400px and most of the times, the image
                        will be displayed at a smaller size (eg, if two column are being used or viewport is smaller than 1280px).
                        This $_imgSize value could even be decreased further, based on the page layout
                        (one column, two column, three column) and number of product columns. */ ?>
                <?php $_imgSize = 300; ?>
                <img id="product-collection-image-<?php echo $_product->getId(); ?>"
                     src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->keepFrame(false)->resize($_imgSize); ?>"
                     alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
            </a>
            <?php // Product description ?>

This is the more correct way, alternatively you can add this to your CSS to hide the image:

.product-image > img{
display:none;    
}

This is incorrect however.