|
Cool Uses for Mini Tiles Using CSS Here is an example of using a mini tile as a top border using CSS (Cascading Style Sheets). The CSS code is written in an external file referenced to by a snippet placed in the <head> section of the page before the </head> tag. The reason for using an external file rather than placing the code inline is that you just have to do it once. Any changes you make to the page's style can be done just by changing the one external file instead of all of the pages one by one. Saves you a lot of time in the long run. 1) The reference snippet you place on each page is written as : <link rel=StyleSheet href="bordstyle.css" type="text/css"> 2) The external CSS file (bordstyle.css) is simply code written and saved using Notepad or another text editor and uploaded with the page. The CSS code in this example is written as: BODY {background: #FFFFFF; background-image: url(gnarly_s.jpg); background-repeat: repeat-x;} The variables in red should be changed to your color and your graphic, respectively. If you want the tile to repeat down the left side, then change repeat-x to repeat-y in the above code. Here's an example of how that works using the same tile. ~~~~~ If, on the other hand, you'd prefer to put the CSS inline on each page, here's how to do it. Before the </head> tag, place the following snippet, being careful to keep the second line on one line without hard breaks (<br> or <p> tags): <STYLE TYPE="text/css">BODY {background: #FFFFFF; background-image: url(gnarly_s.jpg); background-repeat: repeat-x;} </STYLE> Replace the variables in red with your own color and graphic, respectively. Other than your page's text and link colors, this code will replace your body tag's attributes. Please close this window to return to the Mini Tiles page. |
| Much
thanks to HTMLGoodies for the CSS tips.
Graphics and Site Design Copyright © 2000-2006 Arride Graphics. All rights reserved.
|