1. Technology
You can opt-out at any time. Please refer to our privacy policy for contact information.

Using Yahoo! UI to Give Your Blog That "Blog Look"

By

5 of 10

Breaking it up Further

Pages normally have a header, content and a footer. They also tend to have a navigation bar on the left or right, though this is optional. Since you don't yet have anything to put in the nav bar yet, we'll leave that out for this iteration.

To further break up your page, you can add the following divs inside of your doc div. The header (div id of hd) will contain the title of the site, either as a graphic or an H1 tag. The body (div id of bd) will contain the content of the site. The footer (div id of ft) will display copyright information, along with any messages you wish to display.

Once you've broken up your doc div and added a header and footer, your layout file should look something like this.

<div id="doc">
<div id="hd">
<h1>Awesome Blog</h1>
</div>

<div id="bd">
<p class="flash"><%= flash[:notice] %></p>
<%= yield %>
</div>

<div id="ft">
<small>Copyright 2008</small>
</div>
</div>

Though at this point your blog is still not quite there, you can see things starting to shape up. It's important to note that even though you don't have a navigation bar on the left or right, the page is all ready to receive one. If you break the bd tag up, the header and footer will both automatically span the navigation bar horizontally, while the bd div remains split.

  1. About.com
  2. Technology
  3. Ruby
  4. Ruby on Rails
  5. Breaking it up Further

©2014 About.com. All rights reserved.