I have a page that was designed in photoshop a bid wider than 960px. I read some articles about modifying the grids and found it easy to follow, however, I'm not clear on how to handle 'outside margins'. The page I'm working on is here:

http://rosetta.abyteshosting.com/

I think my 'live' content _would_ fit in the standard 960 grid (or even a 940 grid), but I'm not sure how to deal with the gaps on each side. I need the 1030 width on the 'main' div so that I can have the background that includes my page boundary and the dropshadow etc. This is obviously not useable space, but it's unclear of where to set up a margin to accomodate.

I tried one of the online generators:

http://gridr.atomeye.com/

which lets you explicitly set an 'outside margin' but it doesn't look like fusion supports that. If I design a grid with a uniform gutter, than some of my grid will always need to be 'unoccupied'.

I tried to set the margins on main-inner, and that works, somewhat, but then I need to tweak all the widths.

Any recommendations?

Comments

jeremycaldwell’s picture

jeremycaldwell commented
Status: Active » Fixed

It gets a bit tricky when you try to load some extra divs outside the main 960px grid but it can be done. What I've done in the past to get outside borders with gradients like your example site is to wrap the entire page inner div with an "inner" and "inner-inner" div. What I mean by that is just inside the "page" ID you have two wrapping divs that add the extra padding to the site for the outside border/background image area.

So the beginning of your page.tpl.php markup will look like this:

<body id="<?php print $body_id; ?>" class="<?php print $body_classes; ?>">
  <div id="page" class="page">
    <div id="page-inner" class="page-inner row <?php print $grid_width; ?>">
      <div id="page-inner-inner" class="page-inner-inner row <?php print $grid_width; ?>">
        <div id="page-top"></div><!-- /page-top -->
        <div id="skip">
          <a href="#main-content-area"><?php print t('Skip to Main Content Area'); ?></a>
        </div>

And then of course you close the "page" and "page-inner" and "page-inner-inner" divs at the bottom of your page.tpl.php. Then write some CSS that accommodates for these changes and doesn't break the grid like so:

.page-inner {
  background: url(../images/page-gradient.png) repeat-y 0 0;
  border: 0;
  margin-bottom: 0;
  padding: 0 14px;
}

#page-inner-inner {
  background: url(../images/page-gradient.png) repeat-y 100% 0;
  padding-right: 14px;
}

For that I am loading some images for the left and right paddings on the page ID inner divs. So this adds a bit of padding outside of the grid and keeps the grid in place.

Hope that helps!

Status: Fixed » Closed (fixed)

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

arisaves’s picture

arisaves commented

What if I wanted to do the same thing to the content area only? Without including the header top/other page regions?

aquariumtap’s picture

aquariumtap commented

@arisaves, I don't quite understand your question. What do you want to do in the content area?

arisaves’s picture

arisaves commented

My header top region is set to stretch across the entire browser window, I've made it into a custom toolbar.

I want to wrap a graphic around the [960px] content in the middle, without cutting off the sides of the header-top region.

arisaves’s picture

arisaves commented

i managed to accomplish what i wanted -- sort of -- by using this in my page.tpl file:

<div id="main" class="main">
    <div id="main-inner" class="main-inner row <?php print $grid_width; ?>">
      <div id="main-inner-inner" class="main-inner-inner row <?php print $grid_width; ?>">

and this in my css file:

.main-inner {
  background: url(myimage/l_side.jpg) repeat-y 0 0;
  border: 0;
  margin-bottom: 0;
  padding: 0 180px;
}

#main-inner-inner {
  background: url(myimage/r_side.jpg) repeat-y 100% 0;
  padding-right: 180px;
}

but this method is messy & prevents my 960px content area from being properly centered when the browser window is resized.

arisaves’s picture

arisaves commented

Or, to better phrase it, I basically want to place an image to the left of my grid, an image to the right of my grid, and then wrap a border around the whole thing [left image, grid, and right image]

arisaves’s picture

arisaves commented
Status: Closed (fixed) » Active

I describe my situation in more detail here, and provide a diagram. http://drupal.org/node/1211078

Poieo’s picture

Poieo commented
Issue summary: View changes
Status: Active » Closed (won't fix)

Closing as won't fix since the D6 version is not getting any new development.