Hey Everyone,
So I started a testimonial page and found this customized the CSS around the photo's but I'm having a little trouble with it. First thing is in the second testimonial her head is getting cropped and then also in both of them the photo isn't being covered by the white border I created with CSS. I don't know enough about web design to figure this one out so I am coming here for anyone's help on this. Here is the link to the page it isn't live yet until I fix the problems and get my testimonials http://www.k-ophotography.com/Other/...4672246_R3N8b3

Originally Posted by ko04 Hey Everyone, So I started a testimonial page and found this customized the CSS around the photo's but I'm having a little trouble with it. First thing is in the second testimonial her head is getting cropped and then also in both of them the photo isn't being covered by the white border I created with CSS. I don't know enough about web design to figure this one out so I am coming here for anyone's help on this. Here is the link to the page it isn't live yet until I fix the problems and get my testimonials http://www.k-ophotography.com/Other/...4672246_R3N8b3

Try this, change the Th's to 200x200. This will make the longest side 200px and keep the ratio.
Or you are using square thumbs and would have to crop each thumb and slide the crop up.

  <img src="http://www.k-ophotography.com/Clients/Ravelle-Wellock/i-gjzWM84/4/200x200/IMG0542-200x200.jpg" height="150" width="150">
</div>     <!-- closes myPhoto div -->

  <img src="http://www.k-ophotography.com/Clients/Duckyrickman/i-vt8ppFD/0/200x200/KOPhotography4-200x200.jpg" height="150" width="150">
</div>     <!-- closes myPhoto div -->

I think keeping the original ratio looks best.

Originally Posted by ko04 Hey Everyone, So I started a testimonial page and found this customized the CSS around the photo's but I'm having a little trouble with it. First thing is in the second testimonial her head is getting cropped and then also in both of them the photo isn't being covered by the white border I created with CSS. I don't know enough about web design to figure this one out so I am coming here for anyone's help on this. Here is the link to the page it isn't live yet until I fix the problems and get my testimonials http://www.k-ophotography.com/Other/...4672246_R3N8b3

Try adding a height dimension to the rule:

.myPhoto{border: 5px solid;
    float:right;
    -moz-box-shadow:0 0 5px #333;
    -webkit-box-shadow:0 0 5px #333;
    box-shadow:0 0 5px #333;
    -moz-transform:rotate(-5deg);
    -o-transform:rotate(-5deg);
    -webkit-transform:rotate(-5deg);
    transform:rotate(-5deg);
    margin:0 20px 0 0;height:150px}

.myPhoto2{border: 5px solid;
    float:left;
    -moz-box-shadow:0 0 5px #333;
    -webkit-box-shadow:0 0 5px #333;
    box-shadow:0 0 5px #333;
    -moz-transform:rotate(-5deg);
    -o-transform:rotate(-5deg);
    -webkit-transform:rotate(-5deg);
    transform:rotate(-5deg);
    margin:0 20px 0 0;height:150px;}

And for the image getting cropped, your using the "thumbnail" link of the image....you might want to instead try a defined custom size like this:

111x175


Learn about custom sizes here


...or just crop an original copy of the image and link that...there's a cropping tool in the gallery tools menu

Thanks Guys for the response I will try both these things out and report back if any problems

Originally Posted by ko04 Thanks Guys for the response I will try both these things out and report back if any problems

Updated: Thanks again tried what both of you suggested it worked great. I think adding that height ratio in my CSS is something it needed because I needed to match it with the height of the photo itself. Thanks again!

That is amazing!!! Would you mind sharing the code for that?

Originally Posted by Kamico That is amazing!!! Would you mind sharing the code for that?

Ofcourse not thats what we are all here for right to help each other out my CSS Code is as follows

.myText h2 {
color: #CCC;
font: 26px Georgia, serif;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.25);
color: #CCC;
font: 26px Georgia, serif;}
.myPhoto{border: 5px solid;
float:right;
-moz-box-shadow:0 0 5px #333;
-webkit-box-shadow:0 0 5px #333;
box-shadow:0 0 5px #333;
-moz-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
transform:rotate(-5deg);
margin:0 20px 0 0; height:150px;}

.myPhoto2{border: 5px solid;
float:left;
-moz-box-shadow:0 0 5px #333;
-webkit-box-shadow:0 0 5px #333;
box-shadow:0 0 5px #333;
-moz-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
transform:rotate(-5deg);
margin:0 20px 0 0; height:150px;}

And my Html looks like this

<html>
<div class="myTitle">
</div> <!-- closes myTitle div -->
<div class="myPhoto">
<img src="http://www.k-ophotography.com/Clients/Ravelle-Wellock/i-gjzWM84/4/100x150/IMG0542-100x150.jpg" />
</div> <!-- closes myPhoto div -->
<div class="myText">
<h2>Ravelle Wellock</h2>
<p>"Keith is professional, friendly, polite, creative, and a pleasure to be around. I refer him to anyone I know who might be interested in hiring him. It is becoming more rare to find a photographer like him, and that makes Keith a valued treasure. Anyone who works with him will know, he puts his EVERYTHING into his work."</p>
</div> <!-- closes myText div -->
<div style="clear: both;"></div>
</html>

<html>
<div class="myTitle">
</div> <!-- closes myTitle div -->
<div class="myPhoto2">
<img src="http://www.k-ophotography.com/Clients/Duckyrickman/i-vt8ppFD/0/100x150/KOPhotography4-100x150.jpg" />
</div> <!-- closes myPhoto div -->
<div class="myText">
<h2> Ducky Rickman</h2>
<p> "A very fun laid back shoot with just the right amount of professionalism."</p>
</div> <!-- closes myText div -->
<div style="clear: both;"></div>
</html>

I found it to be a little easier to manage the CSS of each photo to make two sperate div class for each testimonial that way I can tweak the CSS to go left and right of each other. I am at all means not a web designer so there might be an easier way to do this but this is what worked for me.

Thank You! I am having a problem with getting the white border for the picture frames. also The text isnt coming out as cool as yours. Here is a link so you can take a look if you dont mind.

http://www.infinitephotographics.com...2521180_J48pbC

I didn't see any of this part in your code ".myText h2 {
color: #CCC;
font: 26px Georgia, serif;
text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.25);
color: #CCC;
font: 26px Georgia, serif;
}"

The main part I'm looking for is the text-shadow thats what making the depth that your probably liking. As for the white border if you try this but before you try it make sure you email a copy because I don't know code well enough to know if this will work so try this

#albumDescription .ReviewPhoto1{
color: white;}

Though I could be totally wrong on that and maybe someone can step in and help if I am. In my opinion I don't think you should be having a white border there unless your changing the background color of that box but just some food for thought. Anyways hope that helps post back and let me know