- A Common Approach
- Why It's Not Bulletproof
- A Bulletproof Approach
- Why It's Bulletproof
- Another Example of Expanding
- Summary
This chapter is from the book
This chapter is from the book
This chapter is from the book
Another Example of Expanding
To illustrate another scenario where expandable rows are beneficial, I'm going to share the process involved in creating a flexible header for the TicTac template I designed for Blogger. Blogger is a popular weblog publishing tool owned by Google, and the application makes several predesigned templates available for new users when they set up their weblog. Making these templates bulletproof was extremely important so that the header could accommodate a site title of any length.
Figure 3.21 shows the header area of the template, with the wonderfully clever title of "Sample Blog" displayed in text. The graphic portions of the header are all referenced with CSS as background images. It was important to display the title of the site using text, so that Blogger users could apply the template without having to create any graphics on their own—truly, plug-and-play.
)
Figure 3.21 A sample of the TicTac Blogger template, where the importance of flexibility was key to the varying text contained within the header.
For one-line titles, at a certain font-size the header design works fine. But what if the weblog title is a bit longer (Figure 3.22)? If I had designed the header to be fixed-height, long titles (or those with larger text size) would run off the background, becoming unreadable and ugly.
)
Figure 3.22 When fixed heights are mixed with varying amounts of text, the result can be less than appealing.
So, integral to the design of a good, reusable template is the ability to accommodate all amounts of content. To make sure the Blogger template header could expand, I of course turned to CSS and the cunning placement of two background images.
THE MARKUP
Before I even thought about style and graphics, I set up the markup structure for the header. I needed the ability to reference two background images, and I also needed two elements in the markup to attach the images to:
<div id="blog-header"> <h1>Sample Blog</h1> </div>
As you can see, I chose to use an <h1> heading for the title of the weblog. If you'd rather save this element for other uses, you could use whatever you'd like here. The important thing is to have two elements at your disposal. So, a <div> wrapped around an <h1> gets the job done. The <div> could be seen as extraneous, but I think in this case, it's not harmful.
CREATING THE TWO IMAGES
To accomplish the expanding effect, I created two images. I made one image taller than I thought I would need it to be. Blogger users find that more or less of this image is revealed, depending on the length of their title. The second image I created caps off the bottom of the header. This image will always appear below whatever text the user places in the header.
Figure 3.23 shows the large image, with the pattern repeating across most of the height.
)
Figure 3.23 I gave the top image a much larger height than I originally needed.
Figure 3.24 shows the second image—the cap that will always be positioned below the title text. Notice how the entire top portion of this image is transparent. This allowed me to stack these images on top of each other, letting the top_div.gif image show through top_h1.gif.
)
Figure 3.24 The top_h1.gif graphic contains the bottom cap for the header, with a transparent area above to let the other image show through.
APPLYING THE CSS
To pull all the pieces together, I used two rather simple CSS declarations. I first added the rules for the containing <div>:
#blog-header {
margin: 0;
padding: 0;
font-family: "Lucida Grande", "Trebuchet MS";
background: #e0e0e0 url(img/top_div.gif) no-repeat top left;
}
As you can see, I added a default font-family, and I positioned top_div.gif at the top and left on a light gray background.
Next, I added the declaration for the heading element:
#blog-header {
margin: 0;
padding: 0;
font-family: "Lucida Grande", "Trebuchet MS";
background: #e0e0e0 url(img/top_div.gif) no-repeat top left;
}
#blog-header h1 {
margin: 0;
padding: 45px 60px 50px 160px;
font-size: 200%;
color: #fff;
background: url(img/top_h1.gif) no-repeat bottom left;
}
With this CSS, I adjusted font-size and padding around the text, and positioned top_h1.gif at the bottom and left of the heading. Because #blog-header will only expand as tall as its contents make it, only just enough of its background will be revealed behind the heading text.
Figure 3.25 illustrates how all the pieces fit together.
)
Figure 3.25 An illustration of how the pieces fit together, with the top portion of the header expanding only as tall at the title contents make it.
EXPAND-O-MATIC
To put the expanding header to the test, let's add a long site title and see what happens. As Figure 3.26 shows, with a larger title, more of top_div.gif is exposed, and top_h1.gif gets pushed down, always remaining below the title text.
)
Figure 3.26 Success means planning ahead for unknown amounts of content.
The opposite is true as well. If the text is one line, and the site owner prefers the title to be displayed in tiny text, the header will contract to fit. We now have a graphically rich header for the template, yet it's ready and waiting for the unexpected.