Tuesday, December 01, 2009

Styling the CSS Zen Garden Footer

Thank you for joining me in Part 6 of the CSS Zen Garden Series. We had completed styling the body of our design previously. Our task in this post is to style the footer div and its links to give our frame a bottom with a round left edge. Just as a reminder, the bottom right edge of our frame has a flower bitmap which we set up using the background of container div. So yes, we are going to be rendering the two corners of our frame from two separate div's. CSS only allowing a single background image for each element forces us to do this. The bitmap for the left edge is 15 pixels wide and 30 pixels high:

We are going to use the background property to display the bitmap in the bottom left "0 100%" corner of the footer div. 0 being the x or the horizontal offset, 100% is the y or vertical offset (0 100% will put it at the lower left edge). The color of the bitmap is a dark red (#de1d4a in hex) which will become the div's background color. But first let's take a look at the background property without the bg color. Simple text styling for the anchor links, if the cursor is hovering, we will underline our links:

/* Styling the Footer */        
  #footer {
     background: url(images/corner15x30.jpg) 0 100% no-repeat;
  }
   
  #footer a:link {
     color: white;
     font: 0.8em Tahoma, Arial, Helvetica, sans-serif;
     text-decoration: none;
  }
  #footer a:hover { 
     text-decoration: underline; 
  }

It's a little hard to see it but the left edge bitmap is in place. The links in white text color are not visible so let's add the bg color to our property which will draw the footer div in red.

#footer {
     background: #de1d4a url(images/corner15x30.jpg) 0 100% no-repeat;
  }

A BACKGROUND IMAGE IS ONLY AS GOOD AS ITS DIV

I don't know if you can tell but we have a problem with the way the bitmap and the red box are displaying. The red bottom bar is shorter or as I'd like to say narrower than it ought to be. Since we did not provide a height anywhere, the browser is rendering the footer div only as high as is needed. How does the browser figure that out? By looking at the elements that are going to go inside the div, in this case the links, "xhtml, css, cc, 508, aaa", and how much vertical space that text occupies. You might wonder why having a bitmap for the background doesn't help by forcing the browser to display the entire background image. But in CSS, a background image, no matter how big, does not have the power to resize a div which is exactly why our background image is chopped off from the top.

In fact, if you want your div to show up at all, you have to specify dimensions like height and width or have enough content within the div that will render it in the size you want. In this case, our background image is being clipped so let's give the div the same height as our bitmap which stands at 30 pixels high.

#footer {
     background: #de1d4a url(images/corner15x30.jpg) 0 100% no-repeat;
     height: 30px;
  }

The browser is forced to render the div at 30 pixels high which fixes the clipping problem in the footer. The links are visible but they are lined up with the left edge. We can center them with text-align. The footer goes all the way to the right which we do not need since we will be finishing off the bottom right edge with another bitmap later. Right margin will stop the footer bar from going too far to the right.

#footer {
     background: #de1d4a url(images/corner15x30.jpg) 0 100% no-repeat;
     height: 30px;
     text-align: center;
     margin-right: 140px;
  }

With the new right margin factor, our centering is a little off so we add 100 pixel left padding to compensate and re-center the links.

#footer {
     background: #de1d4a url(images/corner15x30.jpg) 0 100% no-repeat;
     height: 30px;
     text-align: center;
     margin-right: 140px;
     padding-left:100px;
  }

LINE-HEIGHT FOR CENTERING? YES..

We are almost done except for the vertical positioning of the links. When rendering the footer div and its content, the browser starts in the first available slot which is within the div but a little too high for the eye. To fine tune the positioning, we will use the line-height property. By specifying a larger line-height, we are forcing the Browser to allocate more vertical space for the text. As the line height approaches the height of the parent div, it has the effect of vertically centering the line of text.

/* Styling the Footer */        
  #footer {
     background: #de1d4a url(images/corner15x30.jpg) 0 100% no-repeat;
     height: 30px;
     text-align: center;
     margin-right: 140px;
     padding-left:100px;
     line-height: 28px;
  }

OUT OF SIGHT, OUT OF MIND: ABSOLUTE POSITIONING TAKES ONE OUT OF THE FLOW

Even though it may not look that way to you because of the dangling yellow flower in the bottom of the page, we are finished with the footer. You may be wondering how we are going to move the flower to line up with the rest of the footer and feel uneasy about leaving it down until our next exercise.

If you go back to look at the XHTML elements diagram, you'll see that the linkList div is enclosed within the container div. The yellow flower which is the background image for container div is being pushed down by the linkList element. Since I will be absolutely positioning the linkList later anyway, I don't see why we could not write one line of code to dramatically change the way our page looks.

#linkList { position: absolute; }

will take linkList out of the flow and prevent it from pushing the yellow flower down. Later when we are working on the menu, we will give the necessary coordinates and absolutely position linkList in the left sidebar area. For now, the mere mention of "position:absolute" to the browser will do the trick and complete our work on the footer.