In the last step, we worked on creating our menu to enhance the look of the design and bring it yet another step closer to our inspiration piece. The aspect we are going to work on in this step is going to be our header area just above the content and menu. We’re also going to add the nice little decorative horizontal line that you saw before.
One thing that you will absolutely learn how to do with CSS (if you aren’t already familiar with it) is how to use much smaller graphics or better graphic conservation. Of course, a key technique for any web designer is finding ways to re-use graphics to decrease precious page-load time, and CSS is well accomodating in that aspect.
Let’s take another look at our inspiration design all together:
And our current state with our working design:
We are getting significantly closer to the design goal, but we really need to add some graphical elements to round out the look we are going for. I went ahead and made a quick image to go in that header area. Go ahead and download this one to your computer and use it for the steps. (No, I’m not a graphic artist nor do I have any delusions that I am, feel free to choose your own image later. I promise my feelings won’t be hurt in the least.)
First let’s work on that header area and put that image where it belongs. Find the section in your CSS that looks like this:
/* Header Special */
div#header {height: 100px;}
div#header h1 { margin:0; }
When you have, change the div#header rule to the following:
div#header {height: 130px;
background: #FC3 url(orange.jpg) top left no-repeat;}
Essentially, we made the header taller, and set the background to be the same color it was before, but also put a background image in of that orange image I just gave you. We positioned it ‘top left’ and told it to not repeat across the page. Since it doesn’t repeat, the background color we set will show through in the areas where the image stops.
There, that looks a bit better already. Now the next thing we need to address is that horizontal green and yellow line that runs directly below the header. When you start considering how to do that, you are presented with several different options. You could use an image, or you could create some special rules for each of your content and menu areas that pad the top and add those colors individually. Well, we’re going to use an image for this aspect. Now here’s the question that a lot of people unfamiliar with expandable areas are likely to ask…
How do you make a horizontal image that’s going to go across that content area when you don’t know how wide the content area will turn out to be? They could resize their browser window or have a larger monitor than the image we make, and it’ll look terrible!
That is absolutely true, that’s why we’ll make the image -very- long. But, the nice thing about repeating images is that it doesn’t have to be very tall. In fact, for our purposes, it’ll only be 1px in height… but 1500px in length. You could make it 2500 or more if you are really paranoid about screen size, but you’re fairly safe at 1500. And the next question is typically… well, won’t that image be really large in size and add a lot to download time? Nope. Not at all – the one I made is only 516 bytes.
Here’s how to make that sort of image (and yes, I have one already for you to download and use, this is just for future reference). Start by creating an image that is 1px high and 1500px long. Then fill the image with your green header color we picked earlier (#363). Select a section starting from the absolute left that is 230px (the width of our menu area), and fill in that selected area with the yellow from our header (#FC3). This diagram may help:
Now, as I said, I have an image for you to use already, and you can download that long line image here.
So, now that we have this great graphic, we need a place to put it. We’ll create a div for the horizontal line area and just call it ‘decorativeline’ for our purposes. You want to put it in your code right below your header like so:
<h1>Header</h1>
</div>
<div id="decorativeline"></div>
<div id="menu">
Then we’ll add another piece to our CSS that will actually add the image to our new div. Add the following:
/* Decorative Horizontal Line */
div#decorativeline { height: 10px;
background-image: url(longline.jpg);
background-position: top left;
background-repeat: repeat-y; }
So now our 1px super long line is going to repeat vertically until it fills up that 10px allocated space, and it will start at the top left which positions our yellow area just above the menu where it belongs.
Feel free to resize your window over and over, and you’ll see that the length of your image is being revealed only as it is needed. That is going to wrap it up for this step.
Let’s see our design currently:
I think it’s definitely looking a lot closer to finished.
~Nicole
