Team:UEA-JIC Norwich/experiment

From 2011.igem.org

(Difference between revisions)
(Created page with " <html> <head> <title>Three Column CSS Layout with Header</title> <style type="text/css"> body { margin-top: 0; margin-bottom: 0; margin-left: 0; margin-right: 0; paddi...")
 
(45 intermediate revisions not shown)
Line 1: Line 1:
-
 
<html>
<html>
<head>
<head>
Line 5: Line 4:
<style type="text/css">
<style type="text/css">
-
body  
+
<body>
{ margin-top: 0;
{ margin-top: 0;
-
   margin-bottom: 0;
+
   margin-bottom:0px;
   margin-left: 0;
   margin-left: 0;
   margin-right: 0;
   margin-right: 0;
Line 15: Line 14:
#header {
#header {
-
   margin: 20px;
+
   margin: 0px;
-
   padding: 10px;
+
   padding: 0px;
-
   height: 100px;
+
   height: 600px;
}
}
#left {
#left {
   position: absolute;
   position: absolute;
-
   left: 15px;
+
   left: 0px;
-
   top: 160px;
+
   top: 675px;
   width: 200px;
   width: 200px;
}
}
Line 32: Line 31:
#right {
#right {
   position: absolute;
   position: absolute;
-
   right: 15px;
+
   right: 0px;
-
   top: 160px;
+
   top: 675px;
   width: 200px;
   width: 200px;
}
}
Line 39: Line 38:
</head>
</head>
-
<body>
+
</body>
<div id="header">
<div id="header">
 +
</html>
 +
<html>
 +
<head>
 +
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 +
    <title>University of East Anglia-JIC</title>
-
Your header will go here.  You can place images, text links, etc. in this div.  To change the properties of this div you can change the #header selector in the style sheet that is located on this page between the head tags.
 
 +
<script type="text/javascript"><!--
 +
var delay=7000
 +
var ie4=document.all
 +
var curindex=0
 +
var totalcontent=0
 +
function get_total(){
 +
if (ie4){
 +
while (eval("document.all.content"+totalcontent))
 +
totalcontent++
 +
}
 +
else{
 +
while (document.getElementById("content"+totalcontent))
 +
totalcontent++
 +
}
 +
}
 +
function contract_all(){
 +
for (y=0;y<totalcontent;y++){
 +
if (ie4)
 +
eval("document.all.content"+y).style.display="none"
 +
else
 +
document.getElementById("content"+y).style.display="none"
 +
}
 +
}
 +
function expand_one(which){
 +
contract_all()
 +
if (ie4)
 +
eval("document.all.content"+which).style.display=""
 +
else
 +
document.getElementById("content"+which).style.display=""
 +
}
 +
function rotate_content(){
 +
get_total()
 +
contract_all()
 +
expand_one(curindex)
 +
curindex=(curindex<totalcontent-1)? curindex+1: 0
 +
setTimeout("rotate_content()",delay)
 +
}
 +
window.onload=rotate_content
 +
//--></script>
 +
</head>
 +
 +
<style>
 +
body{
 +
background-color: #0B0719;
 +
font: 11px Arial;
 +
color: #FFFFFF;
 +
padding: 5px 5px 5px 5px;
 +
    }
 +
 +
b{
 +
color: #FFFFFF;
 +
}
 +
 +
.heading{
 +
color: #000;
 +
font: 14px century gothic;
 +
padding: 5px 5px 2px 5px;
 +
font-weight: bold;
 +
}
 +
 +
.titlebg{
 +
position: absolute;
 +
top: 0px;
 +
background-color: #000;
 +
width: 965px;
 +
height: 50px;
 +
  /* for IE */
 +
  filter:alpha(opacity=60);
 +
  /* CSS3 standard */
 +
  opacity:0.6;
 +
z-index:3;
 +
      }
 +
 +
.title{
 +
position: absolute;
 +
top: 0px;
 +
float: left;
 +
font: 35px Trebuchet MS;
 +
color: #FFF;
 +
padding-top: 5px;
 +
padding-left: 10px;
 +
z-index: 4;
 +
      }
 +
 +
.header{
 +
z-index: 1;
 +
position: absolute;
 +
top: 0px;
 +
height: 293px;
 +
    }
 +
 +
.menu{
 +
z-index: 5;
 +
position: absolute;
 +
top: 220px;
 +
font: 18px Trebuchet MS;
 +
text-align: center;
 +
          }
 +
 +
.menubg{
 +
position: absolute;
 +
top: 243px;
 +
background-color: #000000;
 +
width: 965px;
 +
height: 50px;
 +
  /* for IE */
 +
  filter:alpha(opacity=60);
 +
  /* CSS3 standard */
 +
  opacity:0.6;
 +
z-index:2;
 +
      }
 +
