What is making my images display fine on one page, and overlap on another?

HTML & CSS
1

I’m having a bit of trouble identifying what the problem is when trying to get my row of images to be as large as possible, without overlapping.

The code below gives me this:

Category 1:

Category 2:

What I wanted is to get rid of the white area around the image so the hover border looks like its around the edge of the image itself, and make the images fit in the available space.

I thought I had figured it out, by increasing image_ratio='150'; to image_ratio='200';

still had a bit of a border, but it was close enough for me to be happy with

But on my category 2 the images completely overlap -

Is it possible because my source images in category 2 are not square originally?
Am I changing the wrong variable?
Is there a better way to get rid of the border and have the three images fit?
If I wanted to put two categories per line and make the images fit in the space what would I need to change?

.categories-container, .products-container, #categories-header {float:left; clear:both; width:100%;}
#categories-header {margin-top:0px; padding:0; width:980px;}

.categories-container, .products-container, #specials-header, #categories-header {float:left; clear:both;}
.products-container {margin-bottom:3px;}
.item {float: left; margin-left: 0px; margin-right: 0px; text-align: center; width: 188px; margin-bottom:0px;}
.item-image {margin-bottom:10px; background:#fff; padding: 6px 0;position:relative;}
.item-image img {display:block; margin:auto;}
.cover{
    background: none repeat scroll 0 0 #FFFFFF;
    height: 40px;
    left: 143px;
    position: absolute;
    top: 121px;
    width: 29px;
    border-radius: 14px; 
    -moz-border-radius: 14px; 
    -webkit-border-radius: 14px; 


}
.item-image:hover {box-shadow: 0px 0px 10px #EEEEEE; cursor:pointer; -moz-transition: all 0.2s ease-in-out 0s;}
.item-name, .cat-item-name {
    float: left;
    font-weight: bold;
    text-align: center;
    width: 189px;



  <div class="categories-container">               
            data='categories';
            location='auto';
            cols='3';
            rows='100';
            page_navigation='auto';
            orderby='orderlocation, name';
            editbuttons='YES';
            counterreset='3';
            image_ratio='150';
            image_width='auto';
            image_height='auto';
            font_formatting='NO';
            output_start='output_start='';
            output_row_start='<div class="row cf">';
            output_column_start='';
            output_item='
                <div class="item i-[counter]">
                    <div class="item-image">[image]</div>
                    <div class="cat-item-name">[name]</div>  
                </div><!-- .item  -->';
            output_column_end='';
            output_row_end='</div>';
            output_end='';      
     
    </div>

<div class="products-container">    
        data='products';  id='category-products';      
        location='auto';
        cols='3';
        rows='100';
        page_navigation='auto';
        orderby='price ASC, name';
        editbuttons='YES';
        counterreset='3';
        image_ratio='150';
        image_width='auto';
        image_height='auto';
        font_formatting='NO';
        output_start='<div class="products">';
        output_row_start='<div class="row cf">';
        output_column_start='';
        output_item='
            <div class="item i-[counter]">
                <div class="item-image">[image]</div>
                <div class="item-name">[name]</div>
                <div class="item-price">[price]</div>
                <div class="short-description">[shortdescription]</div> 
            </div><!-- .item  -->';
        output_column_end='';
        output_row_end='</div>';
        output_end='</div><!-- .products.lh -->';      
</div>
2

I’m afraid that the above code does not help. It seems to my that it is used by a JavaScript plugin to build your gallery and it is useless on it’s own. You will have to make a JSFiddle or something.

1 Like
3

Ah,

I am editing a ecommerce template - so maybe its the way it is formatted.

I have four sections I can edit;

  • Main Theme
  • Home Page
  • Category Page
  • Product Page

and mostly it uses tags to output the products onto the pages.

I haven’t seen any javascript in these sections, but thats not to say there isn’t any back end stuff that I am not able to edit.

4

Sounds like a CSS issue, but we need to see a working demo. You could extract the relevant code and put it up somewhere—as suggested—such as on CodePen. Or just provide a link.

5

I’m using a test version that isn’t live, I’ve also attempted to put it in a codeine, but it comes out a jumble probably because of the way it integrates with the ecommerce system.

Here are links anyways - not sure which one works so have them all :sweat:

6

AS you can see, anonymous codepen can’t be viewed :slight_smile:

7

Spotted - just sorting it now

1 Like
8

You need to grab the generated HTML, not the raw CMS code.

9

I’m not a fan of signing up to things…
try this one:

10

Or of reading posts. :stuck_out_tongue: See my previous post.

11

I’m sorry, but I’m not sure what you mean

You need to grab the generated HTML, not the raw CMS code.

Are you talking about the generated HTML for the jsfiddle thing? Or where i’m getting my code from through my ecommerce template?

12

He’s asking for the origina HTML and CSS. What we see there is the rendered HTMl and CSS and maybe it is enough but it would be great to have the source.

1 Like
13

Is it because each section has it’s own HTML & CSS inside, rather than a master HTML and Master CSS file?
This is in the entire code within the category section:

   <style type="text/css">
    /*categories+prods*/
    .categories-container, .products-container, #categories-header {float:left; clear:both; width:100%;}
    #categories-header {margin-top:0px; padding:0; width:980px;}
    
    /*categories+prods*/
    .categories-container, .products-container, #specials-header, #categories-header {float:left; clear:both;}
    .products-container {margin-bottom:3px;}
    .item {float: left; margin-left: 0px; margin-right: 0px; text-align: center; width: 188px; margin-bottom:0px;}
    .item-image {margin-bottom:10px; background:#fff; padding: 6px 0;position:relative;}
    .item-image img {display:block; margin:auto;}
    .cover{
        background: none repeat scroll 0 0 #FFFFFF;
        height: 40px;
        left: 143px;
        position: absolute;
        top: 121px;
        width: 29px;
        border-radius: 14px; 
        -moz-border-radius: 14px; 
        -webkit-border-radius: 14px; 
    
    
    }
    .item-image:hover {box-shadow: 0px 0px 10px #EEEEEE; cursor:pointer; -moz-transition: all 0.2s ease-in-out 0s;}
    .item-name, .cat-item-name {
        float: left;
        font-weight: bold;
        text-align: center;
        width: 189px;
    }
    .cat-item-name {width:100%; margin-bottom: 20px;}
    .item-name a, .cat-item-name a {text-decoration:none;}
    .item-price {font-family: 'Vidaloka', Times New Roman, serif; width:100%; float:right; text-align:center; font-size: 30px; font-weight:bold; color:#333;}
    .row {clear:both; margin: 10px 0;}
    
    #location {
        float: left;
        margin: 10px 6px;
        width: 71%;
    }
    h1#category-name {
        border-bottom: 1px dotted #CCCCCC;
        color: #333333;
        display: block;
        float: left;
        font-family: "century gothic";
        font-size: 19px;
        font-weight: normal;
        letter-spacing: -1px;
        margin: 2px 5px;
        text-transform: uppercase;
        width: 98%;
    }
    #in-category-description {clear:both;}
    
    </style>
    <div id="location">[ekm:location][/ekm:location]</div>
    <h1 id="category-name">[ekm:categorypagename]categorypageid='[ekm:categoryid][/ekm:categoryid]';[/ekm:categorypagename]</h1>
    <div id="in-category-description">[ekm:incategorydescription][/ekm:incategorydescription]</div>  
    
    <div class="categories-container">
        [ekm:showdata]          
            data='categories';
            location='auto';
            cols='3';
            rows='100';
            page_navigation='auto';
            orderby='orderlocation, name';
            editbuttons='YES';
            counterreset='3';
            image_ratio='200';
            image_width='auto';
            image_height='auto';
            font_formatting='NO';
            output_start='output_start='';
            output_row_start='<div class="row cf">';
            output_column_start='';
            output_item='
                <div class="item i-[counter]">
                    <div class="item-image">[image]</div>
                    <div class="cat-item-name">[name]</div>  
                </div><!-- .item  -->';
            output_column_end='';
            output_row_end='</div>';
            output_end='';      
        [/ekm:showdata]
    </div><!--.products container-->
    [ekm:sort_by]requestend_callback='doSameHeight';target_tag_id='category-products';[/ekm:sort_by]
    <div class="products-container">
        [ekm:showdata]          
            data='products';  id='category-products';      
            location='auto';
            cols='3';
            rows='100';
            page_navigation='auto';
            orderby='price ASC, name';
            editbuttons='YES';
            counterreset='3';
            image_ratio='150';
            image_width='auto';
            image_height='auto';
            font_formatting='NO';
            output_start='<div class="products">';
            output_row_start='<div class="row cf">';
            output_column_start='';
            output_item='
                <div class="item i-[counter]">
                    <div class="item-image">[image]</div>
                    <div class="item-name">[name]</div>
                    <div class="item-price">[price]</div>
                    <div class="short-description">[shortdescription]</div> 
                </div><!-- .item  -->';
            output_column_end='';
            output_row_end='</div>';
            output_end='</div><!-- .products.lh -->';      
        [/ekm:showdata]  
    </div><!--.products container-->
14

I tried changing .item-image {margin-bottom:10px; background:#fff; padding: 6px 0;position:relative;}

to padding: 0px;

which puts it to the edge on the top and bottom but not on the left and right edges?

Is the size of the outputted images not square? I’m not sure what the specifications are from this.

image_width='auto';
image_height='auto';

does this mean that it automatically scales my images - which if they are not square causes the issue?

Edit: I uploaded an image I knew for definite was square and it still sizes it strangely with gaps on the left and right sides…

15

We still need to see a working demo. If you can create a working page, starts with doctype, ends with </html>, we can work with that. You can probably substitute your images with placeholders. Example: http://placehold.it/200x200

16

For gaps coming on left & right sides, please do cross check if images themselves contains a blank space. Sometimes designers put blank space on either side of image to make the object center aligned.

17

We still need to see a working demo. If you can create a working page, starts with doctype, ends with , we can work with that. You can probably substitute your images with placeholders.

I don’t think a working demo is possible unfortunately, thats just because of the web based software that is used, even when trying to sub in placeholder images

For gaps coming on left & right sides, please do cross check if images themselves contains a blank space. Sometimes designers put blank space on either side of image to make the object center aligned.

I’ve double checked the images, and there isn’t any white space - I’ve even made sure they’re square too.

18

What browser are you using? Are you familiar with the developer’s tools in that browser? If not, it would probably be very easy to find the source of the problem if you would take a few minutes (less than an hour) to become accustomed to your dev tools.

I use Firefox browser and the Firebug plugin for most of my troubleshooting. By hovering over a tag, one can see the padding and margin around it in distinct colors. The CSS is shown in a separate section and can be changed temporarily to test possibilities.

Teaching yourself how to use a dev tool would be faster and more productive than asking us to guess about possible causes without us being able to see the bigger picture.

My 2 bits.

19

I have attempted to have a look around the developer software and have update the JSFiddle - It is hard to put code for the whole thing, so I have attempted to take the relevant information out, but let me know if that isn’t enough:

I have added images from the inspector as well, because I can’t fully get a working page like it appears because this is within a ‘test shop’ so I cannot get a live preview. Hopefully that might give more insight.



Thanks for everyones patience :blush:

20

Hi, this is a longshot. I’m only guessing, but if you change the image_ratio=‘200’ in the categories-container class, shouldn’t it also be changed to 200 in the products-container class? Probably the image resizing is somehow linked and if you change one class parameters maybe it is necessary to also change the other.