Well, basically you are float-ing the image to the left. This has several effects.
The main one is that it makes the text wrap around the image, which is why you see longer comments dropping to the left. It’s wrapping around the image. The reason the text is so close to the image is that you didn’t specify that the image should have any sort of margins.
You can fix both of these with a combination of a margin and a wrapper div.
Basically, you’ll have to do something like this:
<div class="dontwrap">
<img class="gravimage" code goes here, with no style stuff>
<div class="comment">
<rest of comment stuff goes here>
</div>
</div>
This will put each comment into it’s own div. Then you’ll want to add this to your CSS:
.dontwrap img.gravimage {
float:left;
margin:5px
}
.dontwrap div.comment {
margin-left:70px
}
Or something really similar to that. The idea is to make the image float left with a nice margin, but then have the rest of the text have a good left margin so as not to wrap the floated image.
I’ve been trying every position I could, but it won’t go in the right place: neatly next to the text. http://www.bruddstyker.nl/?p=333#comments
It is getting there, so I’m hoping you’ll be able to help in the final step too. 🙂 I’m very grateful for your help.
<?php if ($comments) : ?>
<h2><?php comments_number(‘reageer’,’één reactie’,’% reacties’ );?></h2>
<ol class=”commentlist”>
<?php foreach ($comments as $comment) : ?>
<div class=”dontwrap”>
<img class=”gravimage” <img src=”<?php gravatar(“R”, 50, “http://www.bruddstyker.nl/images/hobbit.jpg”, “FF0000”); ?>”/>
<div class=”comment”>
“><?php comment_author_link() ?> schreef:
<small class=”commentmetadata”>” title=””><?php comment_date(‘j F Y’) ?> om <?php comment_time(‘H:i’) ?> </small>
<?php comment_text() ?>
<?php /* Changes every other comment to a different class */
if(“graybox” == $oddcomment) {$oddcomment=””;}
else { $oddcomment=”graybox”; }
?>
</div>
</div>
<?php endforeach; /* end for each comment */ ?>
With this code it will not work:
<img class="gravimage" <img src="<?php gravatar("R", 50, "http://www.bruddstyker.nl/images/hobbit.jpg", "FF0000"); ?>"/>
You started the img tag twice!
*turns red* you’re right!
But what should I remove in this line?
<img class=”gravimage” <img src=”<?php gravatar(“R”, 50, “http://www.bruddstyker.nl/images/hobbit.jpg”, “FF0000”); ?>”/>
Remove the second “<img” text.
No, this part:
<img
So it should look like:
<img class="gravimage" src="<?php gravatar("R", 50, "http://www.bruddstyker.nl/images/hobbit.jpg", "FF0000"); ?>"/>
That did the trick!!!! Thanks to you for helping me!
Some css trick maybe? Here I put my gravatar code on my comment page:
<div style="float:left; margin-right:5px; background:#eee url('<?php gravatar("R", 60, "http://www.aban.web.id/wp-images/gravatar.gif", "eee"); ?>')no-repeat; width:60px; height:60px;"><img src="http://www.aban.web.id/wp-content/themes/v40/images/grav.gif" alt="Gravatar Image" /></div>
with gif image as a border…
