Style sheets : Creating a Reusable Template
Dr Benton
Now it's your turn!
At this stage, what remains to be done is not complicated; it's purely a question of HTML coding. So just continue placing
your links, your images and your applets ... all these elements will smoothly flow alongside each other. And, above all, you
can now be sure that your pages will remain consistent and legible. Go ahead, give free rein to your talents and add all the
elements you want between the
<DIV> and
</DIV> tags. You will see that the styles defined earlier will automatically apply.
Need a small example to give you some ideas? Alright:
<div id="CadreDroit" style="position:absolute; left:500px; top:110px; width:230px; height:480px; background-color: #B1E33C;
layer-background-color: #B1E33C; border: 1px none #000000; padding: 12px; line-height: 22pt; font-size: 8pt; font-family:
Arial">
<img src="doss.gif"> <a href="">Summary</a><br>
<img src="doss.gif"> <a href="">What is Internet?</a><br>
<img src="doss.gif"> <a href="">How to use it</a><br>
<img src="doss.gif"> <a href="template00.htm">Contact us</a><br>
<br>
<CENTER>A final remark before finishing</CENTER>
</div>
<div id="CadrePrincipal" style="position:absolute; left:8px; top:110px; width:490px; height:480px; background-color: #E2F4B7;
layer-background-color: #E2F4B7; border: 1px none #000000; padding: 12px" CLASS="Texte">
<img src="logo.gif" align=left>Author: <a href="">Dr Benton</a><BR>
Date: 01 / 01 / 1999<BR><BR>You can enter your text or insert images here.
</div>
To convince yourself of the efficiency of all these gymnastics,
check out the result one more time.