This is a test page to show you how to make a left (or whatever) border with a small image.
This method works with Internet Explorer from version 4.0 and Netscape from version 4.02 - also with Amaya (in my personal knowledge). It does not work with Web TV, which supports style sheets, but not the background images specified by them (it supports background images repeated all over the screen, if specified in html). It might work with other browsers I haven't tried.
The advantage of this is that the image file will be small in size and so the page will load faster. Also, however "loud" your image, the text will be visible always (the left margin helps for this). Finally, with a style sheet (if in a separate file), you can change the backgrounds of all your pages at once, whenever you want some variety, without having to apply changes to each and every page.
This page has a link to a style sheet, so that it will keep the general look of the other pages and it had an "embedded" style, to give it a left border, a background color and a distance of the text from the left. This worked well for most browsers (IE 4.02, IE 5.00, NN 4.07, Amaya and Web TV - the last without an image as expected), except for Netscape 4.51, where the linked style sheet took precedence over the embedded one, as far as the background is concerned, so I had to keep only a modified linked style sheet.
Sorry to NN 4.51 users, who saw no border.
Maybe newer versions of the current browsers will behave differently, as far as cascading order is concerned.
You can embed a style sheet as shown below, if you don't have a linked one as well. If you wish the style to apply to several pages, though, it is better to use only a linked style sheet.
For ways to do this, check out
below
and in my
web resources
pages.
The "embedded" style is written like this:
<style>
body{ background:#ffcc99 url(image_directory/image_name.jpg)
repeat-y; margin-left:160px; margin-right:10px; }
</style>
Notice that this text is inserted inside the "head" section. The background color is specified to fit in with the left border. There are few colors that can be defined by name (16), but over 200 (actually about 16,000,000, 216 of which are considered "browser safe") that can be defined by hex number. Next, the url (directory and file name) of the image file is added and that it should be repeated vertically (y). If you write "repeat-x", the image will be repeated horizontally, usually on the top. And, finally, the margin on the left, defines the exact distance from the left side that the text should start (as many pixels from the left as the width of the image).
Also notice that I have added 10 pixels on the left margin and a 10 pixel right margin. The extra 10 pixels make the page more pleasant, but why a right margin? It seems that some browsers (like Internet Explorer 4.0 and 5.0, but not Netscape), when you specify a left margin but not a right one, put up an equal right margin and the page looks lopsided, to say nothing of the added horizontal scrolling bar in any resolution.
Just don't forget the starting and closing tags of "style". If you want a separate style sheet, you'll have to make a text file without the style tags (with any plain text editor, like the Windows notepad) and save it (in the same directory as your web page) with the ending "css". Then you must link it in the head section of each page, like this:
<link href="stylesheet_name.css" rel="stylesheet" type="text/css">
The image used for this border is:
That was all!
For information on making the decorative rulers below, go to the
next
page.
For a chart with the hexadecimal values of colors, go to the
previous
page.
Last Updated: