CSS Full-width header on fixed width Page [#336857]

I am trying to create a full-width header on a fixed-width page.

Question for the CSS experts out there: is there a trick, e.g. by using negative margins or something, to make the #header paggind stretch over on the sides the #page width?

Thanks.

Comments

Comment #2

Anonymous (not verified) CreditAttribution: Anonymous commented 20 November 2008 at 15:35

No, this is definitelly not the way to go :)

More simply, do not hesitate to edit the page template and take the header out of the #page. As everything that is inside the #page is restricted to a width, taking the header out of it (so making the #page start with the #main) is going to free the header from the #page restrictions.

so it would be like this :


<body class="<?php echo $body_classes; ?>">
  <div id="skip-nav"><a href="#content">Skip to Content</a></div>  

	<!-- ______________________ HEADER _______________________ -->
	
	<div id="header">
	  	<div id="logo-title">
			  <!-- Uncomment to activate search box <?php echo $search_box; ?> -->
	  	  <?php if ($logo): ?>
	  	    <a href="<?php echo $base_path; ?>" title="<?php echo t('Home'); ?>">
	  	      <img src="<?php echo $logo; ?>" alt="<?php echo t('Home'); ?>" id="logo" />
	  	    </a>
	  	  <?php endif; ?>

        <div id="name-and-slogan">
          <?php if (!empty($site_name)): ?>
            <h1 id="site-name">
              <a href="<?php echo $base_path; ?>" title="<?php echo t('Home'); ?>"><span><?php echo $site_name; ?></span></a>
            </h1>
          <?php endif; ?>

          <?php if (!empty($site_slogan)): ?>
            <div id="site-slogan"><?php echo $site_slogan; ?></div>
          <?php endif; ?>
        </div> <!-- /name-and-slogan -->

	  	</div> <!-- /logo-title -->
  	
  	
      <div id="navigation" class="menu <?php if (!empty($primary_links)) { echo "withprimary"; } if (!empty($secondary_links)) { echo " withsecondary"; } ?> ">
        <?php if (!empty($primary_links)): ?>
          <div id="primary" class="clear-block">
            <?php echo theme('links', $primary_links, array('class' => 'links primary-links')); ?>
          </div>
        <?php endif; ?>

        <?php if (!empty($secondary_links)): ?>
          <div id="secondary" class="clear-block">
            <?php echo theme('links', $secondary_links, array('class' => 'links secondary-links')); ?>
          </div>
        <?php endif; ?>
      </div> <!-- /navigation -->

	  		<?php if ($header): ?>
	  		  <div id="header-region">
	  		    <?php echo $header; ?>
	  		  </div>
	  		<?php endif; ?>
    	</div> <!-- /header -->

  <div id="page">
				
					<!-- ______________________ MAIN _______________________ -->

		    	<div id="main" class="clearfix">
			    	<div id="main-inner">

    ... (rest of the page) ...

As a general rule, make the markup the way you want before tricking the css, css rules shouldn't have be too complicated ;)

Comment #3

Gabriel R. CreditAttribution: Gabriel R. commented 20 November 2008 at 17:21

Yeah, that's what I'll end up doing, but I think I actually seen the CSS-only method work somewhere. Just can't remember where.

Comment #4

Anonymous (not verified) CreditAttribution: Anonymous commented 20 November 2008 at 17:55

Status:

Active

» Needs review

If you realy want to keep the header unchanged in page tpl, the other way around would be to position the header absolutely, to take it out of the page flow, and then move the page down to the size of the header, like this :

#header { layout.css (line 101)
position:absolute;
left:0;
top:0;
width:100%;
}
#page { main.css (line 12)
margin-top:(-> header height);
}