vspacer

Image Bordered Sidebar

This page will show how to us an image as a fixed borders on a web page. The basis for this page was a Sprite background

with 2 components which had to be separated.
  1. The sprite image
  2. The attached background


The image chosen for the sidebar should have dimensions of about 90 x 200 pixels as you will be tiling this image vertically. Grab this transparent spacer, resize it to your image's width and a height of 1320 pixels to tile your image on. This height is necessary for the Ipad window. Image Magick is a great place to separate, resize and tile images. Choose a color from the image for the body background if there is not a background connected to the sidebar image.

Page Construction

The first step is to create the basic outline for our page which has six components.
  1. Style section where the style coding is located
  2. The body section
  3. Main page division
  4. Side bar
  5. Content
  6. 2nd side bar
style body It is good practice to place a border around the divs, during page construction, which will be of great assistance in div sizing and location.

The purpose of this div is to provide an anchor for the other divs.
#main
#sidebar

#content
Calulating the width of this div can be a bit tricky. You must take into account the sidebar , browser and main widths as well as the main margin. As stated, borders around the divs are very helpful and recommended during page construction. Having a calculator and sticky notes on the task bar is very helpful for calculations. #right-sidebar

Colors

The colors for the text, link and visited link can be any of your choosing. The Professor's Color List is a good place to choose from. There you can set the background color and see how the other color selections will display.

Link colors are placed in the style tag like this.
a:link a:visted

The Code



It is important that the order of the opening divs and the closing divs be followed to create the desired effect. Now lets construct a page using gradient colors for the Sidebar.

Gradient Colored Sidebar



home Valid CSS! HTML Hit Counter