One of the surprising CSS challenges for Windows Marketplace was stretching the spiffy "glass" frame to fit the content. The visual design of the site is intended to suggest Windows Vista: a glassy frame in the center of the page around the content, yummy background gradients filling to the width of the browser, even the grassy texture behind the footer. Despite the visual sophistication of such a design, it should be easy to layout, right? I mean, with tables I could just slice those images up and make the pieces the background for various cells...
It sure seemed easier to do a table layout but doing so would have put a stake through the heart of the semantic web hopes for the website. So we tapped CSS guru Robert Biggs for some help with this and other CSS challenges for the site. Here's the technical breakdown of the stretchy frame problem, and how Robert solved it.
Requirements:
- Vista-like glassy effects in IE6, IE7, FireFox 1.5+
- Scales vertically to the content. (Scaling horizontally was not a requirement)
- Looks good on monitors with high resolution or wide aspect ratios.
Design:
The design called for two gradient background fills: one at the top and another at the bottom. A fixed-width frame is centered on top of the gradients, which stretch for the width of the browser. On high resolution monitors, instead of have the web content parked in the left side of the browser with a whole bunch of white space on the right, the browser frame is filled. It looks really nice.
As the frame stretches vertically, the white background between the two gradients increases. The sides of the glass frame stretch over the white region as well, of course.
One constraint we needed to decide up front was the minimum height of the content region (the white region in the picture above): 700px. This ensured the gradients would never collide. Robert implemented the graphics to make both gradients blend to the center color. In markup, he nested two <div> tags just inside the body. He attached the top gradient image to the outer div as a background image, and the bottom gradient in the inner div as a background image. This permitted the page to scale vertically as long as needed.
Here's the CSS and markup -- it's pretty simple:
#bodyBackground { background-image: url(%img%/frame_elements/bkgd-gradient-top.gif); background-repeat: repeat-x; background-position: top left; }
#main { background-image: url(%img%/frame_elements/bkgd-gradient-bottom.gif); background-repeat: repeat-x; background-position: bottom left; }
#footerBackground { background-image: url(%img%/frame_elements/footer-bkgd.jpg); background-repeat: no-repeat; background-position: top left; }
…
</head>
<body>
<div id="bodyBackground">
<div id="main">
<div id="header">
<!-- branding, menus, search -->
</div>
<div id="bframe">
<!-- content region -->
</div>
<div id="footer">
<!-- bottom search -->
<div id="footerBackground">
<!-- links -->
</div>
</div>
</div>
</div>
</body>
The last challenge for the stretchy frame was the grassy texture behing the footer. This texture is a background picture for the "footerBackground" div nested in the "footer" div (outlined in blue in the picture below). Since the page sizes itself to the content, including footer content, this div is always at the bottom of the page. The trick of pinning the bottom gradient to the bottom of the "main" div ensures that the gradient and image always line up perfectly.
