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