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.

The sprite image
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. Online Image Editor 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.

Style section where the style coding is located
The body section
Main page division
Side bar
Content
2nd side bar

style

body
#main
#sidebar
#content
#right-sidebar

body

{
background-color:#022656
background-image:url('sprite-solid-bg.jpg');
color:#8FBC8F;
font-size:18px
}

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

{
margin-left:80px;this moves the div away from the sidebar
position:absolute;top:0;left:0;
width:1210px;this width depends on sidebar and browser widths
border: 2px solid red;remove when construction completed
}

#sidebar

position:fixed;position:fixed; is the key to the code!!!
left:0;top:0;
body-background:url('b/sprite-l.jpg')width:89px;height:1320px;Do not add any padding or the background will tile
}

#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.

{
margin:auto;this centers data in the content div
width:1060px;
box-sizing:border-box;width set is absolute
text-align:justify;this aligns text ala 'newspaper style'
border: 2px solid orange;remove when construction completed
}

#right-sidebar

{
background-image:url('sprite-r.jpg');width:89px;height:1320px;
top:0;left:95%;Using percentage, in lieu of absolute, allows for different browser widths
position: fixed;
}

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

{
color:#6495ED;
}

a:visted

{
color:#0000ff;
}

The Code

<!DOCTYPE HTML>
<html lang="en">
<head>
<body>
<style>
the style elements
<style>
<div id="main">
<div id="sidebar"</div>
<div id="content" Your page content goes here</div>
<div id="right-sidebar"</div>Delete this div for only left sidebar.
</div>
</body>
</html>

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