Iteration 02: Layout of the page.

The next step is to make a decision about the layout. Off course I have discussed several concepts and skethces with my client by now, so in reality I am not playing entirely fair. I already know what my site will look like, with some undefined details.

But we already defined the layout of the site, which dictates the CSS concepts. It is a two column layout, with the tools on the right and the main area on the right. A masthead containing the branding and navigation and a footer over the whole width of the bottom.

Layout

I used inkcape, with my browser template, to design the site layout, and also the actual design of the site. But I will get back in some future post, on that layout.

Layout

HTML Changes

In order to make the CSS as clean and nice as possible, I need to fiddle a little with the original framework. Most notably are some additional classes, moving one of the navigation lists out of the navigation wrapper and into the #siteinfo Another important change is the wrapper around some content and nav panes called #tools. Tools are what people often call sideblocks.

CSS concepts

I am not a big fan of floats and strange margins to make a layout. There are literally millions of layout-concepts using CSS tricks and hacks, but in essence the most simple is the one using some absolute positioning. Because I know that my masthead (#identity) will have a fixed height, it is safe to use some absolute positioning. I therefore use a rather old method called “Holy grail”. For other examples, I advice a great page called Layoutgala. Floats, as used in these layoutgala examples, have one downsite in Drupal: Administration does not play nice with this. Most of the time you will see your layout falling apart completely in admin areas.

The result

After some tweaking and fiddling I have a basic HTML page that presents my layout. It has not been tested on any other browser then konqueror yet, but the code is so simple that any glitches should not be hard to fix.

View the page.

And the source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script type="text/javascript" src="ftod.js"></script>
  <script type="text/javascript">
  window.onload=function(){
      AddFillerLink("ftod1","ftod2","ftod3","content-news","content-blog");
      }
  </script>
  <style type="text/css">
    * {
      outline: 1px dotted grey !important;
    }
    html div *:hover {
      outline: 1px solid #004D99 !important;
      background-color: #E0E0E0;
    }

    /** layout **/
    body {
      margin:0;
      padding:0;
    }
    #branding {
      height:150px;
    }
    #branding-name {
      position:absolute;
      top:22px;
      right:0;
      font-size:22px;
    }
    #branding-tagline {
      position:absolute;
      top: 58px;
      right:0;
    }
    #search {
      position:absolute;
      top: 4px;
      right:0;
    }
    #tools {
      position:absolute;
      right:0;
      top:150px;
      width:210px;
    }
    #content-main {
      margin-right:210px;
    }
    #siteinfo {
      clear:both;
    }
    #nav-main {
      position:absolute;
      top: 91px;
      left: 0px;
      width:100%;
    }
    #nav-section {
      position:absolute;
      top: 120px;
      left: 0px;
      width:100%;
    }
    .horizontal-list li {
      display:inline;
      list-style-type:none;
    }
  </style>
</head>
<body>
<div id="container">
  <div id="branding">
    <img src="logo.png" width="91" height="91" id="branding-logo"/>
    <h1 id="branding-name">#branding-name</h1>
    <span id="branding-tagline">#branding-tagline</span>
  </div>

  <div id="content">
    <div id="content-main">
      <div class="content article">
        <h2 class="content article title">Title article 1</h2>
        <p class="content article body" id="ftod1">
        </p>
      </div>
      <div class="content article">
        <h2 class="content article title">Titlearticle 2</h2>
        <p class="content article body" id="ftod2">
        </p>
      </div>
      <div class="content article">
        <h2 class="content article title">Title article 3</h2>
        <p class="content article body" id="ftod3">
        </p>
      </div>
    </div>
  </div>

  <div id="navigation">
    <ul id="nav-main" class="horizontal-list">
      <li>nav 1</li>
      <li>nav 2</li>
      <li>nav 3</li>
    </ul>
    <ul id="nav-section" class="horizontal-list">
      <li>subnav 1</li>
      <li>subnav 2</li>
      <li>subnav 3</li>
    </ul>
  </div>
  <div id="tools">
    <ul id="nav-admin" class="relatedcontent">
      <li>subnav 1</li>
      <li>subnav 2</li>
      <li>subnav 3</li>
    </ul>
    <div id="content-news" class="relatedcontent">
      list with newsentries<br />
    </div>
    <div id="content-blog" class="relatedcontent">
      list with blogentries<br />
    </div>
  </div>

  <div id="search">
    <form id="search-input"><input type="text"/><input type="submit" /></form>
    <dl id="search-output">
    </dl>
  </div>

  <div id="siteinfo">
    <ul id="nav-siteinfo" class="horizontal-list">
      <li>siteinfonav 1</li>
      <li>siteinfonav 2</li>
      <li>siteinfonav 3</li>
    </ul>
    <p id="siteinfo-legal">© 2006 Bèr Kessels</p>
    <p id="siteinfo-credits"><a href="http://webschuur.com">carpentered in webschuur.com</a>  <a href="http://web-graphics.com/mtarchive/001667.php">Filler text on demand</a></p>
  </div>

</div>
</body>
</html>

About the author: Bèr Kessels is an experienced webdeveloper with a great passion for technology and Open Source. A golden combination to implement that technology in a good and efficient way. Follow @berkes on Mastodon. Or read more about Bèr.