[Web4lib] CSS Margins

Tue May 29 16:38:40 EDT 2007

On 5/29/2007 4:30 PM, Bill Teschek wrote:

> This will be applied to every page of our website (home page: 
> http://www.hampton.lib.nh.us/). I want the toolbars at the top (which are put 
> there with the server side include of a .txt file) to spread the entire width 
> of the page, while the rest of the page has indented margins. Right now the SSI 
> link is inside the <body> tags, and moving them outside doesn't seem to make a 
> difference. I'm looking for a solution that won't require a major adjustment to 
> the entire website, if possible.  My knowledge of CSS is very rudimentary.
> 

You cannot include page content outside the <body> element in valid
markup, so leave it where it is.  Let me suggest two ways to think about
this:

  body {
    margin-left: 2em;
  }

  div.outdent {
    /* I personally don't care for text that's really
       up against the window chrome, so let's say... */
    margin-left: -1.5em;
  }

OR, if you want to add the necessary structure to your pages:

  body {
    margin-left: .5em;
  }
  #toolbar {
    margin-left: 0;
  }
  #main-content {
    margin-left: 1.5em;
  }

  /* And maybe consider this? */
  @media print {
    #toolbar {
      display: none;
      height: 0;
    }
  }

And then...

  <body>
    <div id="toolbar">[The toolbar via SSI]</div>
    <div id="main-content">[The actual page content]</div>
  </body>

-- 
Thomas Dowling
tdowling at ohiolink.edu