Team:UEA-JIC Norwich/experiment

From 2011.igem.org

(Difference between revisions)
 
(38 intermediate revisions not shown)
Line 4: 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 20: Line 20:
#left {
#left {
   position: absolute;
   position: absolute;
-
   left: 15px;
+
   left: 0px;
-
   top: 500px;
+
   top: 675px;
   width: 200px;
   width: 200px;
}
}
Line 31: Line 31:
#right {
#right {
   position: absolute;
   position: absolute;
-
   right: 15px;
+
   right: 0px;
-
   top: 500px;
+
   top: 675px;
   width: 200px;
   width: 200px;
}
}
Line 38: Line 38:
</head>
</head>
-
<body>
+
</body>
<div id="header">
<div id="header">
-
 
+
</html>
<html>
<html>
<head>
<head>
Line 335: Line 335:
</div>
</div>
</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