Robust design elements with XHTML and CSS

I wanted to write a tutorial that could help explain a few ways to build more robust page elements using XHTML and CSS that were able to cope with changing font-size.
I wanted to find a difficult example to replicate with CSS to emphasize the issues surrounding it, I chose to try and create the navigational menu on Digital Brand.

Semantics

An important skill that web designers need is to be able to recognize parts of a design that have semantic meaning. By looking at this image I can tell that there is a heading and a list of links, the semantic markup could look something like:

<h2>Navigation</h2>
<ul id="navigation">
  <li><a href="#">Identity</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Products</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">News</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Slices

Because of the nature of the box model we need to look at our image and see if it can be sliced up so that we can apply different parts of the image to different HTML elements.
Looking at the image here’s what I came up with..

Understanding Sliding Doors

The real trick in making flexible containers for your textual elements is to understand how to apply the sliding doors technique published by A List Apart. Basically it requires that you have background images that overlap and are positioned opposing each other so that as the element grows in size the background images spread apart from each other. So to apply this technique we need to slice our images again and make the underlying background-image larger than we need it to be to allow for larger font sizes. How large you make these images depends on what sort of font-sizes you want to support - Internet Explorer has 5 settings, smallest to largest - where Firefox seemingly has no limit and can make the size of the font rediculously large. It’s not reasonable to support all sizes and to save on download time you should try and keep the filesize to a minimum but still providing enough flexibility within reason.

When looking for image slices you should try and see if parts of the design can be tiled so that you can keep the file-size down and reduce load times, region 3 is an area where you could apply a vertically tiling background image to cover that area. The image I have used for this is only 11px x 10px:

The images for the header are: and
See the header example that displays the sliding doors technique.

Exactly the same for the footer and

More markup

Now, CSS has come a long way in the last few years but still only allows 1 background image per element(multiple background images are a part of the CSS 3 recommendations) so.. at the moment we are forced to add non-semantic elements to contain our background images when we need to use more than is supplied by the semantic markup itself. So to achieve the design I have used the following additional markup:

<div id=”example”>
  <div class=”inner”>
    <h2><span>Navigation</span></h2>
    <ul id=”navigation”>
      <li><a href=”#”>Identity</a></li>
      <li><a href=”#”>Services</a></li>
      <li><a href=”#”>Products</a></li>
      <li><a href=”#”>Portfolio</a></li>
      <li><a href=”#”>News</a></li>
      <li><a href=”#”>Contact</a></li>
    </ul>
    <div id=”footer”><span></span></div>
  </div>
</div>

The two outer nested divs are simply holders for the background images for regions 2 and 3 in the image slice diagram above. I have placed these elements as the outer wrappers so that everything is contained by a wrapper and we can alter the size of the whole menu through this one element; and that because these are the outer most elements the other images will sit nicely over the top. I’ve added spans inside the heading beacuse I need to apply the second background image. The footer contains two elements for the same reason.

For the lists - I have the background image on the ‘li’ elements and I have the ‘button image’ on the ‘a’ elements. I’ve separated these images so that we can control the position of the the images independently from each other and position the ‘buttons’ in line with the text.

Putting it all together

Now we have a navigational menu that the design stays intact with font-sizes ranging from… ‘really big’ to ‘really small’

We were able to achieve a robust navigational menu of the original design using a combination of:

• larger than expected background images
• repeating background images
• The ’sliding doors of CSS’

Please test out the working example below and change the font-sizes - You should be able to notice where the divisions are and hopefully see how you can apply these techniques to your own designs to make them more flexible.

View the working example of the Robust design elements example

Things to remember

Use em’s or percentages for your font-size units in CSS - font-sizes given in pixels cannot be resized in Internet Explorer 6 and below. ‘IE6′ is currently the most popular browser and will be so for the near future so this is important if you want to support this feature for the majority of users.

Test in as many browsers as possible - there’s a similar function to text-size increase/decrease and that is zoom, some browsers only have zoom - some have both features. Zooming not only increases the size of the font but the size of all units of every element in the page - you don’t need to know any special tequniques to make zoom work properly and keep the design together as it increases the size of the images as well - I personally don’t like it as much because it takes the images that you put your heart and soul into to and stretches or squashes them making them pixelated or blurry. If you would like to see this feature for yourself you could download the Opera web browser.

Remember to use appropriate filetypes for the type of image you are using and use compression where possible to reduce download times and speed up the loading of your site. For images with only a few colours like icons you should use .gif or .png - for images with many colours and/or gradients use .jpg’ Test out the different filetypes to see which one looks the best and is of the highest quality.

This tutorial doesn’t aim to explain in depth how to actually style the individual elements to accomplish this design(though you are welcome to view the CSS of the working example), I intended to take a higher view of the issues surrounding building flexible design elements and try to show you how you can use techniques like sliding doors and repeating background images to achieve them.