Hello there :)

Angela I'm Angela. I've been blogging on and off, but I've always been around. I like rambling about anything that strikes my fancy, be it personal endeavors, geeky pursuits, books I'm reading, writing attempts, occasional travel, and the games I play.

 

Tutorial: Uneven header and background

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.

Final layout screenshot in GIF (which is why it's grainy) 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.

Final slices for the layout header

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:

HTML markup, no CSS

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:

Top header done

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:

Middle and top header, wonky background

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

Stupid IE doesn't know math

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:

Headers almost done now

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. :)

  • Amour said:

    So cool, very nice work. Like it, and thanks for the tips :)

  • [...] What was interesting in this layout was that after I created a mockup, I realized that I was going to have a problem with the horizontal page background, as they were different on either side of the header image. I solved this with a bit of help from floating DIVs — you can see the technique I used in my Uneven Header and Background Tutorial. [...]

  • Thanks for pointing that out, Kati! I’ve sent her an email. :)

  • Hey Angela!
    Just wanted to say that Coeri form http://cubalish.net/ copies your SiteSkin-Script. I guess she doesn’t give you credit and also she offers YOUR files to download, she hasn’t said that it is yours but she also hasn’t said that it is hers. So well… Just wanted to say!

  • That’s what I originally thought of doing, but I’m not sure if it will work with a float — there isn’t a float: center, just float: left and float: right :) Having three DIVs isn’t practical either for my purposes (two for the background, and then one for the center image, using margin: auto) as I don’t want to use absolute positioning for the z-indexing either, and I’m not sure how to overlap the three correctly without throwing the rest of layout out of whack :)

  • Tricky tricky! I probably would have just had two divs with the sides of the background, then float the middle part on top.. Go z-index! But your way is obviously more practical :P Good work!

  • Thanks, Rin! I’m glad it was understandable for you. :)

  • Wow. Just wow. Now that is something… That seems very complicated to do! I wouldn’t know how to fix that in IE (now I know how!) since it always just assumes something from a piece of code and just does what it “thinks” it’s trying to do. This tutorial really helped me understand the basis of learning to fix somethings in IE that in firefox work fine (yay for firefox). You should be proud too! :D The layout looks fantastic! I may not understand a lot of tutorials just because I lack the understanding but you described things in the clear so it was enough to get me nodding. I liked it :D Two thumbs up!

  • Thanks, Carolynne! :D I was somewhat nervous since this is the first time I’ve actually written a tutorial on implementing a layout, hee hee. Glad you liked it!

  • I love it when you do so much to get the layout just right and then you feel so great after :) As you said, it may not look totally spectacular like the best thing on the planet but it is yours and you made it. Good for you, I liked your tutorial.