Help float custom blocks left
CompShack - January 15, 2008 - 07:05
Hi all,
I have created 2 custom blocks and having problems getting the blocks to float left after the article just before the comments. Here is what i have done so far.
In template.php i added mygarland_regions function and modified _phptemplate_variables to out put my regions:
<?php
function mygarland_regions() {
return array(
'sidebar_right' => t('right sidebar'),
'sidebar_left' => t('left sidebar'),
'content' => t('content'),
'header' => t('header'),
'footer' => t('footer'),
'below_article1' => t('below article1'),
'below_article2' => t('below article2'),
);
}
function _phptemplate_variables($hook, $vars) {
if ($hook == 'page') {
if ($secondary = menu_secondary_local_tasks()) {
$output = '<span class="clear"></span>';
$output .= "<ul class=\"tabs secondary\">\n". $secondary ."</ul>\n";
$vars['tabs2'] = $output;
}
// Hook into color.module
if (module_exists('color')) {
_color_page_alter($vars);
}
return $vars;
}
// Load the node region only if we're not in a teaser view.
if ($hook == 'node' && !$vars['teaser']){
// Load region content assigned via blocks.
foreach (array('below_article1', 'below_article2') as $region) {
$vars[$region] = theme('blocks', $region);
}
return $vars;
}
return array();
}
?>This is the default node.tpl.php except I added the floatleft div (look at the very bottom):
<?php phptemplate_comment_wrapper(NULL, $node->type); ?>
<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?>">
<?php print $picture ?>
<?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): ?>
<span class="submitted"><?php print t('!date — !username', array('!username' => theme('username', $node), '!date' => format_date($node->created))); ?></span>
<?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 $links; ?></div>
<?php endif; ?>
</div>
<div class="floatleft">
<?php if ($below_article1): print $below_article1; endif; ?>
<?php if ($below_article2): print $below_article2; endif; ?>
</div>
</div>My css looks like this:
.floatleft {
float:left
}This is not working, what i'm doing worng? - The page is just a mess. Can you please help? :(
I think ...
I think because you have your floatleft div within your .node div it's not going to sit to the left of the comments ... you could try putting the floatleft outside of the .node div - something like
<?php phptemplate_comment_wrapper(NULL, $node->type); ?>
<div id="node-<?php print $node->nid; ?>" class="node<?php if ($sticky) { print ' sticky'; } ?><?php if (!$status) { print ' node-unpublished'; } ?>">
<?php print $picture ?>
<?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): ?>
<span class="submitted"><?php print t('!date — !username', array('!username' => theme('username', $node), '!date' => format_date($node->created))); ?></span>
<?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 $links; ?></div>
<?php endif; ?>
</div>
</div>
<?php if ($below_article1 || $below_article2) : ?>
<div class="floatleft">
<?php if ($below_article1): print $below_article1; endif; ?>
<?php if ($below_article2): print $below_article2; endif; ?>
</div>
<?php endif;?>
I would also wrap the floatleft in a php conditional to check that you have at least one of the regions - that way you won't end up with an empty floatleft div kicking around (unless you want this of course - in which case just remove those bits!)
Mike,
Computerminds offer Drupal development, consulting and training
Sorry but it is not working
Sorry but it is not working - for some reason the comment section is also floating left!!
I have Who's New block assigned to below_article1 and Who's Online for below_article2 but as you can see from the screen shot below, it is just a mess.
http://www.compshack.com/img_uploaded/blocks.JPG
Please any help would be appreciated.
-----------------------------------------
Finally, I CMS that I Like!
http://www.CompShack.com
I just got done with a
I just got done with a project like this myself.
Don't bother with css classing-- its useful, but what you want is an inline modification. When you "table" divs, you effectively need a container, and then you need your divs.
This is what my code looks like:
<div style="width:100%;"><div style="width:49%;float:left;"><?php print $belowcontent1 ?></div>
<div style="width:49%;float:right;"><?php print $belowcontent2 ?></div>
</div>
This is placed right underneith the
$contentvariable, inside the main content div.So again in practice:
<div class="content_main"><?php print $content; ?>
<!-- continue with blocks here -->
<div style="width:100%;">
<div style="width:49%;float:left;"><?php print $belowcontent1 ?></div>
<div style="width:49%;float:right;"><?php print $belowcontent2 ?></div>
</div>
<!-- main content div ends here -->
</div>
Got it? Inline over classed works best for this application.
Try using clear block
I'm not sure if I understood correctly what the issue is.
If it is about having floats aside of comments instead of above, you could try
<?php if ($below_article1 || $below_article2) : ?><div class="clear-block clear">
<div class="floatleft">
<?php if ($below_article1): print $below_article1; endif; ?>
<?php if ($below_article2): print $below_article2; endif; ?>
</div>
</div>
<?php endif;?>
--
Lupein
Drupal themes - themeartists.com
Give Floats a Width
As a general rule, you should make sure you declare a width in your CSS when you start floating things around. Otherwise things get unpredictable.