While there are CSS tags that could be added for links, font types and colors, and any other element of your page, this tutorial will only focus on the triple border background code.
The first step is to put this code between the
<![CDATA[<head>]]>and <![CDATA[</head>]]>tags of your page: (this is not the shorthand method, to effectively teach you what each tag does)
<![CDATA[
<style type="text/css">
<!--
body {
background-image: url( tile1.gif ); /* background furthest from the eye */
background-color: #d8b095; /* color */
margin: 30px; /* sets the margin of the page */
padding: 0; /* sets padding between first and second background */
}
.bordertile {
background-image: url( tile2.gif ); /* middle background */
margin: 20px;
padding: 15px;
width: 600px; /* sets the width */
border-width: 1px; /* sets our border thickness */
border-color: #d8b095; /* sets the color of the borders */
border-style: solid; /* sets the type of border */
}
.toptile {
background-image: url( tile3.gif ); /* background closest to the eye */
margin: 0;
padding: 6px;
border-width: 3px;
border-color: #7c6758;
border-style: double;
text-align: center; /* sets our content in the center of the page */
}
-->
</style>
]]>
Now you will need to adjust the margins, paddings, borders and image url's in the above code to your needs.
To apply these style rules to the section of your page and create the triple border, wrap your content in this code:
<![CDATA[
<div class="bordertile">
<div class="toptile">
YOUR CONTENT HERE
</div>
</div>
]]>
Copyright © by Admins101 All Rights Reserved.
10 visitors online
7,798,952 visitors since March 5th 2003. 1,602 leagues registered.