User:Tom Adie/Sandbox

From OpenWetWare
Jump to: navigation, search

<html> <style type="text/css"> .firstHeading {display: none;} </style> </html> <html> <style type="text/css">

   table.calendar          { margin:0; padding:2px; }

table.calendar td { margin:0; padding:1px; vertical-align:top; } table.month .heading td { padding:1px; background-color:#FFFFFF; text-align:center; font-size:120%; font-weight:bold; } table.month .dow td { text-align:center; font-size:110%; } table.month td.today { background-color:#3366FF } table.month td {

   border:2px;
   margin:0;
   padding:0pt 1.5pt;
   font-size:8pt;
   text-align:right;
   background-color:#FFFFFF;
   }
  1. bodyContent table.month a { background:none; padding:0 }

.day-active { font-weight:bold; } .day-empty { color:black; } </style> </html>

<html><script language="JavaScript">

var timeout = 250; var closetimer = 0; var ddmenuitem = 0;

// open hidden layer function mopen(id) { // cancel close timer mcancelclosetime(); // close old layer if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; // get new layer and show it ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; } // close showed layer function mclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; } // go close timer function mclosetime() { closetimer = window.setTimeout(mclose, timeout); } // cancel close timer function mcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null; } } // close layer when click-out //document.onclick = mclose; </script> <table background="http://i59.photobucket.com/albums/g305/Timpski/ToolbarBackground.png" style="color:#ffffff;" link="#ffffff" cellpadding="0" cellspacing="1" border="0" bordercolor="#ffffff" align="center" width="100%"><tr><td colspan="6" class="wetlab"><br><br><br></td></tr> <tr><td align="center" width="10%" valign="bottom"><ul id="sddm"><a href="http://openwetware.org/wiki/IGEM:IMPERIAL/2008/New/Home"> Home </a></ul> </td><td align="center" width="20%" valign="bottom"><ul id="sddm"><a href="#"

       onclick="mopen('m1')" 
       onmouseover="mopen('m1')" 
       onmouseout="mclosetime()">Biofabricator Subtilis</a>
       <div id="m1" 
           onmouseover="mcancelclosetime()" 
           onmouseout="mclosetime()">
       <a href="http://openwetware.org/wiki/IGEM:IMPERIAL/2008/New/Project">Project Specifications</a>
       <a href="http://openwetware.org/wiki/IGEM:IMPERIAL/2008/New/Chassis_1">Why B. subtilis?</a>
       <a href="http://openwetware.org/wiki/IGEM:IMPERIAL/2008/New/Chassis_2">B. subtilis: Benefits vs Challenges</a>
       </div></ul>

</td><td align="center" width="18%" valign="bottom"><ul id="sddm"><a href="#"

       onclick="mopen('m2')" 
       onmouseover="mopen('m2')" 
       onmouseout="mclosetime()">Wet Lab</a>
       <div id="m2" 
           onmouseover="mcancelclosetime()" 
           onmouseout="mclosetime()">
       <a href="http://openwetware.org/wiki/IGEM:IMPERIAL/2008/New/Wet_Lab">Wet Lab Hub</a>
       <a href="http://openwetware.org/wiki/IGEM:IMPERIAL/2008/New/Cloning_Strategy">Cloning Strategy</a>
       <a href="http://openwetware.org/wiki/IGEM:IMPERIAL/2008/New/Protocols">Experiments & Protocols</a>
       <a href="http://openwetware.org/wiki/IGEM:IMPERIAL/2008/New/Major_Results">Experimental Results</a>
       <a href="http://openwetware.org/wiki/IGEM:IMPERIAL/2008/New/BioBricks">BioBricks & Characterisation</a>
       </div></ul>

