Layout changes I need help with

Hi there.



I've been on here a few times about this parts fiche we are building on my website here at work.



I have run into another small issue.



What we have done is created a parts fiche. Basically we have pages with one image, and a parts list underneath that image.



Example: http://www.harpermoto.com/parts-by-motorcycle/2000-up-moto-guzzi-motorcycles/1200-sport-8v-1200-2008/taillight-en-2-3-4-5-6-7-8-9-10-11-12-13-14-15-16-17-18-19-20-21-22-23-24-25-26-27-28-29-30-31-32-33-34-35-36-37-38-39-40.html



The small Issue I am having(and you can see it in that web link)



Is our images are over lapping the center block.

And of coarse this doesn't look good. I used firebug to try to locate were I can change this.

I found the block to be 700px. I determined with firebug that 850px would do the job of extended that white space to include the whole image.



Only problem I'm having with this is that when i even add 1px to that number, it moves the whole block down to the bottom of the page. I'm thinking there is a margin somewhere in the code I need to change to allow that center block to be extended.



Anyone know where and what this might be?



I have attached a couple of pictures.



Block1.jpg is before I changed the PX count.

Block2.jpg is after I changed the px to 850 and moved it to the bottom of the page.

Block2.jpg

Block1.jpg

There's more than one CSS class you need to change. The default skin central container is only 920px. Your sidebox is 220px.

[quote name='StellarBytes' timestamp='1362856834' post='157351']

There's more than one CSS class you need to change. The default skin central container is only 920px. Your sidebox is 220px.

[/quote]



So do I need to make the default skin central container bigger and the sidebox smaller?

I'd reduce the image size to 675px width, that way it fits in nicely without breaking other layouts.

Hang on, Looking at something. Get back to you in a few

If I change the actual image sizes to 675px, well there would be over 4800 images to do that with.

And then some may be to small for customers to see.

Create a batch process in Photoshop and let it rip through all of those images using a batch to resize them. Shouldn't take much longer than an hour or two if you've got a half-decent CPU in your computer.



How are you adding these images in to your pages, via the HTML editor? If so, you could set an inline style width=“675” to the code and then link it via a pop-up, to see what I mean, see a site I've just re-launched on V3 here. Click the fabrics link, then you'll see you can click the image to get the full-size image in a gallery effect.



Very simple to do, these are default classes from the Basic skin so should work in almost all instances:



Alternative Text


Increase the 'rel' counter value for each gallery and the 'rev' for each image in that gallery. You'll notice on the site I linked to above, there are 3 image galleries - one gallery for all Grade A, B and C's.

[quote name=‘StellarBytes’ timestamp=‘1363017386’ post=‘157463’]

Create a batch process in Photoshop and let it rip through all of those images using a batch to resize them. Shouldn’t take much longer than an hour or two if you’ve got a half-decent CPU in your computer.



How are you adding these images in to your pages, via the HTML editor? If so, you could set an inline style width=“675” to the code and then link it via a pop-up, to see what I mean, see a site I’ve just re-launched on V3 here. Click the fabrics link, then you’ll see you can click the image to get the full-size image in a gallery effect.



Very simple to do, these are default classes from the Basic skin so should work in almost all instances:


<br />
<a class="cm-image-previewer cm-previewer" title="This is the image caption" rel="1" rev="1" href="/images/your-image.jpg"><img title="Image Title" src="/images/your-image.jpg" border="0" alt="Alternative Text" width="675" /></a><br />

```<br />
Increase the 'rel' counter value for each gallery and the 'rev' for each image in that gallery. You'll notice on the site I linked to above, there are 3 image galleries - one gallery for all Grade A, B and C's.<br />
[/quote]<br />
<br />
So basically I have a few options to do this.<br />
<br />
Option 1 is to change some css code like I just did. Actually got it to work for the most part.<br />
Changed the grid 12<br />
width 700px to 850px in the 960.css<br />
<br />
and also changed<br />
<br />
960.css<br />
.container_12,<br />
.container_16<br />
width 960px to 1200 px.<br />
<br />
All that is wrong now is the front page.<br />
This first link is of after product of changing css code for the categories.<br />
[url="http://www.harpermoto.com/parts-by-motorcycle/1990-2000-moto-guzzi-motorcycles/california-special-1100-1999-2000/generator-regulator-en-2-3-4-5.html"]http://www.harpermot...en-2-3-4-5.html[/url]<br />
<br />
This link is of home page. Something went wrong.<br />
www.harpermoto.com<br />
<br />
My 2nd options is to basically change all the image sizes. But even if I did change the image sizes (Over 4800) I would have to re upload all the images.<br />
<br />
I had a friend build a HTML code builder.<br />
The program took the CSV file and made it into a html code. The name of the CSV file was the same name as the image which were stored on the file manager of our host. It used this name and linked the image to the HTML code when uploaded into a category on the website.<br />
<br />
But even If I was to change all the image sizes, all the html code would have to be re uploaded.<br />
<br />
And I forgot to mention. The image is part of the HTML code, it isn't a picture uploaded to the category.<br />
Whole code is put into the HTML editor in the categories.<br />
<br />
Example below:<br />
<br />
<br />
```php
<br />
<div class="plcontent"><br />
<div class="plimage"><br />
<img src="upload://cO8q0193tSozCjThR7s0hQbzBV1.jpeg" alt=""><br />
</div><br />
<h2 class="plhead">Parts for Engine Current Generator</h2><br />
<table class="pltable"><br />
<tbody class="plbody"><br />
  <tr class="pltrth"><br />
   <th class="plth">Pos</th><br />
   <th class="plth">Part Number</th><br />
   <th class="plth">Description</th><br />
   <th class="plth">Variants</th><br />
  </tr><br />
