Hello!
I am having trouble with displaying my user's avatar images on this theme. The css that I am sending for the "picture" class is as follows:
.picture {
float: right;
display: inline;
}Instead of wrapping the text around the image, as I was hoping would occur, the first paragraph wraps around the image while the second paragraph does not begin until after the image has displayed completely.
In hopes that a visual aid may assist, please see below for what is occurring:
First paragraph text. First paragraph text. First paragraph ||avatar graphic||
text. First paragraph text. First paragraph text. First ||avatar graphic||
paragraph text. ||avatar graphic||
||avatar graphic||
||avatar graphic||
Second paragraph text. Second paragraph text. Second paragraph text.
Second paragraph text. Second paragraph text. Second paragraph text. &c... Here is what I would like to have:
First paragraph text. First paragraph text. First paragraph ||avatar graphic||
text. First paragraph text. First paragraph text. First ||avatar graphic||
paragraph text. ||avatar graphic||
||avatar graphic||
Second paragraph text. Second paragraph text. Second ||avatar graphic||
paragraph text. Second paragraph text. Second paragraph text. Second
paragraph text. Second paragraph text. Second paragraph text. &c... Does anyone know how this might be accomplished?
Btw, I have included the contents of my node.tpl.php file below.
Thanks,
-Adam
<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?>">
<?php if ($page == 0): ?>
<h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>
<?php if ($submitted): ?>
<?php
print 'By ' . theme('username', $node) . ' | Published ' . format_date($node->created, 'custom', ' D, M d, Y h:m' . '<p>');
?>
<?php endif; ?>
<?php if ($picture): ?>
<?php print $picture ?>
<?php endif; ?>
<div class="content">
<?php print $content ?>
</div>
<div class="clear-block clear">
<div class="meta">
<?php if ($taxonomy): ?>
<div class="terms"><?php print $terms ?></div>
<?php endif;?>
</div>
<?php if ($links): ?>
<div class="links"><?php
print '';
print '';
$all_links = array();
foreach ($node->links as $link) {
$all_links[] = l($link['title'], $link['href'],
$link['attributes'], $link['query'],
$link['fragment'], FALSE, $link['html']) ;
}
if ( count($all_links) ) {
print implode(' | ', $all_links);
}
print '';
?></div>
<?php endif; ?>
</div>
</div>
Comments
Comment #1
adamcraig commentedI have found that it is not only the avatar graphic which causes this problem. It is all graphics rendered by the
<img>tag. I am not sure why this is happening, and I must admit to being a novice, at best, in regards to my knowledge of CSS.If it is some assistance, the following url shows a node the way I want graphics displayed on it (look towards the bottom of the node body): http://www.peacefulassembly.org/node/47 and this url shows the same node, with image tags in the same format as before, the way the multiflex theme is currently rendering it: http://develop.peacefulassembly.org/node/47
All help is both greatly needed and appreciated.
-Adam
Comment #2
adamcraig commentedI have solved the problem!
A friend of mine suggested that the problem rested with the "p" class and had nothing to do with CSS configurations for images. So, I disabled all the "p" classes in my CSS files, saw that the problem was resolved, and began to re-enable the tags.
The problem class read as follows:
I began to disable the tags one by one and found that the offending one was:
content:".";I don't know what its purpose was, but I left it working on the
.footer:afterclass and copied and pasted in a new class forp:afterwithout thecontent:".";tag. Problem solved!Comment #3
stloescher commentedA perfect solution. It delivered as promised. Perfect text wrap.
Comment #4
vm commentedchanging title back to something that describes the problem