</td><td align="center" width="18%" valign="bottom"><ul id="sddm"><a href="#"

       onclick="mopen('m3')" 
       onmouseover="mopen('m3')" 
       onmouseout="mclosetime()">Dry Lab</a>
       <div id="m3" 
           onmouseover="mcancelclosetime()" 
           onmouseout="mclosetime()">
       <a href="http://openwetware.org/wiki/IGEM:IMPERIAL/2008/New/Dry_Lab">Dry Lab Hub</a>
       <a href="http://openwetware.org/wiki/IGEM:IMPERIAL/2008/New/Growth_Curve">Growth Curves</a>
       <a href="http://openwetware.org/wiki/IGEM:IMPERIAL/2008/New/Genetic_Circuit">Genetic Circuits</a>
       <a href="http://openwetware.org/wiki/IGEM:IMPERIAL/2008/New/Motility">Motility Analysis</a>
       <a href="http://openwetware.org/wiki/IGEM:IMPERIAL/2008/New/Appendices">Appendices - Code etc.</a>
       </div></ul>

</td><td align="center" width="17%" valign="bottom"><ul id="sddm"><a href="http://2008.igem.org/Team:Imperial_College/Notebook"> Notebook </a></ul> </td><td align="center" width="17%" valign="bottom"><ul id="sddm"><a href="http://openwetware.org/wiki/IGEM:IMPERIAL/2008/New/Team"> Our Team </a></ul> </td></tr></table></html>

<html><style type="text/css">

