Xara Webster - Web backgrounds with a side bar

Many Web sites have a Web background with a coloured margin on the left hand side of the page. The Xara Ltd site is one example of this, although on the framed version of the site the sidebar is actually a separate frame. How you do this on your pages is a combination of exporting the correct shape graphics, and using the correct HTML.

Nearly all Web browsers that support a background image don't allow you any control over the placement of the image. The browser will tile the image both horizontally and vertically, and there's nothing you can do to stop it. The secret to creating a Web page with a sidebar is therefore to create a graphic that's wider than the screen, so that any horizontal tiling of the image takes place invisibly off the edge of the screen.

Creating a graphic that's 1300 pixels wide will work on most screens, although you may want to go up to 1600 or more to cope with people viewing your pages on large monitors. The first thing to do in Xara Webster is therefore to draw a rectangle 1300 pixels wide (change to pixel units before you start this - it's easier). Colour this rectangle the colour that you want your background to be, and remove its line colour.

The next step is to draw a second rectangle so that it covers only a small section at the left hand end of the first rectangle. Give this rectangle a different colour, and make sure that it is the same height as the first rectangle. The image below shows a black background with a red sidebar (approximately one third of the width that you would usually use).

Because this image is not patterned at all, it will tile vertically with no problems and can, in fact be just one pixel high. See the test page demonstrating this backdrop for a view of what this looks like in practice.

Simple two-colour backdrops are very effective, but you may want something more striking. Textured fills can look very good in the side bar, and a few of the effects possible are shown below. In each case, clicking on the image will take you to a page demonstrating that backdrop in action and giving more detail on how it was created.

The correct HTML

When you have a page with a sidebar, you will usually want to keep your text off it, using the sidebar as a text-free margin. Although on some later browsers it is possible to set page margins in the HTML, the most reliable way to achieve this is using tables. The effect is impossible to reproduce reliably on browsers that don't support tables. Thankfully these browsers are relatively rare today, but compatibility with such browsers is important to you, don't give your page a sidebar.

The trick is to divide your page into two table cells - the left hand one containing the margin and the right hand one containing the text of your page. To get the left hand column the correct width, you should insert a transparent image of the appropriate with to act as a 'spacer'. The image itself can be whatever size you choose - even one pixel in size - and will be re-sized by the browser to the size that you specify in the width and height attributes of the image tag.

An HTML template for such a page might look like this:

<table>
<tr>
 <td>
    <img src="1pixelbox.gif" width=110 height=1 alt=" ">
  </td>
  <td>
    HTML for the page goes here...
  </td>
</tr>
</table>

And, indeed, all the example pages use this layout, so you can examine their HTML to get a better idea of how this works in practice.

There is a fashion in Web design at the moment to create pages where the text is formatted to a fixed with, instead of re-flowing as the window is re-sized. While this places restrictions on the size of screen that you need to view the page correctly (and therefore we don't encourage the practice), it does give better control over the positioning of images on the page. With respect to Web backgrounds, it is a useful technique to avoid text overflowing a repeating background on a wide screen.

For example, you can create a Web background that is only 600 pixels wide. This will repeat on most screens, but if you format your text to, say, 580 pixels, the text won't flow over the repeating graphic. Depending on your artistic tastes, this may look neater than only having a graphic margin on the left hand side.

Sample HTML to achieve this follows:

<table width=580>
<tr>
  <td>
    <img src="1pixelbox.gif" width=110 height=1 alt=" ">
  </td>
  <td>
    HTML for the page goes here...
  </td>
</tr>
</table>

You can see what this effect looks like on the example backdrop page provided.