[Effexion]

I am editing a template to turn it in to a site for my Jon Snow lookalike friend to use to promote himself. The images are different sizes and when I place them there's huge gaps and it looks ugly. Here is the original site so you can see what I mean (the cool image part with yellow hover mouseover):

http://didier-laureaux.fr/web/

PM me if you need to see my attempt. It's hosted on my cpa domain while I work on it.

[Rushax]

No need to do that, just follow what they've done in the template as they'll have made all the media queries for that.
Just make sure your images are 400x300.

For the amount of time editing each image in photoshop, you'll save yourself all the aggro.
If you can't for some reason, try to follow the 4:3 aspect ratio to keep dimensions equal.
AKA 800x600 etc.

[Effexion]

Thanks, guys. Still a little confused however. So, I basically just change the size in the HTML to 800x600?

[Rushax]

Not quite, the images you want to put in there should be 400x300.
If your images aren't 400x300 then try and find some thumbnails or images you can put in as placeholders to test.

[Nerdi]

The people above saying you have to use 400x300 pixel images are saying that because the example site uses images that size. However, you can use ANY dimensions you want as long as your 8 images have the same dimensions. Want to use 1000x800? That's fine, as long as the other 7 images are also 1000x800.

1) Get the pictures.
2) Make them all the same width & height.
3) Go to your CSS.

.snowContainer{
width:100%;
height:auto;
}

.snowPictures{
width:25%;
height: auto;
}

This will make sure that each image is 25% of the browser's width, which is what the example site does. It will stay this way no matter what the browser size is 🙂

The trick is using the container CSS.

So you would do:

<div class="snowContainer">
<a href="image1link.html"><img class="snowPictures" src="image1.png"></a><a href="image2link.html"><img class="snowPictures" src="image2.png"></a><a href="image3link.html"><img class="snowPictures" src="image3.png"></a><a href="image4link.html"><img class="snowPictures" src="image4.png"></a>
<br />
<a href="image5link.html"><img class="snowPictures" src="image5.png"></a><a href="image6link.html"><img class="snowPictures" src="image6.png"></a><a href="image7link.html"><img class="snowPictures" src="image7.png"></a><a href="image8link.html"><img class="snowPictures" src="image8.png"></a>
</div>

Using that HTML & CSS, each image would take up exactly the same height and be 1/4th of the total width 🙂

Obviously you would need to add in the CSS for the img class so that it has a hover effect (yellow with the + sign).

Good luck! 🙂