a:link{color:#fff;}
 +
a:visited{color:#fff;}
 +
a:active{color:#fff;}
 +
</style>
 +
 +
<body bgcolor="#FFFFFF">
 +
<body align:center>
 +
 +
 +
 +
<div class="header">
 +
<div class="titlebg">
 +
</div>
 +
<div class="title">
 +
UNIVERSITY OF EAST ANGLIA-JOHN INNES CENTRE
 +
</div>
 +
<div id="content0" style="display:none">
 +
<img src="https://static.igem.org/mediawiki/2011/0/03/Ziggurats_for_banner.jpg" width="965px" height="293px" border="0"></div>
 +
<div id="content1" style="display:none">
 +
<img src="https://static.igem.org/mediawiki/2011/d/db/JIC_AERIAL_VIEW_BANNER.jpg" width="965px" height="293px" border="0"></div>
 +
<div id="content2" style="display:none">
 +
<img src="https://static.igem.org/mediawiki/2011/0/09/CHLAMY_BANNER.jpg" width="965px" height="293px" border="0"></div>
 +
<div id="content3" style="display:none">
 +
<img src="https://static.igem.org/mediawiki/2011/d/db/Fountain_border.jpg" width="965px" height="293px" border="0"></div>
 +
<div id="content4" style="display:none">
 +
<img src="https://static.igem.org/mediawiki/2011/0/05/Physcomitrella_P.jpg " width="965px" height="293px" border="0">
</div>
</div>
 +
 +
<div class="menubg">
 +
</div>
 +
 +
<div class="menu">
 +
 +
<!--[if lt IE 7]>
 +
<script type="text/javascript">
 +
 +
sfHover = function() {
 +
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
 +
for (var i=0; i<sfEls.length; i++) {
 +
sfEls[i].onmouseover=function() {
 +
this.className+=" over";
 +
}
 +
sfEls[i].onmouseout=function() {
 +
this.className=this.className.replace(new RegExp(" over\\b"), "");
 +
}
 +
}
 +
}
 +
if (window.attachEvent) window.attachEvent("onload", sfHover);
 +
 +
</script>
 +
<![endif]-->
 +
<style type="text/css">
 +
/* general styling */
 +
*{margin:0;padding:0}
 +
body {
 +
font: x-small Verdana, Arial, Helvetica, sans-serif;
 +
text-align:left;
 +
padding:20px;
 +
}
 +
.outer{
 +
padding:0px 0 0 0;
 +
width:965px;
 +
margin:auto;
 +
position:relative;
 +
text-align:center;
 +
}
 +
 +
/* drop up */
 +
ul#nav,ul#nav ul {
 +
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
}
 +
ul#nav {
 +
width:965px;
 +
height:25px;
 +
 +
}
 +
 +
ul#nav li {
 +
position: relative;
 +
float: left;
 +
width:193px;
 +
height:25px;
 +
color:#fff;
 +
text-align:left;
 +
}
 +
ul#nav li a {
 +
text-decoration: none;
 +
color:#fff;
 +
     
 +
}
 +
#nav li ul {
 +
position: absolute;
 +
left: 0;
 +
top:-170px;
 +
margin-left:-999em;
 +
border:none;
 +
height:193px;
 +
width:193px;
 +
background:#000;
 +
/*opacity for IE5+*/
 +
  filter: alpha(opacity=60);
 +
  /*opacity for older Mozilla browsers*/
 +
  -moz-opacity: 0.6;
 +
  /*opacity for mozilla/safari*/
 +
  opacity: 0.6;
 +
}
 +
ul#nav li li{height:auto;border:none;}
 +
ul#nav li li a{
 +
color:#fff;
 +
padding:2px 5px 2px 5px;
 +
display:block;
 +
}
 +
ul#nav li:hover ul,
 +
ul#nav li.over ul {
 +
margin-left:0;
 +
}
 +
ul#nav li:hover,
 +
ul#nav li.over,
 +
ul#nav li:hover a,
 +
ul#nav li.over a {color:#000}
 +
 +
ul#nav li:hover li a,ul#nav li.over li a{color:#fff;}
 +
ul#nav li li a:hover{color:#000; background-color: #fff;}
 +
ul#nav li p {padding:0px;}
 +
ul#nav li.last,ul#nav li.last ul{border:none;width:193px;}
 +
 +
</style>
 +
 +
<div class="outer">
 +
 +
<ul id="nav">
 +
<li>
 +
<p><br/><a href="https://2011.igem.org/Team:UEA-JIC_Norwich">&nbsp;&nbsp;HOME</a></p>
 +
 +
 +
</li>
 +
<li>
 +
<p><br/><a href="https://2011.igem.org/Team:UEA-JIC_Norwich/Team">&nbsp;&nbsp;TEAM</a></p>
 +
 +
</li>
 +
<li>
 +
<p><br />
 +
