Introduction: Code Playground
More by the author:
About: Engineer making renewable energy products for African entrepreneurs.
The instructables admin really deserve an extra dimension of respect... they have elected to keep their site open thus bringing functionality to a whole new level. ***This feature has since been removed for completely rational and understandable reasons (see below)***
Before you flame on - I really don't care what you think. The purpose of this instructable is to seek out new functionality by utilizing the triple curly bracket "tag" -- {{{
Simply place an open and close triple curly bracket on separate lines and include whatever html, javascript and likely more inside (but not on the same line as the brackets).
Rules... Post the code without the brackets -- then post the code with the brackets to display. Should you find something amazingly great - I will add a step to the topic. Do explore areas that have not been tapped (I'm curious if CSS will work).
Before you flame on - I really don't care what you think. The purpose of this instructable is to seek out new functionality by utilizing the triple curly bracket "tag" -- {{{
Simply place an open and close triple curly bracket on separate lines and include whatever html, javascript and likely more inside (but not on the same line as the brackets).
Rules... Post the code without the brackets -- then post the code with the brackets to display. Should you find something amazingly great - I will add a step to the topic. Do explore areas that have not been tapped (I'm curious if CSS will work).
<table width="300px" border="0"><tr><td><font color="red" size="6">Should you have something that you <br>suspect will cause trouble (popups, <br>alerts, etc. etc.) PLEASE post it <br>under one of the steps labeled<br> "suspect code".<br><br> Also, do use common <br>sense -- making a request to the <br>database IMO is a no-no. <br>We don't want this feature taken down <br>due to user stupidity.</font></td></tr></table>
Step 1: External Image With Padding (simple Example)
<table style="border:1px solid orange;color:white;font-family:arial;" bgcolor=#000000>
<tr>
<td><img hspace="10" vspace="10" style="border:1px solid white;" src="http://i11.photobucket.com/albums/a166/Trebuchet03/P1020697Small.jpg"></td>
</tr>
<tr>
<td>Mystery Machine: Spotted near Tampa July 3rd, 2006</td>
</tr>
</table>
Should display a table containing an image with white borders and 10px padding all around. Text should be white and the table should have an orange border.
<tr>
<td><img hspace="10" vspace="10" style="border:1px solid white;" src="http://i11.photobucket.com/albums/a166/Trebuchet03/P1020697Small.jpg"></td>
</tr>
<tr>
<td>Mystery Machine: Spotted near Tampa July 3rd, 2006</td>
</tr>
</table>
Should display a table containing an image with white borders and 10px padding all around. Text should be white and the table should have an orange border.
<table style="border:2px solid orange;color:white;font-family:arial;" bgcolor=#000000> <tr> <td><img hspace="10" vspace="10" style="border:1px solid white;" src="http://i11.photobucket.com/albums/a166/Trebuchet03/P1020697Small.jpg"></td> </tr> <tr> <td>Mystery Machine: Spotted near Tampa July 3rd, 2006</td> </tr></table>
Step 2: Suspect Code 1
...
Step 3: Suspect Code 10
Step 4: Image Overlay
<div style="position: absolute; left: 0px; top: 0px; height: 86px; width: 333px; "><img src="http://i11.photobucket.com/albums/a166/Trebuchet03/constuctables.gif" ></div>
<div style="position: absolute; left: 0px; top: 0px; height: 86px; width: 333px; "><img src="http://i11.photobucket.com/albums/a166/Trebuchet03/constuctables.gif" ></div>