This is the main page for Web Design: Lessons. Hover over the button below, and the menu for the Lessons pages will appear.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
If you missed the earlier lessons, you should start at the beginning.
Also, if you’re coming to this page from somewhere else, this is the second part of the layout lesson. You really should at least look at the previous part of this lesson before trying to work your way through this page. Otherwise, nothing will make sense.
As previously noted: I’m adapting this from the initial layout lesson provided by Ian Lloyd, with some input from WestCiv.
Two Steps Forward, One Step Back
So far we’ve produced a nice little page, nothing fancy, but with some little twists and fillips that we haven’t done before.
Now let’s do something terrible. Let’s upend everything.
Add this to the bottom of your CSS file:
#header, #sidebar, #maincontent {
position: absolute;
}
Here’s what it should look like.
Aiieee! We’ve wrecked it! Everything is slammed up to the left, on top of one another, a terrible mess.
Why did we do that? Because we need to absolutely position those elements so we can get this layout in order. Don’t worry, we’re about to fix the mess we’ve made.
Now we’re going to start moving elements around so they fit under one another. Add this to your #sidebar CSS rule:
top: 100px;
Do the same for the #maincontent CSS rule.
Here’s what it should look like.
We’re making some progress in moving elements around, but we haven’t repaired the damage yet.
Now we want to move the #maincontent element to the right, so it sits nicely beside the sidebar. We made the sidebar 220 pixels in width. Let’s move the maincontent 230 pixels to the right.
Add this to your #maincontent CSS rule:
left: 230px;
Here’s what it should look like.
Hey, this is starting to come together!
We couldn’t have done that without knocking everything askew with that absolute positioning command.
Now, let’s make everything stretch across the page instead of having it no wider than the text. Add this to the #header CSS rule:
width: 100%;
We’re through with needing the red borders any longer. Remember this?
#header, #brand, #tagline, #sidebar, #maincontent {
border: 1px solid red;
padding: 2px;
margin-bottom: 2px;
}
Delete the whole thing.
Here’s what it should look like.
Not there yet, are we? We need to play with some position values. The pink sidebar is a bit too high, and we could use some breathing room at the bottom of the header.
Delete the margin: 0 selector from your #brand CSS rule, and replace it with this:
margin-bottom: 10px;
Next, let’s move that #sidebar down a bit. Delete the top: 100px; selector and replace it with this:
top: 110px;
While we’re tidying up (and “pixel positioning”, as some designers call it), let’s move the #maincontent material down just a bit. Delete the top: 100px; selector and replace it with this:
top: 117px;
At least on my computer, this brings the top line of the main content area’s text precisely in line with the top of the Navigation Link header in the sidebar.
And just for looks, let’s add some borders to the sidebar.
Add this to your #sidebar CSS rule:
border-right: 1px solid #27408b; border-bottom: 1px solid #27408b;
Here’s what it should look like.
Sweet.
Are we through? Of course not. We need to do something about those boring navigation links. We’ll do that in a moment.
Have you noticed something? This design is missing a common element of Web pages: the footer. Why is that? It’s because that when we use this particular kind of positioning, we run into problems with “non-sticky” footers that don’t stay where they belong. Had we included a footer in this page, and added enough content to require us to scroll to the bottom of the page, we would have run into a problem with our footer intruding into the rest of the layout. (Hence the term “sticky footer,” which forces a footer to stay where it belongs, at the bottom of the page.) There are numerous methods of forcing footers to stick: my friend Rayzur from SitePoint provides us with one very clean solution. But for now, we’ll go footer-less.
Notice that almost everything we did involved the CSS: nothing involved the HTML. We could structure fifty pages using this same CSS layout, and when we wanted to change it, we could merely change that one CSS file, upload it, and bing! fifty pages now look different.
Time for another break. Go pet the cat, have some coffee, mow the lawn, ride your bike, do something besides having your head rammed inside the computer. We’ll fix the navigation scheme in the next lesson.
