In the last step we worked on making our header look more like the inspiration design. We added the decorative horizontal green and yellow line, and now we’re ready to keep moving along and adding some more refinement to the design.
In this step, we’ll style the remaining header text, add some extra content text to our page, and then we’ll see that we have an issue to solve with some white space gaps.
So, without further ado, let’s look at that header area. As a reminder, let’s take a look at our inspiration header:
And our current header:
You can easily see that the most glaring problem with the header right now is that text (which reads ‘Header’). We want to make that resemble the design more, so we’ll need to move it over into the yellow area. Also, I’d like to add another heading there, for a potential catchphrase or slogan of the site. So let’s start with that.
In your HTML, find the following section, and let’s add the line in bold for a secondary header.
<div id="header">
<h1>Header</h1>
<h2>A Subhead h2.</h2>
</div>
Now we have an extra content line that we’ll style, but I thought that the inspiration design looked a bit text barren at the top, so hopefully this will add a bit to that. Next we have to find the right area in our CSS so that we can start working on that text. Locate the CSS area that looks like the following:
/* Header Special */
div#header {height: 130px; background: #fc3 url(orange.jpg) top left no-repeat;}
div#header h1 { margin:0; }
We’re going to work on the rule for the div#header h1. Now the very first thing we want to do is to get that h1 text over to the yellow section, so we’ll give it a left margin that will move it over. We already know that our menu area is 230px wide, so it needs to be -at least- that much of a left margin. To draw it in a bit further so it’s not on the line, I’ll suggest we try a 260px left margin. We’ll also need to get it away from the very top of the page, so let’s pad the top by 1em (remember, if we added a margin it would actually extend the margin over the page and drop it down). So add the following:
div#header h1 { margin:0;
margin-left: 260px;
padding-top: 1em; }
Now at this point, it should be quite obvious that our font isn’t really looking very similar to our inspiration. The reason is that our inspiration uses Times New Roman as the font. Let’s pause a moment for a quick typography discussion.
While Times New Roman is the most commonly used serif font on the web, it’s also an Internet Explorer default font for Windows systems. While these days Mac and Linux users can easily add packages that are Windows default fonts, not everyone has those fonts on their computer. So we need to make sure that they have an alternative font if Times New Roman isn’t on their computer. Because Times New Roman is a serif font, we’ll use serif (a generic font category) as our generic in this case, so that if Times New Roman isn’t found on their computer, the CSS will prompt the browser to automatically use one of the serif type fonts that -is- on their computer. If you aren’t sure what fonts are installed by default on which computers, or how they look, there is a great site called Typetester that let’s you compare fonts based on whether they are default installed on Mac or Windows, as well as generate the CSS. (Note: The list they use for Mac is for Mac OS Tiger and up I believe, so it doesn’t necessarily apply to older computers.) Here’s another site that breaks them down as well.
Okay, so now that I talked a bit on why it’s important to provide an alternative generic font, let’s go ahead and set the font to how it needs to be to make that header look right. We need to add the right font family, adjust the size some, make the font weight normal instead of the default bold, and we’ll also make it that same dark green we’ve been using. So here’s what you need to add:
div#header h1 { margin:0;
margin-left: 260px;
padding-top: 1em;
color:#363;
font-family: "Times New Roman", serif;
font-size: 2.5em;
font-weight:normal; }
Now that you’ve done that, your H1 header should look done. However, we need to now style that H2 header we added. Of course, since you’ve just done nearly the same thing above, it should be very straightforward. Create the following rule and add it just below your H1 header you were working on.
div#header h2 { margin:0;
color: #000;
font-family: "Times New Roman", serif;
margin-left: 270px;
font-weight:normal;
font-size: 1.6em;
letter-spacing: .1ex; }
Notice that the above code makes a few changes between the H1 and H2. The H2 has black colored text instead of the dark green, is 10px further in from the left, has a smaller font, and there is some added space between the letters. If you’ve followed along, you should have something like this:
Let’s move on to adding more text to other parts of the page, specifically the menu. In our inspiration piece we had some text that was green under different headings, so we’ll do the same here. All I’m going to do is add a couple of chunks of text (with different heading titles) directly under my menu area in the HTML. Like this:
<li><a href="#">Link five</a></li>
</ul>
<h2>About</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<h2>News</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>
As you can easily tell, we need to style the paragraph text, although our H2’s are already styled from when we did the menu. So let’s go into our CSS and add a quick style to the paragraph text. Find your menu area in the CSS (where you created all the ul and li rules) and just below that, put the following new CSS rule:
div#menu p { color: #9C3;
padding: 0px 5px 0px 15px; }
All that does is change the color to the green from the inspiration, and add 15px padding on the left, and 5px on the right.
Ah, can you see that we have a slight issue now? Because we’ve made the menu longer than the content area, we now have a large gap of white background showing through under the content area.
This should, I imagine, make you a bit concerned as to what happens if the content area gets longer than the menu instead. I’ll save you the time and just show you by adding some extra filler paragraphs to the content:
So, the short answer is yep. This is a problem. There is a space gap no matter what side is longer, and we won’t know what side will be longer on any given page. So, how do we fix this? I’ll show you in the next step.
~Nicole