<a href="#">&nbsp;&nbsp;PROJECT</a></p>
 +
<ul>
 +
<li><a href="https://2011.igem.org/Team:UEA-JIC_Norwich/Project">Project Overview</a></li>
 +
                                <li><a href="https://2011.igem.org/Team:UEA-JIC_Norwich/Nittygritty-algae">Algae</a></li>
 +
<li><a href="https://2011.igem.org/Team:UEA-JIC_Norwich/Nittygritty-moss">Moss</a></li>
 +
 +
</ul>
 +
</li>
 +
<li>
 +
<p><br />
 +
<a href="#">&nbsp;&nbsp;REGISTRY</a></p>
 +
<ul>
 +
<li><a href="https://2011.igem.org/Team:UEA-JIC_Norwich/Registryoverview">Overview</a></li>
 +
<li><a href="https://2011.igem.org/Team:UEA-JIC_Norwich/Registrycharacterisation">Characterisation</a></li>
 +
 +
</ul>
 +
</li>
 +
                <li class="last">
 +
<p><br />
 +
<a href="https://2011.igem.org/Team:UEA-JIC_Norwich/Methods">&nbsp;&nbsp;LAB</a></p>
 +
<ul>
 +
<li><a href="https://2011.igem.org/Team:UEA-JIC_Norwich/Methods">Methods</a></li>
 +
<li><a href="https://2011.igem.org/Team:UEA-JIC_Norwich/Notebook">Lab Journal</a></li>
 +
<li><a href="https://2011.igem.org/Team:UEA-JIC_Norwich/DaytoDay">Day to Day</a></li>
 +
<li><a href="https://2011.igem.org/Team:UEA-JIC_Norwich/Safety">Lab Safety</a></li>
 +
                           
 +
</ul>
 +
</li>
 +
</ul>
 +
</div>
 +
</div>
 +
</html>
 +
 +
 +
<html>
 +
<div id="leftbox" style="float:left; height:200px;  width:319px;" class="tophome">
 +
<div id="lefttop" style="background:#f87217; background-image:url('https://static.igem.org/mediawiki/2010/a/ad/Cam-Gradient-Overlay.png');" class="secheader"><a style="color:#7d1b7e !important" href="https://2011.igem.org/Team:UEA-JIC_Norwich/UKConference">UK Team Meet</a></div>
 +
<div id="leftcontent" style="background:-webkit-gradient(linear, left top, left bottom, from(#c35617), to(#fbb117));
 +
