Erik's Engineering

something alliterative

Adding a Header/Menu bar

One of the easiest ways to make a website look more "real" is to add a quick header and footer to it. This also gives you a place to put common navigation elements. It seems like I've been doing this a lot lately, so I thought I'd post my recipe for a quick header.

First, if you've been using Rails scaffolds to create your models and controllers, you've probably got a directory full of separate layouts.

slim:demo edebill$ ls app/views/layouts/
fahrenheit_temps.html.erb	sources.html.erb
reports.html.erb
slim:demo edebill$ 

Assuming you haven't customized these any, the first thing to do is rename one of them to application.html.erb and delete the rest. You want a single layout for the application.

At this point, application.html.erb probably looks about like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title>Reports: <%= controller.action_name %></title>
  <%= stylesheet_link_tag 'scaffold' %>
</head>
<body>

<p style="color: green"><%= flash[:notice] %></p>

<%= yield %>

</body>
</html>

You should fix that title to be something more appropriate. While you're at it, add another stylesheet_link_tag pointing to a custom stylesheet for your app. Edit the existing scaffold.css to have the body with margins set to 0px;

Now... the easy layout. Replace the body of the page with the following. I'll walk you through each part and why it's there.

  <body>
    <div id="header">
      <div id="sitename">
        <%= link_to "DataLogger", root_url() %>
      </div>
      <div id="menu">
        <div class="menuitem">
  	  <%= link_to "Sources", :controller => "sources", :action => "index" %>
        </div>
        <div class="menuitem">
  	  <%= link_to "Reports", :controller => "report", :action => "index" %>
        </div>
      </div>
    </div>
    <div id="content" >
	<%= yield %>
    </div>
    <div id="footer">
      <div id="copyright">
	©<a href="http://erik.debill.org">Erik DeBill</a>, 2009-2010
      </div>
    </div>
  </body>

Notice there's a header div, with some other divs inside of it. This is the top nav area.

The style for that top nav looks like this:

#header {
    position: relative;
    padding: 10px;

    background-color: #e0f0ff;
    border-bottom: 1px black solid;
}

position: relative makes this div a container that holds other divs with positions relative to it.

padding: 10px; means that all the contents of the DIV will be at least 10 pixels from the edges. That gives them a little breathing room.

border-bottom: 1px black solid; puts a nice black line under the header to separate it from the page.

Next, comes the site name. It gets its own div and not one but two style entries:


#sitename {
    font-size: 20px;
    font-weight: bold;
}

#sitename a {
    text-decoration: none;
}

This just sets the font size and style and turns off underlining of links. It won't look like a logo if it's got an underline :)

The other nice bit is the menu in the upper right. It's just a collection of links, but I'm using CSS to position them.

There's an overall menu div that puts it in its place:

#menu {
    position: absolute;
    right: 0px;
    top: 0px;
}

Very simple. Just doing some positioning. Absolute seems to get this in the right place, but will override the padding settings from the header div, so I echo it in the top option. I'll rely on the menuitems to set the spacing to the right.

Within the menu are multiple menuitems. They're styled like so:

div.menuitem {
    float: right;
    padding: 10px;
//    border-left: 1px black solid;
}

This causes them to stack up right to left within the menu and puts 10 pixels worth of space around each one. Given my other choices (namely the size of the site name) this has them looking relatively centered within the header bar. If I uncomment the left border, they'll box themselves in and look kind of like tabs. This is why I use padding on the menuitem to get breathing room around them instead of using settings within the menu.

After all this complicated stuff, the content and footer blocks are pretty straightforward.


#content {
    position: relative;

    padding: 15px;
    padding-bottom: 30px;

    background-color: #f0f8ff;
}



#footer {
    position: relative;

    background-color: #e0f0ff;
    border-top: 1px black solid;
}

#copyright {
    float: right;

    padding-right: 15px;
    font-size: 8px;
}

Here I'm just making sure they're relative blocks that will capture things within them, adding some nice margins (having a larger bit of padding at the bottom of the content area will keep the footer from crowding things) and adding a separater line and contrasting colors for the footer. The footer is floated instead of absolute positioned in case I want to stack up some other items across the bottom.

I'm sure there are nicer ways to do this, but this seems to have a minimal number of moving parts and results in a simple, clean layout that helps give a little visual polish without too much effort.

Published on 27/02/2010 at 15h17 . Tags , ,

Comment Adding a Header/Menu bar

Trackbacks are disabled

Powered by Typo – Thème Frédéric de Villamil | Photo Glenn