<!-- partbeg --><br />
  <tr class="pltrtd"><br />
   <td class="pltdpos">1</td><br />
   <td class="pltdnum"><a href="https://www.harpermoto.com/01-generator.html">976678</a></td><br />
   <td class="pltddes">Generator</td><br />
   <td class="pltdvar">&nbsp;</td><br />
  </tr><br />
<!-- partend --><br />
<!-- partbeg --><br />
  <tr class="pltrtd"><br />
   <td class="pltdpos">2</td><br />
   <td class="pltdnum"><a href="https://www.harpermoto.com/42-spacer-8-5x17x13.html">91180823</a></td><br />
   <td class="pltddes">Spacer 8,5x17x13</td><br />
   <td class="pltdvar">&nbsp;</td><br />
  </tr><br />
<!-- partend --><br />
<!-- partbeg --><br />
  <tr class="pltrtd"><br />
   <td class="pltdpos">3</td><br />
   <td class="pltdnum"><a href="https://www.harpermoto.com/20-hex-socket-screw-m8x45.html">98620445</a></td><br />
   <td class="pltddes">Hex socket screw M8x45</td><br />
   <td class="pltdvar">&nbsp;</td><br />
  </tr><br />
<!-- partend --><br />
<!-- partbeg --><br />
  <tr class="pltrtd"><br />
   <td class="pltdpos">4</td><br />
   <td class="pltdnum"><a href="https://www.harpermoto.com/04-hex-socket-screw-m10x60.html">98620560</a></td><br />
   <td class="pltddes">Hex socket screw M10x60</td><br />
   <td class="pltdvar">&nbsp;</td><br />
  </tr><br />
<!-- partend --><br />
<!-- partbeg --><br />
  <tr class="pltrtd"><br />
   <td class="pltdpos">5</td><br />
   <td class="pltdnum"><a href="https://www.harpermoto.com/05-nut-m10x1-5.html">92660012</a></td><br />
   <td class="pltddes">Nut M10X1,5</td><br />
   <td class="pltdvar">&nbsp;</td><br />
  </tr><br />
<!-- partend --><br />
<!-- partbeg --><br />
  <tr class="pltrtd"><br />
   <td class="pltdpos">6</td><br />
   <td class="pltdnum"><a href="https://www.harpermoto.com/belt-05702530.html">05702530</a></td><br />
   <td class="pltddes">Belt</td><br />
   <td class="pltdvar">&nbsp;</td><br />
  </tr><br />
<!-- partend --><br />
<!-- partbeg --><br />
  <tr class="pltrtd"><br />
   <td class="pltdpos">7</td><br />
   <td class="pltdnum"><a href="https://www.harpermoto.com/07-generator-lever-pulley.html">05701430</a></td><br />
   <td class="pltddes">Generator lever pulley</td><br />
   <td class="pltdvar">&nbsp;</td><br />
  </tr><br />
<!-- partend --><br />
<!-- partbeg --><br />
  <tr class="pltrtd"><br />
   <td class="pltdpos">8</td><br />
   <td class="pltdnum"><a href="https://www.harpermoto.com/04-nut-m16.html">92606516</a></td><br />
   <td class="pltddes">Nut M16</td><br />
   <td class="pltdvar">&nbsp;</td><br />
  </tr><br />
<!-- partend --><br />
<!-- partbeg --><br />
  <tr class="pltrtd"><br />
   <td class="pltdpos">9</td><br />
   <td class="pltdnum"><a href="https://www.harpermoto.com/03-washer-16-25x24-5x5.html">30714201</a></td><br />
   <td class="pltddes">Washer 16,25x24,5x5</td><br />
   <td class="pltdvar">&nbsp;</td><br />
  </tr><br />
<!-- partend --><br />
<!-- partbeg --><br />
  <tr class="pltrtd"><br />
   <td class="pltdpos">10</td><br />
   <td class="pltdnum"><a href="https://www.harpermoto.com/10-flywheel-magneto-key.html">4FAN000030</a></td><br />
   <td class="pltddes">Flywheel magneto key</td><br />
   <td class="pltdvar">&nbsp;</td><br />
  </tr><br />
<!-- partend --><br />
<!-- partbeg --><br />
  <tr class="pltrtd"><br />
   <td class="pltdpos">11</td><br />
   <td class="pltdnum"><a href="https://www.harpermoto.com/11-hex-socket-screw-m8x50.html">98230850</a></td><br />
   <td class="pltddes">Hex socket screw M8x50</td><br />
   <td class="pltdvar">&nbsp;</td><br />
  </tr><br />
<!-- partend --><br />
<!-- partbeg --><br />
  <tr class="pltrtd"><br />
   <td class="pltdpos">12</td><br />
   <td class="pltdnum"><a href="https://www.harpermoto.com/12-nut-m8x1-25.html">92605408</a></td><br />
   <td class="pltddes">Nut M8x1,25</td><br />
   <td class="pltdvar">&nbsp;</td><br />
  </tr><br />
<!-- partend --><br />
</tbody><br />
</table><br />
</div><br />