Part 1: We Start With The Head
When I first started testing layouts for the website – I saw a common theme to most sites. Basically, they would have a static header image, with a fixed size. It didn’t matter if you had a browser window 2000 pixels wide or 20, they usually just centered or justified the image. I wanted my site to be much more dynamic, to feel customized to users on tiny iPhone or a massive HDTV. This meant that the body would be about 80% of the screen width, no matter what the width was.
This meant the header image needed to also be scalable. I couldn’t just dump in a single image, it wouldn’t scale up (or down). So I decided the best thing was to make on with a distant left and right side, and just a centered span with a gradient and my name. This way, items would “stick” to their side, and scale with the window, but it would always appear the correct proportion.
To accomplish this, I would need to separate the header into three basic (and obvious) sections: left, right, center span. I used Photoshop to draft images for each of these elements. I then used 4 divs with the images as the background (left, right, center gradient, center logo text). If you load a page with these divs, they default to being on their own line.
You can eliminate the line breaks by adding “style=’display:inline;’” to the div elements, but that still just puts them one next to another. I needed to layer these divs, which means I need to manually adjust positioning. Absolute wasn’t an option, since I wanted the width to be a function of the containing element, not of the window at large. My first idea was to simply nest them. This works – the layers will stack up nicely – BUT the transparency channel won’t render properly. Since there were ‘partially transparent’ pieces in the headers, like the edges of the leaves, they were dependent on the dark grey background for color. When they were right up against the dark background, it properly bled through to the leaves. If it was layered on top of another transparent images, it didn’t bleed through to the dark background. The images looked lighter and pixellated when stacked in nested divs.
So nesting transparent divs isn’t an option. They would have to be placed on the same level to get the right bleed-through effect with the dark background. The trick was relative positioning. Since each image’s height is fixed, I could just use negative coordinates to move the images up on top of one another.
This let me snap the widths to the containing element and keep them on the same level in the HTML, but place them perfectly on top of one another. The result is rather crude, but effective, as you can see in the header above.
Related posts:
- DOM You Safari!
- (Re)Building A Blog-based Website From (Near) Scratch – Part 2
- (Re)Building A Blog-based Website From (Near) Scratch – Part 1.5