Tutorial: Uneven header and background

16th December 2006

One thing I’ve come to realize when I design websites and implement layouts is that a big chunk of my enjoyment in the entire process stems from the challenge of actually implementing some seemingly tricky design. There have been times when the end result of a layout may be rather simple-looking, but I end up prouder of it than the usual because of what I did to implement said layout.

One recent example is the new skin I made for It’s a Soul Thing: the Taylor Hicks fanlisting. At first glance, it’s nothing very exciting or innovative, but what made the implementation interesting for me was the the following criteria/features of the layout that I wanted:

background image is uneven — it’s different for either side of the header image, but:
the layout has to be liquid and compatible for all screen resolutions equal to or greater than 800×600,
the layout mustn’t use tables to lay out the design of the site,
the menu must be text-based, no image maps, and
the site must be cross-browser compatible.

With all those in mind, I bring to you a mini article/tutorial of sorts on what I did to implement the layout.

Important note: I may talk in detail about how I implemented the layout here, but that doesn’t mean that anyone can use my layout for their own websites. Feel free to learn from my method, but don’t steal.

All images (or almost all) are thumbnails — click on them to enlarge.

Step one: Slice the layout

These days I usually create a mock-up of a whole site design using my graphics program (Adobe Photoshop in this case) since it helps me plan out the whole site. When that’s done, I start slicing/cutting up the images I will use for my background. Shown below is what I ended up with and how I cut up my images.

So I have four images that make up my “header”. I sliced them that way because the bottom portion will end up as the background of the page text. The grey band will form the menu, and is also the part of the page where the background will differ. No real reason to slice the topmost, so I didn’t.

And so we set up the page now:

<div class="header01"><img src="header01.jpg" width="770" height="306" alt="" /></div><div class="header02a"><img src="header02a.jpg" width="385" height="131" alt="" /><div class="menu">
<a href="about.php">About</a> |
<a href="list.php">Fans</a> |
<a href="rules.php">Join</a> |
<a href="codes.php">Codes</a> |
<a href="update.php">Update</a> |
<a href="index.php">Index</a>
</div></div><div class="header02b"><img src="skins/nowthen/header02b.jpg" width="385" height="131" alt="" /></div>

<div class="content">

If you notice, the above lines of code are rather run-on. This is because IE won’t place nice and keeps treating spaces/line breaks as an actual space on the page. If we made the code look prettier by adding line breaks, the images will end up having some border.

Without the stylesheet, our page looks like this:

Now we mess with our stylesheet.

We put in the background of the whole page:

body {
	background-color: #535353;
	background-image: url("bg.gif");
	background-position: top;
	background-repeat: repeat-x;
}

And for our no-nonsense top header:

.header01 {
	height: 306px;
	width: 770px;
	margin: auto; /* needed so that the image will be centered in the div */
	margin-top: 0px;
	z-index: 1;
}

Now we end up with:

Now we add in the tricky part, the middle/bottom part of our header:

.header02a {
	float: left;
	width: 50%;
	text-align: right;
}
.header02b {
	float: left;
	width: 50%;
	text-align: left;
}

The above style code will tell our browser that it will create two boxes, each 50% of the total size of the browser window, and tile them starting from the left. The above also tells the browser that the contents of the first box (header02a) will be placed on the right side, and the second box’s contents (header02b) will be placed on the left side.

We end up with:

Unfortunately, IE doesn’t want to play nice with us. Look at what it did!

The bright and wise IE complains that 50% + 50% > 100%. *nods* So we’ll have to use a hack to get it to show up correctly in IE. Just before our <body ... tag, we add the following lines:

And we make a new stylesheet named ie.css with the following content:

.header02b {
	width: 49.9%;
}

And that should fix IE. ;) Unfortunately, even with that IE hack, that doesn’t solve our problem with the uneven background. That’s ultimately the reason why I chose to cut the middle header image into two parts, rather than just one part that will span the whole page: because we’re going to add a background image to our second box (header02b). Our background image is:

Middle header background image

That image is exactly the same height as the middle header images, and should align perfectly with the rest of the image. Our stylesheet code should now look like:

.header02b {
	float: left;
	width: 50%;
	text-align: left;
	background-image: url("bgright.gif");
	background-repeat: repeat-x;
}

And now we have:

The last part is the bottom of our header image, which should overlap the content of our page:

.content {
	width: 650px;
	margin: auto;
	margin-top: -20px;
	line-height: 150%;
	z-index: 2;
	padding-top: 10px;

	background-image: url("header03.jpg");
	background-repeat: no-repeat;
	background-position: top center;
}

That places our background at the top and center, and only there.

And that’s basically it. ;) It’s pretty simple when you think about it, and just needs a little tweaking here and there to come up with the end result. I hope this mini-tutorial gives you an idea on how to apply this sort of technique in layouts that you make. :)

« Book whoring?