Homepage

Hello. A problem has unexpectedly arisen. I'm creating a site using the Zen theme, and I've set a dark background, but I need a light background for the article on the homepage. I started looking at it with Firebug to see how to best approach it, but I unexpectedly encountered an issue where the article displayed on the homepage overlaps with the previous block. In the code, for some reason, these blocks appear to be within the article body... it's terrible. 

Here is the page code:

 

<div id="page">

 

  <header id="header" role="banner">

 

    <?php if ($logo): ?>

      <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /></a>

    <?php endif; ?>

 

    <?php if ($site_name || $site_slogan): ?>

      <hgroup id="name-and-slogan">

        <?php if ($site_name): ?>

          <h1 id="site-name">

            <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>

          </h1>

        <?php endif; ?>

 

        <?php if ($site_slogan): ?>

          <h2 id="site-slogan"><?php print $site_slogan; ?></h2>

        <?php endif; ?>

      </hgroup><!-- /#name-and-slogan -->

    <?php endif; ?>

 

   

 

    <?php print render($page['header']); ?>

 

  </header>

 

<div id="main">

 

<div class="content-wrapper">

<div id="content" class="column" role="main">

 <?php print render($page['highlighted']); ?>

 <?php print $breadcrumb; ?>

 <a id="main-content"></a>

 

 <?php print $messages; ?>

 <?php print render($tabs); ?>

 <?php print render($page['help']); ?>

 <?php if ($action_links): ?>

<ul class="action-links"><?php print render($action_links); ?></ul>

 <?php endif; ?>

 <?php print render($page['content']); ?>

 <?php print $feed_icons; ?>

</div><!-- /#content -->

 

<div id="navigation">

 

 <?php if ($main_menu): ?>

<nav id="main-menu" role="navigation">

 <?php

 // This code snippet is hard to modify. We recommend turning off the

 // "Main menu" on your sub-theme's settings form, deleting this PHP

 // code block, and, instead, using the "Menu block" module.

 // @see http://drupal.org/project/menu_block

 print theme('links__system_main_menu', array(

'links' => $main_menu,

'attributes' => array(

 'class' => array('links', 'inline', 'clearfix'),

),

'heading' => array(

 'text' => t('Main menu'),

 'level' => 'h2',

 'class' => array('element-invisible'),

),

 )); ?>

</nav>

 <?php endif; ?>

 

 <?php print render($page['navigation']); ?>

 

</div><!-- /#navigation -->

 

<?php

 // Render the sidebars to see if there's anything in them.

 $sidebar_first  = render($page['sidebar_first']);

 $sidebar_second = render($page['sidebar_second']);

?>

 

<?php if ($sidebar_first || $sidebar_second): ?>

 <aside class="sidebars">

<?php print $sidebar_first; ?>

<?php print $sidebar_second; ?>

 </aside><!-- /.sidebars -->

<?php endif; ?>

</div>

  </div><!-- /#main -->

 

  <?php print render($page['footer']); ?>

 

</div><!-- /#page -->

 

<?php print render($page['bottom']); ?>