div.Section { font:11pt/16pt Calibri, Verdana, Arial, Geneva, sans-serif; background-image: url(http://openwetware.org/images/a/a0/Background.PNG); background-size: 100%; background-origin: content; }

/* Text (paragraphs) */ div.Section p { font:11pt/16pt Calibri, Verdana, Arial, Geneva, sans-serif; text-align:justify; margin-top:0px; margin-left:30px; margin-right:30px; }

/* Headings */ div.Section h1 { font:22pt Calibri, Verdana, Arial, Geneva, sans-serif; text-align:left; color:#3366FF; font-weight:bold; }

/* Subheadings */ div.Section h2 { font:18pt Calibri, Verdana, Arial, Geneva, sans-serif; color:#3366FF; margin-left:5px; font-weight:bold; }

/* Subsubheadings */ div.Section h3 { font:22pt Calibri, Verdana, Arial, sans-serif; color:#E5EBFF; margin-left:10px; font-weight:bold; }

/* Subsubsubheadings */ div.Section h4 { font:22pt Calibri, Verdana, Arial, sans-serif; color:#2B48B3; margin-left:10px; font-weight:bold; }

/* Subsubsubsubheadings */ div.Section h5 { font:12pt Calibri, Verdana, Arial, sans-serif; color:#3366FF; margin-left:20px; }

/* References */ div.Section h6 { font:12pt Calibri, Verdana, Arial, sans-serif; font-weight:bold; font-style:italic; color:#3366FF; margin-left:25px; }

/* Hyperlinks */ div.Section a { }

div.Section a:hover { }

/* Tables */ div.Section td { font:11pt/16pt Calibri, Verdana, Arial, Geneva, sans-serif; text-align:justify; vertical-align:top; padding:2px 4px 2px 4px; }

/* Lists */ div.Section li { font:11pt/16pt Calibri, Verdana, Arial, Geneva, sans-serif; text-align:left; margin-top:0px; margin-left:30px; margin-right:0px; }

/* TOC stuff */ table.toc { margin-left:10px; }

table.toc li { font: 11pt/16pt Calibri, Verdana, Arial, Geneva, sans-serif; text-align: justify; margin-top: 0px; margin-left:2px; margin-right:2px; }

/* [edit] links */ span.editsection { color:#BBBBBB; font-size:10pt; font-weight:normal; font-style:normal; vertical-align:bottom; }

span.editsection a { color:#BBBBBB; font-size:10pt; font-weight:normal; font-style:normal; vertical-align:bottom; }

span.editsection a:hover { color:#3366FF; font-size:10pt; font-weight:normal; font-style:normal; vertical-align:bottom; }

/* Drop-down Menu */

  1. sddm {

margin: 0; padding: 0; z-index: 30 margin: 0; padding: 0; float: center; font: bold 12pt Calibri, Verdana, Arial, Geneva, sans-serif; border: 0px; list-style: none; }

  1. sddm a {

display: block; margin: 0px 0px 0px 0px; padding: 0 0 12px 0; color: #FFFFFF; text-align: center; text-decoration: none; }

  1. sddm a:hover {

border: 0px }

  1. sddm div {

position: absolute; visibility: hidden; margin: 0; padding: 0; background: #66aadd; border: 1px solid #66aadd } #sddm div a { position: relative; left: 0; display: block; margin: 0; padding: 5px 10px; width: auto; white-space: nowrap; text-align: left; text-decoration: none; background: #FFFFFF; color: #2875DE; font: 11pt Calibri, Verdana, Arial, Geneva, sans-serif } #sddm div a:hover { background: #66aadd; color: #FFFFFF } </style></html>

loltitle

content content content

content, lol ahaha

more!

  • bullets?
  1. numbers?
    1. more numbers?

Done

Picturegoeshere


Title!

Content, which should hopefully be centered vertically...

Our design process

Title two

moar conteeeeeeeeent!!!!!!!!! So for this box we have no image on the right, how will this affect the text box? Will it be squished left?


<html><center><embed width=640px src="http://openwetware.org/images/5/52/Imperial_2008_Movie.mov"></embed></center></html>

<html><a href=""><img src="http://i59.photobucket.com/albums/g305/Timpski/PL.png"></a></html> <html><a href=""><img src="http://i59.photobucket.com/albums/g305/Timpski/RL.png"></a></html> <html><a href=""><img src="http://i59.photobucket.com/albums/g305/Timpski/GL.png"></a></html> <html><a href=""><img src="http://i59.photobucket.com/albums/g305/Timpski/TL.png"></a></html> <html><a href=""><img src="http://i59.photobucket.com/albums/g305/Timpski/TL.png"></a></html>

Drop down menu source

<html><SCRIPT LANGUAGE="JavaScript">

//Below is the code that pre-loads the graphics {

//These are the large images alt0 = new Image(); alt0.src = "http://i59.photobucket.com/albums/g305/Timpski/S0.png";

alt1 = new Image(); alt1.src = "http://i59.photobucket.com/albums/g305/Timpski/D1.png";

alt2 = new Image(); alt2.src = "http://i59.photobucket.com/albums/g305/Timpski/D2.png";

alt3 = new Image(); alt3.src = "http://i59.photobucket.com/albums/g305/Timpski/S1.png";

//These are the first button graphics

graphic1= new Image(); graphic1.src = "http://i59.photobucket.com/albums/g305/Timpski/PD.png"; graphic1on = new Image(); graphic1on.src = "http://i59.photobucket.com/albums/g305/Timpski/PL.png";

//These are the second button graphics

graphic2= new Image(); graphic2.src = "http://i59.photobucket.com/albums/g305/Timpski/RD.png"; graphic2on = new Image(); graphic2on.src = "http://i59.photobucket.com/albums/g305/Timpski/RL.png";

//These are the third button graphics

graphic3= new Image(); graphic3.src = "http://i59.photobucket.com/albums/g305/Timpski/GD.png"; graphic3on = new Image(); graphic3on.src = "http://i59.photobucket.com/albums/g305/Timpski/GL.png";

//These are the fourth button graphics

graphic4= new Image(); graphic4.src = "http://i59.photobucket.com/albums/g305/Timpski/TD.png"; graphic4on = new Image(); graphic4on.src = "http://i59.photobucket.com/albums/g305/Timpski/TL.png";

//This is the function that calls for //the change in the buttons

} function imageChange(imageID,imageName,imageID2,imageName2,imageID3,imageName3) {

{ document.images[imageID].src = eval(imageName + ".src"); document.images[imageID2].src = eval(imageName2 + ".src"); document.images[imageID3].src = eval(imageName3 + ".src"); document.images[imageID4].src = eval(imageName4 + ".src"); }

}

</SCRIPT></html>

Hi! Welcome to Imperial College's Biobricks and Characterisation hub. Below is the final construct we produced. If you want to know more about our system or the devices of which it is made, please click the links below to see characterisation information. More information about biobricks can be found by selecting them in the construct below (just put your mouse over a part!) and if you click them you'll be taken to their respective pages.

Section

<html><div id="top" style="position:absolute"><img src="http://i59.photobucket.com/albums/g305/Timpski/5D.png"><img src="http://i59.photobucket.com/albums/g305/Timpski/PD.png"><img src="http://i59.photobucket.com/albums/g305/Timpski/RD.png"><img src="http://i59.photobucket.com/albums/g305/Timpski/GD.png"><img src="http://i59.photobucket.com/albums/g305/Timpski/TTD.png"><img src="http://i59.photobucket.com/albums/g305/Timpski/3D.png"><img src="http://i59.photobucket.com/albums/g305/Timpski/5D.png"><img src="http://i59.photobucket.com/albums/g305/Timpski/PD.png"><img src="http://i59.photobucket.com/albums/g305/Timpski/RD.png"><img></div> <img src="http://i59.photobucket.com/albums/g305/Timpski/SL.png"></html>

<html><div id="top" style="position:absolute"><img src="http://i59.photobucket.com/albums/g305/Timpski/5D.png"><img src="http://i59.photobucket.com/albums/g305/Timpski/PD.png"><img src="http://i59.photobucket.com/albums/g305/Timpski/RD.png"><img src="http://i59.photobucket.com/albums/g305/Timpski/GD.png"><img src="http://i59.photobucket.com/albums/g305/Timpski/TTD.png"><img src="http://i59.photobucket.com/albums/g305/Timpski/3D.png"><img src="http://i59.photobucket.com/albums/g305/Timpski/5D.png"><img src="http://i59.photobucket.com/albums/g305/Timpski/PD.png"><img src="http://i59.photobucket.com/albums/g305/Timpski/RD.png"><img></div> <img src="http://i59.photobucket.com/albums/g305/Timpski/S2L.png"></html>


<html><TABLE border="0"> <TR><TD align="left"> <div id="top" style="position: absolute"> <A HREF="http://2008.igem.org/Team:Imperial_College/Part1" onMouseOver="imageChange('one','graphic1on')" onMouseOut="imageChange('one','graphic1')"> <IMG SRC="http://i59.photobucket.com/albums/g305/Timpski/TEST.png" NAME="one"></A>

<A HREF="http://2008.igem.org/Team:Imperial_College/Part2" onMouseOver="imageChange('two','graphic2on')" onMouseOut="imageChange('two','graphic2')"> <IMG SRC="http://i59.photobucket.com/albums/g305/Timpski/TEST.png" NAME="two"></A>

<A HREF="http://2008.igem.org/Team:Imperial_College/Part3" onMouseOver="imageChange('three','graphic3on')" onMouseOut="imageChange('three','graphic3')"> <IMG SRC="http://i59.photobucket.com/albums/g305/Timpski/GD.png" NAME="three"></A>

<A HREF="http://2008.igem.org/Team:Imperial_College/Part4" onMouseOver="imageChange('four','graphic4on')" onMouseOut="imageChange('four','graphic4')"> <IMG SRC="http://i59.photobucket.com/albums/g305/Timpski/TD.png" NAME="four"></A> </div> <IMG SRC="http://i59.photobucket.com/albums/g305/Timpski/TESTC.png" NAME="global"> </TD></TR> </TABLE></html>

<html>| <A HREF="http://2008.igem.org/Team:Imperial_College/Device1" onMouseOver="imageChange('global','alt1')" onMouseOut="imageChange('global','alt0')">Device 1: Promoter/RBS</A> | <A HREF="http://2008.igem.org/Team:Imperial_College/Device2" onMouseOver="imageChange('global','alt2')" onMouseOut="imageChange('global','alt0')">Device 2: epsE/Terminator</A> | <br><br>| <A HREF="http://2008.igem.org/Team:Imperial_College/System1" onMouseOver="imageChange('global','alt3')" onMouseOut="imageChange('global','alt0')">System 1: Clutch Mechanism</A> |</html>


<html><hr>

NOTE: Eventually we'll hopefully have this sort of thing set up for our full construct, as below...

<img width=100% src=http://i59.photobucket.com/albums/g305/Timpski/FullConstruct.png>

<hr></html>