background: -moz-linear-gradient(top, #f2f2f2, #f8f8f8); color:#333333; height:150px;">
 +
<p style="line-height:140%; padding-left:10px; padding-top:10px; padding-right:10px;text-align:justify; font-size:90%;"> This year the UEA/JIC iGEM team was proud to host the Annual iGEM UK conference. The meet up provided a great opportunity to socialise with members from other teams, as well as find out how other teams were progressing and the kinds of directions their projects were taking. Click on the link above to find out more.</p>
 +
</div>
 +
</div>
 +
 +
<div id="cbox" style="float:left; height:200px;  width:319px; margin-left:5px;" class="tophome">
 +
<div id="ctop" style="background:#f535aa;background-image:url('https://static.igem.org/mediawiki/2010/a/ad/Cam-Gradient-Overlay.png')" class="secheader"><a style="color:#7d1b7e !important" href="https://2011.igem.org/Team:UEA-JIC_Norwich/Human_practices">Human Practices</a></div>
 +
<div id="ccontent" style="background:-webkit-gradient(linear, left top, left bottom, from(#f535aa), to(#b048b5));
 +
background: -moz-linear-gradient(top, #f2f2f2, #f8f8f8); color:#333333; height:150px;">
 +
<p style="line-height:140%; padding-left:10px; padding-top:10px; padding-right:10px;text-align:justify; font-size:90%;">For our Human Practices we wanted to find out whether Synthetic Biology was feared, and the reasons behind whether it was or not. Click on the link above to find out more.</a>.
 +
 +
<script>
 +
var dontclose=false;
 +
function displayGibson(youTubeURL){
 +
var newDiv = document.createElement('div');
 +
newDiv.setAttribute('id',"GibsonVidOverlay");
 +
newDiv.setAttribute('style',"width:100%;height:100%;background:black; position:fixed; left:0; top:0;z-index:100;  text-align:center; background:url(https://static.igem.org/mediawiki/2010/e/e9/Opacity9.png) ;");
 +
newDiv.setAttribute('onclick',";hideOverlay();");
 +
newDiv.innerHTML='<div style="margin-top:100px; z-index:1000;padding:10px; background:#080808;width:640px; margin-left: auto; margin-right:auto;" onclick="dontclose=true;"><object width="640" height="385"><param name="movie" value="'+youTubeURL+'"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="'+youTubeURL+'" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></div><a href="#" style="color:white !important; margin-top:20px; font-size:15px;" onclick="hideOverlay()">close</a>';
 +
$('body')[0].appendChild(newDiv);
 +
}
 +
function hideOverlay(){
 +
if(dontclose){
 +
dontclose=false;
 +
}
 +
else{
 +
$('body')[0].removeChild($('#GibsonVidOverlay')[0]);
 +
}
 +
}
 +
</script>
 +
</div>
 +
</div>
 +
 +
<div id="rightbox" style="float:left;  height:200px; margin-left:5px; width:319px;" class="tophome">
 +
<div id="rtop" style="background:#5cb3ff;background-image:url('https://static.igem.org/mediawiki/2010/a/ad/Cam-Gradient-Overlay.png')" class="secheader"><a style="color:#7d1b7e !important" href="https://2011.igem.org/Team:UEA-JIC_Norwich/Our_Sponsors">Our Sponsors</a></div>
 +
<div id="rcontent" style="background:-webkit-gradient(linear, left top, left bottom, from(#5cb3ff), to(#488ac7));
 +
background: -moz-linear-gradient(top, #f2f2f2, #f8f8f8); color:#333333; height:150px; margin-top:5px; position:relative;">
 +
<p style="line-height:140%; padding-left:10px; padding-top:10px; padding-right:10px;text-align:justify; font-size:90%;">We wanted to dedicate a page to all of the sponsors who made what we've achieved possible. Without their help we wouldn't have been able to achieve half of what we have. Thank you! Click on the link above to see who lent a hand</a>.
 +
</a>
 +
</div>
 +
</div>
 +
</html>
 +
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
<br>
 +
 +
<html>
 +
<body>
 +
<p>The University of East Anglia and the John Innes Centre are entering the iGEM competition for the first time! We
 +
are a team of nine students from a range of disciplines within Biology (as well as one chemist) supported by a long-suffering collaboration of advisors. We're based in
 +
the Norwich Research Park, and are using the facilities there to introduce a species of algae and a species of moss to iGEM for use as two new model organisms in the competition. For a full outline of our project and the reasons behind it, visit our "Aims" section. Follow us on Twitter and facebook too!
 +
</p>
 +
</body>
 +
</html>
 +
 +
 +
<br>
 +
<br>
 +
 +
<html>
<div id="left">
<div id="left">
-
Your left menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #left selector in the style sheet that is located on this page between the head tags.
+
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
 +
<script>
 +
new TWTR.Widget({
 +
  version: 2,
 +
  type: 'search',
 +
  search: 'UEAJIC_IGEM',
 +
  interval: 6000,
 +
  title: 'iGEM 2011',
 +
  subject: 'University of East Anglia-John Innes Centre',
 +
  width: 200,
 +
  height: 250,
 +
  theme: {
 +
    shell: {
 +
      background: '#8ec1da',
 +
      color: '#ffffff'
 +
    },
 +
    tweets: {
 +
      background: '#ffffff',
 +
      color: '#444444',
 +
      links: '#1985b5'
 +
    }
 +
  },
 +
  features: {
 +
    scrollbar: true,
 +
    loop: false,
 +
    live: true,
 +
    hashtags: true,
 +
    timestamp: true,
 +
    avatars: true,
 +
    toptweets: true,
 +
    behavior: 'all'
 +
  }
 +
}).render().start();
 +
</script>
</div>
</div>
 +
</html>
 +
<html>
<div id="center">
<div id="center">
-
All of your content goes in this div. This section is fluid so that if the window is collapsed, your div will collapse also and fit the screen perfectly.  To change the properties of this div you can change the #center selector in the style sheet that is located on this page between the head tags.
+
 
 +
 
 +
<iframe width="450" height="250" src="http://www.youtube.com/embed/CCJot4yiIxs" frameborder="0" allowfullscreen></iframe>
 +
 
 +
 
 +
 
</div>
</div>
 +
</html>
 +
 +
<html>
<div id="right">
<div id="right">
-
Your right menu will go here. You can place images, text links, etc. in this div. To change the properties of this div you can change the #right selector in the style sheet that is located on this page between the head tags.
+
<!-- Facebook Badge START --><a href="http://www.facebook.com/UEAJIC.iGEM" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="UEA JIC iGEM Team">UEA JIC iGEM Team</a><br/><a href="http://www.facebook.com/UEAJIC.iGEM" target="_TOP" title="UEA JIC iGEM Team"><img src="http://badge.facebook.com/badge/196910580348644.2296.1971053193.png" width="120" height="176" style="border: 0px;" /></a><br/><a href="http://www.facebook.com/business/dashboard/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Promote your Page too</a><!-- Facebook Badge END -->
</div>
</div>

Latest revision as of 09:11, 1 August 2011

Three Column CSS Layout with Header