In Step 5 we mostly focused on fixing the header so that it better resembled our inspiration design. We added the formatting for the regular paragraph text on the sidebar, and placed some extra text in there also.
We realized at the end of our last section that we would have a gap of whitespace if either section became longer than the other. I said I’d be showing you how to fix that problem, and that’s what we’re going to focus on now.
Back in Step 4, I showed you how to make a very long image line that would stretch across the whole content area (even though that section uses percentages for width). We are going to use the exact same technique to fix the white space gap we have whenever one column becomes longer.
The solution will be to wrap the entire page in a single div (a container) that is used to add the graphical elements we want to see. We are going to create the image we need to have to show the appropriate colors for each column, and we’re going to add that green and black border on the left of the page. First we’ll add the container div to our code itself. Start at the beginning of your body area and insert the bold text shown:
<body>
<div id="container">
<div id="header">
Then go all the way to the end of your document code and add the bold text to close it:
<p>Footer</p>
</div>
</div>
</body>
Now that you have your code, ready, you need to create the image used for the background. I’ve already done that for you and you can just download and use it, but I want to show you how we did it first. Below you will see an image that explains how I made the long line we’re using. It’s 1536px long, and 1px in height. However, as you can see from the below example, it is actually a series of colors.
You can download that image here. I’m calling mine fullline.jpg, but rename to whatever you prefer.
Now we need to go into the CSS and add that as the background image for our new container. Since we don’t have any CSS rules for the container, and all it is going to do is hold this image, I’m just going to add it to the main div blocks section. Insert the bold text shown in your CSS:
/* Main div blocks */
div#container { background: #000 url(fullline.jpg) top left repeat-y;}
div#menu { width: 230px; float:left;}
When you save and refresh, you’ll see that the text is a bit off. Well, that’s because we added that extra area on the left with the green and black band. So let’s accomodate that by adding 36px of padding on the left side of our new container. Insert the new bold rule:
div#container { background: #000 url(fullline.jpg) top left repeat-y;
padding-left: 36px;}
Now let’s test and see how it looks if one side goes longer than the other, and if our white space gaps are gone.
A longer menu area than content area:
A longer content area than menu area:
Now let’s look again at our inspiration design to compare our progress:
I think our design looks very much more like our inspiration now, but let’s move on to our content area briefly. Here’s a close-up of the inspiration content section:
A look at our current content area:
Obviously we need to work with that text some and make it look better. We’ll start with the header. The header uses the same color and font that the title header in the header section uses, so that simplifies it some. It’s just a bit smaller in text size because it’s an H2 instead of an H1. Currently our content styling CSS looks like this:
/* Content Styling */
div#content h2 { margin:0; padding: 0 .5em; color:#363;}
div#content p {padding: 0 1em;}
But we are going to made some additions to that. Let’s start by changing the H2 to make it the right family, font weight, and setting the size. Add the following in bold:
div#content h2 { margin:0;
padding: 0 .5em;
color:#363;
font-family: "Times New Roman", Arial, sans-serif;
font-size: 2em;
font-weight:normal;}
That should make it look much more like what we need. Now I’m going to change the padding, and to get that effect of the space around the text and the bottom border, we’ll change the margin as well. Finally, we’ll add that bottom border. Make the following changes in bold:
div#content h2 { margin:0 .5em;
padding: .5em 0 0 0;
color:#363;
font-family: "Times New Roman", Arial, sans-serif;
font-size: 2em;
font-weight:normal;
border-bottom: 1px solid #363;}
And that, should now look quite fabulous. Here’s what you should have at the end of this step:
We have more tweaking to do in the paragraph areas, and we have yet to attack that footer, but we’re getting quite close to being done.
~Nicole
Oh no! Where’s the next step?!
I have been enjoying your tutorial SOOO much. Thank you for all the effort you have put into it, you’ve done such a good job. It has really helped me understand this way of CSS web design. You have highlighted so many essentials in this easy(!) tutorial… it really helps a relative newcomer filter through all the information out there.
Please do put up the rest of the tutorial soon, I’ll be waiting eagerly!!
P.S. When cut n’ pasting, I had a problem with the double-quotes in bold, Firefox couldn’t understand them… luckily I saw ? in the page source instead, then just re-typed them myself and all was good.
Ack! I’m so sorry, apparently I forgot to put the link at the bottom of this one to Step 7 when I finished it.
Yes, unfortunately double quotes will always be a problem like that. They should be encoded just as a habit. For me, I tend to do search and replace any time I copy code from one spot to another.
Thank you for a wonderful tutorial! I am a newbie but you made it very clear and I learned a lot. i plan to re-build my golf video website http://duplessisgolf.com soon and will use this information.. Ross