Image Bordered SidebarThis 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. 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 ConstructionThe 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
- 2nd side bar
The purpose of this div is to provide an anchor for the other divs.
- margin-left:80px;this moves the div away from the sidebar
- width:1210px;this width depends on sidebar and browser widths
- border: 2px solid red;remove when construction completed
- position:fixed;position:fixed; is the key to the code!!!
- body-background:url('b/sprite-l.jpg')width:89px;height:1320px;Do not add any padding or the background will tile
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
- 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
- top:0;left:95%;Using percentage, in lieu of absolute, allows for different browser widths
- position: fixed;
ColorsThe 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.
- <!DOCTYPE HTML>
- <html lang="en">
- the style elements
- <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.
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.