Cascading Style Sheets

Posted by ljmacphee on February 16, 2007 under css, useful sites | Be the First to Comment

You can create special effects as in the translucent table here:
example

This was done using two images. First I have the back ground image. Then I copied
a piece of the background that was larger than the table I needed. I used gimp to lighten the image so it is much whiter. This makes it easier to view the table text. This also makes it appear translucent. Using CSS you can line up the table so the edges of the image match.

In the .css page I used:
table { position: absolute;
left: 490px;
top: 220px;
}

body{
font-color: #ccccff;
background: url(images/splash.jpg) 0 0 no-repeat fixed;
}

In the .html page I used:
< table background=”images/smallsplash.jpg” border=5 cellpadding=10 cellspacing=5 >
smallspash.jpg is the section of the main splash image I copied and lightened

See also:
Beginners Tips for CSS

More information
CSS play, demos and howtos of several fun CSS tricks
Cascading Style Sheets, from the World Wide Consortium
HTML net has a nice online tutorial on CSS
Free open source css templates
CSS Basics; Learn everything you ever wanted to know about the basics of CSS

Adding borders to pages

Posted by ljmacphee on February 12, 2007 under css, gimp, graphics | Be the First to Comment

Borders of images can be added across the top of the html document or down the left side. You can add text, individual, elements, tables and more on top of the border text. It acts like a background to other html objects.

To add a border of repeating images, you add the following text to your < head > part of your html document.

< style type=”text/css” >

body { position: absolute; top: 0px; left: 0px;

background: url(image.gif) repeat-y;

}

< /style >

top: 0px; means 0 pixels from the top, left: 0px; means 0 pixels from the left, you can move this down or out as you please. If you use repeat-y then you get a vertical band, repeat-x will give you a horizontal band.

see also:
Beginner’s tips for using CSS