Change layout

Where are we?

We have a design, and we’re all set to start changing it. Let’s begin with layout, since that’s often the hardest thing to get right.

This lesson’s goals

By the end of this lesson, you should:

  • Remember that layout is the hardest part of CSS.
  • Understand that you need to move slowly and carefully when making layout changes.
  • Know that sometimes it helps to change the names of page elements.

Here’s the site so far.

Switching columns

Giles wants us to move the sidebar from the left to the right:

Move sidebar

Figure 1. Move sidebar

Layout is the hardest part of CSS. It’s easy to mess up. When I make changes to layout, I’m very careful about it.

Here’s some code, from the HTML and CSS files:

<div id="main">
  <div id="right">
    ...				
  </div>
  <div id="left">		
    ...
  </div>
</div>
...
#left {
  width: 220px;
  margin-left: 20px;
}
#right {
  width: 510px;
  float: right;
  padding-right: 20px;
}

Figure 2. Some existing code

There are two divisions, left (lines 5 to 7) and right (lines 2 to 4). I want to move left to the right, and right to the left.

Renata
Renata

Argh! Left on the right and right on the left! That’s hurting my brain.

Kieran
Kieran

You’re right, er, correct. It’ll be easier to get the layout right if the names are less confusing.

Let’s do something about that.

Changing names

Here’s more of the code:

  <div id="content">
    <div id="header">    
      <div id="logo">
        ...
      </div>
    </div>
    <div id="main">
      <div id="right">
        ...				
      </div>
      <div id="left">		
        <h3>Nunc pellentesque</h3>
        ...
      </div>
    </div>
    <div id="footer">
      <p>Copyright © 2008...</p>
    </div>
  </div>

Figure 3. Part of the HTML

Let’s rename left, and call it sidebar. It will always be a sidebar, no matter which side it’s on.

Let’s rename right. I want to call it content. That makes sense to me, because that is what it contains, the main content of the page.

But there’s already a content (line 1). Hmm…

Renata
Renata

You could rename the content on line 1 to something else. After all, it’s not really just “content” anyway. It’s a container for a lot of different stuff.

Kieran
Kieran

Hey, I like it! Let’s do that.

So, I’ll rename content on line 1. I’ll call it, hmmm…, header-sidebar-content-footer-container. A long name, but it describes exactly what the container is.

Now I can rename right to content. Here’s what I end up with:

  <div id="header-sidebar-content-footer-container">
    <div id="header">    
      <div id="logo">
        ...
      </div>
    </div>
    <div id="main">
      <div id="content">
        ...				
      </div>
      <div id="sidebar">		
        <h3>Nunc pellentesque</h3>
        ...
      </div>
    </div>
    <div id="footer">
      <p>Copyright © 2008...</p>
    </div>
  </div>

Figure 4. Better names

NetBeans wins again

When you change the names in template.html, you have to change the names in styles.css as well.

NetBeans makes this easy. Open the HTML and CSS files. In the HTML, put your cursor in the name you want to change (e.g., left). Hit Control+R, for “rename.” Enter the new name, leaving the # (or . for class) where it is:

Renaming in NetBeans

Figure 5. Renaming in NetBeans

Click “Refactor,” and NetBeans should make the changes in the CSS for you as well. Check the CSS file to make sure.

This is yet another reason to use a smart editor like NetBeans. It’s easy to miss something when renaming yourself. Get NetBeans to do it, and it’s quick and correct.

A simple change

Baby steps Remember, layout is hard. Easy to mess up.

So, when I’m changing layouts, I take it one baby step at a time.

Here’s some code after the name changes.

<div id="main">
  <div id="content">
    ...				
  </div>
  <div id="sidebar">		
    ...
  </div>
</div>
...
#sidebar {
  width: 220px;
  margin-left: 20px;
}
#content {
  width: 510px;
  float: right;
  padding-right: 20px;
}

Figure 6. After name changes

I’ll make just a couple of small changes, and see how it looks:

<div id="main">
  <div id="content">
    ...				
  </div>
  <div id="sidebar">		
    ...
  </div>
</div>
...
#sidebar {
  float: right; /* Changed */
  width: 220px;
  margin-left: 20px;
}
#content {
  width: 510px;
  float: left; /* Changed */
  padding-right: 20px;
}

Figure 7. Changing floats

I added float: right; to the sidebar (line 11), and changed the content float from right to left (line 17). That’s all. Small steps.

Renata
Renata

That /* Changed */ thing. That’s not CSS. Won’t NetBeans mark it as an error?

Kieran
Kieran

No, /* Changed */ is valid CSS. It’s how you type in a comment. Comments are useful, reminding us what we’ve changed. It’s easy to lose track.

I recommend adding comments like this when you change designs.

Here’s the result:

Float changes

Figure 8. Float changes

Hey, not bad! They’re on the correct sides now.

But I need to add a little space:

Need space

Figure 9. Need space

Put sidebar a little to the left, and content a little to the right.

Here’s code again:

<div id="main">
  <div id="content">
    ...				
  </div>
  <div id="sidebar">		
    ...
  </div>
</div>
...
#sidebar {
  float: right;
  width: 220px;
  margin-left: 20px;
}
#content {
  width: 510px;
  float: left;
  padding-right: 20px;
}

Figure 7 (again). Changing floats

Check out lines 13 and 18. What if I changed left to right in line 13, and right to left in line 18? We’d have:

<div id="main">
  <div id="content">
    ...				
  </div>
  <div id="sidebar">		
    ...
  </div>
</div>
...
#sidebar {
  float: right;
  width: 220px;
  margin-right: 20px;
}
#content {
  width: 510px;
  float: left;
  padding-left: 20px;
}

Figure 10. Switching the spacing

Here’s what we get:

The result

Figure 11. The result

W00fy w00fy w00f w00f w00f! Perfect!

CC
CC

Look at lines 13 and 18:

margin-right: 20px;
...
padding-left: 20px;

One uses margin and other one padding. Does that matter?

Kieran
Kieran

Not really. I don’t know why the designer did it that way. But it works, and I see no reason to change it.

margin and padding often do the same thing when there is no border. Not always, but often.

Here’s the site so far.

Exercise: Modify an OSWD design

Here is the Transparentia design from OSWD.

Original layout

Figure 1. Original layout

Download the design, and change it to switch the nav and content regions:

New layout

Figure 2. New layout

Hint: You can do it with just two small changes to the CSS.

Upload your solution to your server. Put your URL below.

(Log in to enter your solution to this exercise.)

Exercise: Blue Sin layout

Modify the Blue Sin design you’ve been working on. Remove the secondary menu, and move the right sidebar to the left.

Here’s what mine looks like:

New layout

Upload your solution to your server, and put the URL below.

(Log in to enter your solution to this exercise.)

Summary

  • Layout is hard. Go in baby steps.
  • Change the names of page elements if it helps you keep things straight.
CC
CC

Why “baby steps” and not “puppy steps?”

Kieran
Kieran

We wan’t to go slowly. Puppies move too fast. Have you seen those baby humans? They take a long time before they can move at all!

Renata
Renata

Humans are strange.

Kieran
Kieran

No argument there!

What now?

We’re doing well! Now for some font work.


How to...

Lessons

User login

Log in problems? Try here


Dogs