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

Gabriel R.’s picture

Gabriel R. commented

This sort of works, but it adds an unwanted horizontal scroll bar:

#header {
	padding: 0 1000px;
	margin: 0 -1000px;
}

If only `overflow-x` would work :-s

Anonymous’s picture

Anonymous (not verified) commented

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 ;)

Gabriel R.’s picture

Gabriel R. commented

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.

Anonymous’s picture

Anonymous (not verified) commented
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);
}

Gabriel R.’s picture

Gabriel R. commented

Thanks. That makes sense.

I ended up just adding a BG image on the body instead of #header :-)

Anonymous’s picture

Anonymous (not verified) commented
Status: Needs review » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.