Team:KULeuven/Zandbak/Home

From 2008.igem.org

(Difference between revisions)
m
 
(44 intermediate revisions not shown)
Line 1: Line 1:
-
{{:Team:KULeuven/Tools/Header}}
+
{{:Team:KULeuven/Tools/Navigation_Bar}}
-
 
+
-
<!-- Explaining the structure:
+
-
 
+
-
The homepage is divides into a main and a sidebar area, the sidebar is seen to the right, while the main area keeps to the left.
+
-
 
+
-
The main area is further divided by a header, containing the wellcome word, and the main-container, which will hold all the blocks (kuleuven, team, ...).
+
-
 
+
-
The sidebar is also divided into a sidebar-header and sidebar-content.
+
-
-->
+
-
 
+
<html lang="en">
<html lang="en">
Line 17: Line 7:
<!-- CSS -->
<!-- CSS -->
-
<style type="text/css" media="screen, projection">
+
<style type="text/css">
-
@import url(http://www.student.kuleuven.be/~s0173901/wiki/css/home.css);
+
@import url('http://www.student.kuleuven.be/~s0173901/wiki/css/experimental/home.css');
-
@import url(http://www.student.kuleuven.be/~s0173901/wiki/css/ui.tabs.css);
+
@import url('http://www.student.kuleuven.be/~s0173901/wiki/css/ui.menubar.css');
-
@import url(http://www.google.com/cse/api/branding.css);
+
@import url('http://www.student.kuleuven.be/~s0173901/wiki/css/experimental/ui.calendar.css');
 +
@import url('http://www.student.kuleuven.be/~s0173901/wiki/css/experimental/ui.tabs.css');
 +
        @import url('http://www.student.kuleuven.be/~s0160104/iGEM/teammap.css');
 +
        @import url('http://www.google.com/cse/api/branding.css');
#bioscenter-box {background: #5cc7dd;}
#bioscenter-box {background: #5cc7dd;}
Line 43: Line 36:
});
});
</script>
</script>
 +
<script language="JavaScript" type="text/javascript">
<script language="JavaScript" type="text/javascript">
function CngTxt(id,txt){
function CngTxt(id,txt){
Line 50: Line 44:
}
}
</script>
</script>
 +
<script type="text/javascript">
<script type="text/javascript">
Image1= new Image(665,499)
Image1= new Image(665,499)
Image1.src = "https://static.igem.org/mediawiki/2008/1/17/StudentsKULBlackWhite.JPG"
Image1.src = "https://static.igem.org/mediawiki/2008/1/17/StudentsKULBlackWhite.JPG"
</script>
</script>
-
</html>
 
-
__NOTOC__
+
<script type="text/javascript">
 +
function popup(mylink, windowname)
 +
{
 +
if (! window.focus)return true;
 +
var href;
 +
if (typeof(mylink) == 'string')
 +
  href=mylink;
 +
else
 +
  href=mylink.href;
 +
window.open(href, windowname, 'width=640,height=480,scrollbars=yes');
 +
return false;
 +
}
 +
</script>
 +
</html>
 +
 +
<!--
Work to be done:
Work to be done:
* Fill up the boxes with text and content!!
* Fill up the boxes with text and content!!
* Fun stuff
* Fun stuff
-
* IE fixes to tab areas!... DONE (Reminder: .ui-tabs-nav .ui-tabs-selected a had position: relative; not good!)
 
-
* Team image map: http://drupal.org/project/jq_maphilight... DONE (Maarten)
 
* Dilbert
* Dilbert
* Countdown/Number Visitors/...
* Countdown/Number Visitors/...
-
* Background images...
 
* Move css files internal
* Move css files internal
* ...
* ...
Global:
Global:
 +
* http://www.webdeveloper.com/forum/showthread.php?t=32317
 +
* http://ajaxian.com/archives/favicon-access-via-javascript
* Breadcrumb navigation?
* Breadcrumb navigation?
** [http://www.eastonmass.net/tullis/WebsiteNavigation/WebsiteNavigationPaper.htm A study of website navigation =P]
** [http://www.eastonmass.net/tullis/WebsiteNavigation/WebsiteNavigationPaper.htm A study of website navigation =P]
Line 77: Line 85:
* Wiki faq, tips and tricks for other teams?
* Wiki faq, tips and tricks for other teams?
* Global css file (h1, h2, ... p, ...): visit [[Team:KULeuven/Zandbak/Global]]
* Global css file (h1, h2, ... p, ...): visit [[Team:KULeuven/Zandbak/Global]]
-
** ul needs 1em more paddin-left;
+
** p needs 1em more padding-left
-
** Error: use of # in lists needs padding
+
** unknown error in project: input, yet not occuring in zandbak/global
-
** Error: concreties -> Project D
+
** tables need css -> class="wikitable"
-
** Error: concreties -> reset mechanism het prentje
+
** constantlactonasepictogram
-
** Error: project -> Summary needs img + img[float="left"]: margin-left: 0;
+
-
** Error: Components bar
+
-
** Error: h3 needs border-bottom applied to only span child element
+
-
** Remark: error in freezer
+
-
** Remark: images need extra padding to push back text
+
-
** Remark (unrelated): output icon modeling is small
+
* ...
* ...
 +
-->
 +
__NOTOC__
 +
<div id="home">
-
<div id="kul">
+
<html>
-
<!-- MAIN -->
+
<!-- HEADER -->
-
<div id="kul-main">
+
<div id="home-header">
-
<!-- MAIN HEADER -->
+
<!-- COUNTDOWN -->
-
<div id="kul-main-header">
+
<div class="countdown">
-
<h3>Wellcome to the KULeuven 2008 iGEM team page!</h3>
+
<embed src="http://www.oneplusyou.com/bb/files/countdown/countdown.swf?co=075A90&date_month=11&date_day=09&date_year=1&un=IGEM JAMBOREE 2008&size=normal&mo=11&da=09&yr=2008" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="240" height="80" wmode="transparent"></embed>
-
<p>
+
-
The ''2008 iGEM team of the Katholieke Universiteit Leuven'' works on '''a bacterial drug delivery system''', for instance for the production of a peptide such as vasoactive intestinal peptide as a potential treatment for Crohn's disease. The bacterial drug delivery system will have ''several advantages over classical drugs''. These are (a) the bacterium will produce the exact amount of drug necessary for each individual by means of a feedback control mechanism, (b) the bacterium will die upon a long symptomless period and (c) a possible development towards drugs being taken up in the bloodstream.
+
-
</p>
+
-
<p>
+
-
...
+
-
</p>
+
</div>
</div>
-
<!-- END MAIN HEADER -->
 
-
<html>
+
<h2>Wellcome to the KULeuven IGEM 2008 Homepage!</h2>
-
<!-- MAIN CONTAINER -->
+
<p>Enjoy the hard work we delivered, and feel free to contact us at <a href="mailto:igem@kuleuven.be?SUBJECT=IGEM 2008">igem@kuleuven.be</a></p>
-
<div id="kul-main-container">
+
 
-
<!-- MAIN CONTENT -->
+
</div>
-
<div id="kul-main-content">
+
 
 +
<!-- MAIN -->
 +
<div id="home-main">
 +
 
 +
<!-- CONTENT -->
 +
<div id="home-content">
-
<!-- BIOSCENTER BOX -->
+
<!-- CONTENT: BIOSCENTER -->
<div id="bioscenter-box">
<div id="bioscenter-box">
-
<h4>BioScenter</h4>
+
<h3>Synthetic Biology: BioSCENTer and iGEM</h3>
<ul>
<ul>
<li><a href="#bioscenter-1"><span>On Synthetic Biology</span></a></li>
<li><a href="#bioscenter-1"><span>On Synthetic Biology</span></a></li>
Line 119: Line 122:
</ul>
</ul>
 +
<!-- CONTENT: BIOSCENTER: SYNTHETIC BIOLOGY -->
<div id="bioscenter-1">
<div id="bioscenter-1">
<p>
<p>
-
<a href="http://syntheticbiology.org">Synthetic biology</a> is a new challenge in biosciences. It combines biology and engineering principles to design and build new biological functions and systems. Examples are abound: cancer cell invading bacteria, microbes that take pictures, antimalarial drug producers,... The advantage of using living systems for these purposes is that, once they are designed and built, they are self-reproducible. The challenge, however lies exactly within the design and construction: making biological circuits and devices as robust and predictive as their electrical counterparts. ...
+
<a href="http://syntheticbiology.org">Synthetic biology</a> is a new challenge in biosciences. It combines biology and engineering principles to design and build new biological functions and systems. Examples are abound: cancer cell invading bacteria, microbes that take pictures, antimalarial drug producers,... The advantage of using living systems for these purposes is that, once they are designed and built, they are self-reproducible. The challenge, however lies exactly within the design and construction: making biological circuits and devices as robust and predictive as their electrical counterparts. <a href="http://www.kuleuven.be/bioscenter/igem/?go=syntheticbiology">...</a>
</p>
</p>
-
<ul class="bioscenter" style="float: right; margin-right: 20px;">
+
<ul class="more">
<li><a href="http://www.kuleuven.be/bioscenter/igem/?go=syntheticbiology">Read the whole page</a></li>
<li><a href="http://www.kuleuven.be/bioscenter/igem/?go=syntheticbiology">Read the whole page</a></li>
</ul>
</ul>
</div>
</div>
 +
<!-- CONTENT: BIOSCENTER: IGEM -->
<div id="bioscenter-2">
<div id="bioscenter-2">
-
<img style="float: right; margin-right: 20px; margin-left: 10px; margin-bottom: 0; margin-top: 15px" src="https://static.igem.org/mediawiki/2008/1/1e/IGEM_logo_1.png" />
+
<img class="floatright" src="https://static.igem.org/mediawiki/2008/1/1e/IGEM_logo_1.png" />
<p>
<p>
The <a href="https://2008.igem.org">international Genetically Engineered Machine competition (iGEM) or iGEM competition</a> is a synthetic biology competition for multidisciplinary teams of undergraduate students. It was first organized in 2004 by Drew Endy, Randy Rettberg and Tom Knight of MIT with two goals in mind: to yield new ideas in synthetic biology and to form the future researchers in this new scientific community. Whereas 5 US teams competed in 2004, the 2007 edition already had 750 students and advisors grouped in 54 teams from 19 countries. This year, the competition already counts 83 teams!
The <a href="https://2008.igem.org">international Genetically Engineered Machine competition (iGEM) or iGEM competition</a> is a synthetic biology competition for multidisciplinary teams of undergraduate students. It was first organized in 2004 by Drew Endy, Randy Rettberg and Tom Knight of MIT with two goals in mind: to yield new ideas in synthetic biology and to form the future researchers in this new scientific community. Whereas 5 US teams competed in 2004, the 2007 edition already had 750 students and advisors grouped in 54 teams from 19 countries. This year, the competition already counts 83 teams!
Line 135: Line 140:
The core of the iGEM competition is to design and build a “new genetic machine” with <a href="http://partsregistry.org">BioBricks</a>. BioBricks are standardized, off the shelf biological parts that are used by genetic network designers. All BioBricks that were made during previous iGEM competitions are registered and documented in the Registry of Standard Biological Parts. Each iGEM competition thus starts from the efforts of the previous years.
The core of the iGEM competition is to design and build a “new genetic machine” with <a href="http://partsregistry.org">BioBricks</a>. BioBricks are standardized, off the shelf biological parts that are used by genetic network designers. All BioBricks that were made during previous iGEM competitions are registered and documented in the Registry of Standard Biological Parts. Each iGEM competition thus starts from the efforts of the previous years.
</p>
</p>
-
<ul class="bioscenter" style="float: right; margin-right: 20px;">
+
<ul class="more">
<li><a href="http://www.kuleuven.be/bioscenter/igem/?go=competition">Read the whole page</a></li>
<li><a href="http://www.kuleuven.be/bioscenter/igem/?go=competition">Read the whole page</a></li>
<li><a href="http://www.kuleuven.be/bioscenter/igem/?go=people2008">More on our team</a></li>
<li><a href="http://www.kuleuven.be/bioscenter/igem/?go=people2008">More on our team</a></li>
Line 142: Line 147:
</div>
</div>
-
<!-- END BIOSCENTER BOX -->
 
-
<!-- KULEUVEN BOX  -->
+
<!-- CONTENT: KULEUVEN -->
<div id="kuleuven-box">
<div id="kuleuven-box">
-
<h4>Leuven</h4>
+
<h3>Leuven</h3>
<ul>
<ul>
-
<li><a href="#kuleuven-1"><span>Leuven 1</span></a></li>
+
<li><a href="#kuleuven-1"><span>KULeuven</span></a></li>
-
<li><a href="#kuleuven-2"><span>Leuven 2</span></a></li>
+
-
<li><a href="#kuleuven-3"><span>Leuven 2</span></a></li>
+
</ul>
</ul>
-
 
+
<!-- CONTENT: KULEUVEN DESCRIPTION -->
<div id="kuleuven-1">
<div id="kuleuven-1">
-
This is the first kuleuven ...
+
<img class="floatright" width="300" heigth="300" src="https://static.igem.org/mediawiki/2008/5/59/Leuven_by_night.jpg" />
-
Testing...
+
-
 
+
-
</div>
+
-
 
+
-
<div id="kuleuven-2">
+
-
This is the second kuleuven box, totally click me...
+
-
</div>
+
-
 
+
-
<div id="kuleuven-3">
+
<p>
<p>
-
This is the first kuleuven ...
+
The University of Leuven was founded almost six hundred years ago. Throughout the centuries people have always occupied center stage at the <a href="http://www.kuleuven.be/english">Catholic University of Leuven</a>.
-
Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing... Testing...  
+
The University's academic fame has attracted scholars and scientists as Justus Lipsius, Gerard Mercator and Andreas Vesalius who have all made valuable contribution to the European intellectual life.
 +
The University of Leuven can look back on a glorious past, but it also moves with the times.
 +
The University's educational concept is modern, with research activities focused on the needs and aspirations of contemporary people and society.
 +
The University of Leuven is famous not just within the borders of Belgium, but far beyond as well. Being a very lively city of and for students, Leuven aspires to maintain that reputation. In contrast to most university cities, Leuven does not have a closed campus. The University buildings are spread throughout the city and were originally built for completely different purposes.
</p>
</p>
-
<img style="float: right;" src="https://static.igem.org/mediawiki/2008/e/e1/Leuven_Night.png"/>
+
</div>  
-
</div>
+
</div>
</div>
-
<!-- END KULEUVEN BOX -->
 
-
<!-- TEAM BOX -->
+
<!-- CONTENT: TEAM -->
<div id="team-box">
<div id="team-box">
-
<h4>The Team</h4>
+
<h3>The Team</h3>
<ul>
<ul>
<li><a href="#team-1"><span>Meet the team</span></a></li>
<li><a href="#team-1"><span>Meet the team</span></a></li>
</ul>
</ul>
 +
<!-- CONTENT: TEAM: IMAGE MAP -->
<div id="team-1">
<div id="team-1">
-
The KULeuven team consists of 12 enthusiastic students selected out of three faculties, 4 civil engineers, 4 bio-engineers and 4 biochemists.
+
<p>
-
 
+
The KULeuven team consists of 12 enthusiastic students selected out of three faculties, 4 civil engineers, 4 bio-engineers and 4 biochemists. More information on the team members can be found on the <a href="https://2008.igem.org/Team:KULeuven/Team/Students">Students homepage</a> or by scrolling over the heads of the students.
 +
</p>
<script>
<script>
function haxbackground(){
function haxbackground(){
Line 192: Line 188:
}
}
</script>
</script>
-
<style>
 
-
dl#cartoonmap{
 
-
background:url('https://static.igem.org/mediawiki/2008/5/57/StudentsKUL.JPG') transparent top left no-repeat;
 
-
display:block;
 
-
position:relative;
 
-
width:665px;
 
-
height:499px;
 
-
margin:0px;
 
-
 
-
border:none;
 
-
        z-index: 200;
 
-
}
 
-
dl#cartoonmap dt{
 
-
display:none;
 
-
}
 
-
 
-
/* Common stuff between links */
 
-
dl#cartoonmap dd a{
 
-
position:absolute;
 
-
 
-
border: 1px dashed silver;
 
-
text-decoration: none;
 
-
}
 
-
dl#cartoonmap dd a span{
 
-
display:none;
 
-
}
 
-
 
-
/* link positions (x,y,w,h) */
 
-
dl#cartoonmap dd#maarten a{ left:112px; bottom:312px; width:45px; height:45px; }
 
-
dl#cartoonmap dd#nick a{ left:178px; bottom:300px; width:45px; height:45px; }
 
-
dl#cartoonmap dd#benjamien a{ left:240px; bottom:300px; width:45px; height:45px; }
 
-
dl#cartoonmap dd#stefanie a{ left:275px; bottom:262px; width:45px; height:45px; }
 
-
dl#cartoonmap dd#dries a{ left:302px; bottom:295px; width:45px; height:45px; }
 
-
dl#cartoonmap dd#andim a{ left:333px; bottom:275px; width:45px; height:45px; }
 
-
dl#cartoonmap dd#hanne a{ left:357px; bottom:294px; width:45px; height:45px; }
 
-
dl#cartoonmap dd#elke a{ left:382px; bottom:275px; width:45px; height:45px; }
 
-
dl#cartoonmap dd#jan a{ left:412px; bottom:300px; width:45px; height:45px; }
 
-
dl#cartoonmap dd#nathalie a{ left:435px; bottom:275px; width:45px; height:45px; }
 
-
dl#cartoonmap dd#jonas a{ left:470px; bottom:298px; width:45px; height:45px; }
 
-
dl#cartoonmap dd#antoine a{ left:515px; bottom:300px; width:45px; height:45px; }
 
-
 
-
/* link hover doings */
 
-
dl#cartoonmap dd a:hover{
 
-
border-style:solid;
 
-
border-width:3px;
 
-
background:url('https://static.igem.org/mediawiki/2008/5/57/StudentsKUL.JPG') transparent top left no-repeat;
 
-
}
 
-
/* colored borders! */
 
-
dl#cartoonmap dd#maarten a:hover, dl#cartoonmap dd#maarten a:hover span, dl#cartoonmap dd#maarten a:hover span div.first{  border-color:darkblue; }
 
-
dl#cartoonmap dd#nick a:hover, dl#cartoonmap dd#nick a:hover span, dl#cartoonmap dd#nick a:hover span div.first{ border-color:darkblue; }
 
-
dl#cartoonmap dd#benjamien a:hover, dl#cartoonmap dd#benjamien a:hover span, dl#cartoonmap dd#benjamien a:hover span div.first{ border-color:darkblue; }
 
-
dl#cartoonmap dd#stefanie a:hover, dl#cartoonmap dd#stefanie a:hover span, dl#cartoonmap dd#stefanie a:hover span div.first{ border-color:darkblue; }
 
-
dl#cartoonmap dd#dries a:hover, dl#cartoonmap dd#dries a:hover span, dl#cartoonmap dd#dries a:hover span div.first{ border-color:darkblue; }
 
-
dl#cartoonmap dd#andim a:hover, dl#cartoonmap dd#andim a:hover span, dl#cartoonmap dd#andim a:hover span div.first{ border-color:darkblue; }
 
-
dl#cartoonmap dd#hanne a:hover, dl#cartoonmap dd#hanne a:hover span, dl#cartoonmap dd#hanne a:hover span div.first{ border-color:darkblue; }
 
-
dl#cartoonmap dd#elke a:hover, dl#cartoonmap dd#elke a:hover span, dl#cartoonmap dd#elke a:hover span div.first{ border-color:darkblue; }
 
-
dl#cartoonmap dd#jan a:hover, dl#cartoonmap dd#jan a:hover span, dl#cartoonmap dd#jan a:hover span div.first{ border-color:darkblue; }
 
-
dl#cartoonmap dd#nathalie a:hover, dl#cartoonmap dd#nathalie a:hover span, dl#cartoonmap dd#nathalie a:hover span div.first{ border-color:darkblue; }
 
-
dl#cartoonmap dd#jonas a:hover, dl#cartoonmap dd#jonas a:hover span, dl#cartoonmap dd#jonas a:hover span div.first{ border-color:darkblue; }
 
-
dl#cartoonmap dd#antoine a:hover, dl#cartoonmap dd#antoine a:hover span, dl#cartoonmap dd#antoine a:hover span div.first{ border-color:darkblue; }
 
-
 
-
dl#cartoonmap dd#maarten a:hover span div.first {background:#3366FF; color:#000;}
 
-
dl#cartoonmap dd#nick a:hover span div.first {background:#3366FF; color:#000;}
 
-
dl#cartoonmap dd#benjamien a:hover span div.first {background:#3366FF; color:#000;}
 
-
dl#cartoonmap dd#stefanie a:hover span div.first {background:#3366FF; color:#000;}
 
-
dl#cartoonmap dd#dries a:hover span div.first {background:#3366FF; color:#000;}
 
-
dl#cartoonmap dd#andim a:hover span div.first {background:#3366FF; color:#000;}
 
-
dl#cartoonmap dd#hanne a:hover span div.first {background:#3366FF; color:#000;}
 
-
dl#cartoonmap dd#elke a:hover span div.first {background:#3366FF; color:#000;}
 
-
dl#cartoonmap dd#jan a:hover span div.first {background:#3366FF; color:#000;}
 
-
dl#cartoonmap dd#nathalie a:hover span div.first {background:#3366FF; color:#000;}
 
-
dl#cartoonmap dd#jonas a:hover span div.first {background:#3366FF; color:#000;}
 
-
dl#cartoonmap dd#antoine a:hover span div.first {background:#3366FF; color:#000;}
 
-
 
-
/* subsequent hover positions (change when link positions change) (-left,h-imgH) */
 
-
dl#cartoonmap dd#maarten a:hover{ background-position:-114px -140px; }
 
-
dl#cartoonmap dd#nick a:hover{ background-position:-180.5px -152px; }
 
-
dl#cartoonmap dd#benjamien a:hover{ background-position:-242.5px -152px; }
 
-
dl#cartoonmap dd#stefanie a:hover{ background-position:-277px -190px; }
 
-
dl#cartoonmap dd#dries a:hover{ background-position:-304px -157px; }
 
-
dl#cartoonmap dd#andim a:hover{ background-position:-335px -177px; }
 
-
dl#cartoonmap dd#hanne a:hover{ background-position:-359px -158px; }
 
-
dl#cartoonmap dd#elke a:hover{ background-position:-384px -177px; }
 
-
dl#cartoonmap dd#jan a:hover{ background-position:-414px -152px; }
 
-
dl#cartoonmap dd#nathalie a:hover{ background-position:-437px -177px; }
 
-
dl#cartoonmap dd#jonas a:hover{ background-position:-472px -153.5px; }
 
-
dl#cartoonmap dd#antoine a:hover{ background-position:-517px -152px; }
 
-
 
-
/*
 
-
put=new-old puttop=new-(imageheight-(bottom+height))
 
-
*/
 
-
dl#cartoonmap dd a:hover span{
 
-
display:block;
 
-
position:absolute;
 
-
 
-
width:200px;
 
-
height:200px;
 
-
 
-
border-width:&px;
 
-
border-style:solid;
 
-
 
-
color:black;
 
-
background-color:white;
 
-
 
-
        z-index: 100;
 
-
}
 
-
dl#cartoonmap dd a:hover span div.first{
 
-
display:block;
 
-
font-size:120%;
 
-
font-weight:bold;
 
-
padding:2px;
 
-
text-align:left;
 
-
border-bottom:1px solid;
 
-
}
 
-
dl#cartoonmap dd a:hover span div.rest{
 
-
font-size:10pt;
 
-
font-face:Arial;
 
-
margin-left:0.5em;
 
-
        text-align:left;
 
-
}
 
-
dl#cartoonmap dd#maarten a:hover span{
 
-
left:330px;
 
-
top:150px;
 
-
       
 
-
}
 
-
dl#cartoonmap dd#nick a:hover span{
 
-
left:264px;
 
-
top:138px;
 
-
}
 
-
dl#cartoonmap dd#benjamien a:hover span{
 
-
left:202px;
 
-
top:138px;
 
-
}
 
-
dl#cartoonmap dd#stefanie a:hover span{
 
-
left:167px;
 
-
top:100px;
 
-
}
 
-
dl#cartoonmap dd#dries a:hover span{
 
-
left:140px;
 
-
top:133px;
 
-
}
 
-
dl#cartoonmap dd#andim a:hover span{
 
-
left:109px;
 
-
top:113px;
 
-
}
 
-
dl#cartoonmap dd#hanne a:hover span{
 
-
left:-345px;
 
-
top:132px;
 
-
}
 
-
dl#cartoonmap dd#elke a:hover span{
 
-
left:-370px;
 
-
top:113px;
 
-
}
 
-
dl#cartoonmap dd#jan a:hover span{
 
-
left:-400px;
 
-
top:138px;
 
-
}
 
-
dl#cartoonmap dd#nathalie a:hover span{
 
-
left:-423px;
 
-
top:113px;
 
-
}
 
-
dl#cartoonmap dd#jonas a:hover span{
 
-
left:-458px;
 
-
top:136px;
 
-
}
 
-
dl#cartoonmap dd#antoine a:hover span{
 
-
left:-503px;
 
-
top:138px;
 
-
}
 
-
 
-
/* Others that don't fit into a pattern */
 
-
dl#cartoonmap dd#banner span img{
 
-
position:absolute;
 
-
left:183px;
 
-
top:13px;
 
-
width:600px;
 
-
height:200px;
 
-
 
-
/* For preloading purposes only */
 
-
background:url('https://static.igem.org/mediawiki/2008/1/17/StudentsKULBlackWhite.JPG') transparent no-repeat;
 
-
background-position:-800px -800px;
 
-
}
 
-
 
-
 
-
</style>
 
<dl id="cartoonmap">
<dl id="cartoonmap">
Line 458: Line 269:
</div>
</div>
-
<!-- END TEAM BOX -->
 
-
<!-- PROJECT BOX -->
+
<!-- CONTENT: PROJECT -->
<div id="project-box">
<div id="project-box">
-
<h4>The Project</h4>
+
<h3>The Project</h3>
<ul>
<ul>
<li><a href="#project-1"><span>Project</span></a></li>
<li><a href="#project-1"><span>Project</span></a></li>
</ul>
</ul>
 +
<!-- CONTENT: PROJECT: SUBSYSTEMS -->
<div id="project-1">
<div id="project-1">
-
Project info comes here...
+
<p>
 +
Our team’s project is Dr. Coli, an E. coli bacterium that produces a drug when and where it is needed in the human body. It does this in an intelligent way, such that the drug production meets the individual patient’s needs. And when the patient is cured, Dr. Coli eliminates itself from the body. To achieve this goal we divided our project into several subsystems. A detailed description about every subsystem can be found by clicking on one of the following pictograms.
<br>
<br>
-
... Our project consists of several subsystems. A detailed description about every subsystem can be found by clicking on one of the following pictograms
+
<center>
-
<br>
+
-
 
+
<a href="https://2008.igem.org/Team:KULeuven/Project/Input">
<a href="https://2008.igem.org/Team:KULeuven/Project/Input">
-
<img src="https://static.igem.org/mediawiki/2008/a/a9/Pictogram_input.png" width="40" height="40"
+
<img src="https://static.igem.org/mediawiki/2008/a/a9/Pictogram_input.png" width="50" height="50"
onmouseover="CngTxt('Txt','<b>INPUT:</b> <br> The input mechanism makes use of the red light detector, used because of the possibility of easy and rapid switching between ON and OFF state. This input serves as a dummy input for e.g. inflammation signaling molecules.')"
onmouseover="CngTxt('Txt','<b>INPUT:</b> <br> The input mechanism makes use of the red light detector, used because of the possibility of easy and rapid switching between ON and OFF state. This input serves as a dummy input for e.g. inflammation signaling molecules.')"
onmouseout="CngTxt('Txt')"
onmouseout="CngTxt('Txt')"
></a>
></a>
<a href="https://2008.igem.org/Team:KULeuven/Project/Output">
<a href="https://2008.igem.org/Team:KULeuven/Project/Output">
-
<img src="https://static.igem.org/mediawiki/2008/d/db/Pictogram_output.png" width="40" height="40"
+
<img src="https://static.igem.org/mediawiki/2008/d/db/Pictogram_output.png" width="50" height="50"
onmouseover="CngTxt('Txt','<b>OUTPUT:</b> <br> GFP is an easy-to-measure output mechanism. To lower the stability of GFP, the C-terminal LVA tag is applied. This output serves as a dummy output for e.g. peptide drugs.')"
onmouseover="CngTxt('Txt','<b>OUTPUT:</b> <br> GFP is an easy-to-measure output mechanism. To lower the stability of GFP, the C-terminal LVA tag is applied. This output serves as a dummy output for e.g. peptide drugs.')"
onmouseout="CngTxt('Txt')"
onmouseout="CngTxt('Txt')"
Line 485: Line 295:
</a>
</a>
<a href="href="https://2008.igem.org/Team:KULeuven/Project/Filter">
<a href="href="https://2008.igem.org/Team:KULeuven/Project/Filter">
-
<img src="https://static.igem.org/mediawiki/2008/e/ed/Pictogram_filter.png" width="40" height="40"
+
<img src="https://static.igem.org/mediawiki/2008/e/ed/Pictogram_filter.png" width="50" height="50"
onmouseover="CngTxt('Txt','<b>FILTER:</b> <br> The filter system is made to make the system irresponsive to background input. We do not want Dr. Coli to react on noise signals. The filter makes use of a coherent feed-forward loop with AND-gate, based on T7 RNA polymerase and the RiboKey/-Lock system.')"
onmouseover="CngTxt('Txt','<b>FILTER:</b> <br> The filter system is made to make the system irresponsive to background input. We do not want Dr. Coli to react on noise signals. The filter makes use of a coherent feed-forward loop with AND-gate, based on T7 RNA polymerase and the RiboKey/-Lock system.')"
onmouseout="CngTxt('Txt')"
onmouseout="CngTxt('Txt')"
Line 491: Line 301:
</a>
</a>
<a href="https://2008.igem.org/Team:KULeuven/Project/Inverter">
<a href="https://2008.igem.org/Team:KULeuven/Project/Inverter">
-
<img src="https://static.igem.org/mediawiki/2008/e/e7/Pictogram_inverter.png" width="40" height="40"
+
<img src="https://static.igem.org/mediawiki/2008/e/e7/Pictogram_inverter.png" width="50" height="50"
-
onmouseover="CngTxt('Txt','<b>INVERTER:</b> <br> For some of the following subsystems, an inverter is needed. It is based on a promoter repressor and also makes use of a C-terminal LVA tag for better responsiveness of the system. This was proven necessary by rigorous modelling.')"
+
onmouseover="CngTxt('Txt','<b>INVERTIMER:</b> <br> For some of the following subsystems, an inverter is needed. It is based on a promoter repressor and also makes use of a C-terminal LVA tag for better responsiveness of the system. This was proven necessary by rigorous modelling.')"
onmouseout="CngTxt('Txt')"
onmouseout="CngTxt('Txt')"
>
>
</a>
</a>
<a href="https://2008.igem.org/Team:KULeuven/Project/Reset">
<a href="https://2008.igem.org/Team:KULeuven/Project/Reset">
-
<img src="https://static.igem.org/mediawiki/2008/e/ed/Pictogram_reset.png" width="40" height="40"
+
<img src="https://static.igem.org/mediawiki/2008/e/ed/Pictogram_reset.png" width="50" height="50"
-
onmouseover="CngTxt('Txt','<b>RESET:</b> <br> When input re-emerges during the self-elimination process, the dying process is stopped and resetted. This will allow Dr. Coli to come back from its decision of no longer being needed.')"
+
onmouseover="CngTxt('Txt','<b>RESET:</b> <br> When input re-emerges during the self-elimination process, the dying process is stopped and reset. This will allow Dr. Coli to come back from its decision of no longer being needed.')"
onmouseout="CngTxt('Txt')"
onmouseout="CngTxt('Txt')"
>
>
</a>
</a>
<a href="https://2008.igem.org/Team:KULeuven/Project/CellDeath">
<a href="https://2008.igem.org/Team:KULeuven/Project/CellDeath">
-
<img src="https://static.igem.org/mediawiki/2008/c/c6/Pictogram_celldeath.png" width="40" height="40"
+
<img src="https://static.igem.org/mediawiki/2008/c/c6/Pictogram_celldeath.png" width="50" height="50"
onmouseover="CngTxt('Txt','<b>CELL DEATH:</b> <br> After a longer period without input signal, Dr. Coli decides to stop living because he feels himself no longer necessary. And in fact, as the patient is now cured, he is no longer of any need to the patient.')"
onmouseover="CngTxt('Txt','<b>CELL DEATH:</b> <br> After a longer period without input signal, Dr. Coli decides to stop living because he feels himself no longer necessary. And in fact, as the patient is now cured, he is no longer of any need to the patient.')"
onmouseout="CngTxt('Txt')"
onmouseout="CngTxt('Txt')"
Line 509: Line 319:
</a>
</a>
<a href="https://2008.igem.org/Team:KULeuven/Project/Memory">
<a href="https://2008.igem.org/Team:KULeuven/Project/Memory">
-
<img src="https://static.igem.org/mediawiki/2008/c/c2/Pictogram_memory.png" width="40" height="40"
+
<img src="https://static.igem.org/mediawiki/2008/c/c2/Pictogram_memory.png" width="50" height="50"
onmouseover="CngTxt('Txt','<b>MEMORY:</b> <br> As Dr. Coli does not want to die from the moment he is born, he can memorize whether he has already been active or not. If not, he will not die without input signal, thus being able to live previous to encoutering illness.')"
onmouseover="CngTxt('Txt','<b>MEMORY:</b> <br> As Dr. Coli does not want to die from the moment he is born, he can memorize whether he has already been active or not. If not, he will not die without input signal, thus being able to live previous to encoutering illness.')"
onmouseout="CngTxt('Txt')"
onmouseout="CngTxt('Txt')"
Line 518: Line 328:
#Txt {color:darkblue;}
#Txt {color:darkblue;}
</style>
</style>
-
<div id="Txt" style="width:300px;height:120px;border:solid darkblue 1px;"><br>scroll over the pictograms to get a short description or click on them to go to the corresponding page</font></div>
+
<br>
-
 
+
<br>
 +
<div id="Txt" style="width:350px;height:120px;border:solid darkblue 1px"><br>scroll over the pictograms to get a short description or click on them to go to the corresponding page</font></div>
 +
</center>
 +
</p>
</div>
</div>
 +
</div>
</div>
-
<!-- END PROJECT BOX -->
 
-
<!-- MODELING BOX -->
+
<!-- CONTENT: MODELING -->
<div id="modeling-box">
<div id="modeling-box">
-
<h4>Modeling</h4>
+
<h3>Modeling</h3>
<ul>
<ul>
<li><a href="#modeling-3"><span>Introducing engineering</span></a></li>
<li><a href="#modeling-3"><span>Introducing engineering</span></a></li>
Line 533: Line 346:
</ul>
</ul>
 +
<!-- CONTENT: MODELING: MODEL -->
<div id="modeling-1">
<div id="modeling-1">
<img align="center" src="http://dilbert.com/dyn/str_strip/000000000/00000000/0000000/000000/10000/1000/100/10797/10797.strip.gif" border="0" />
<img align="center" src="http://dilbert.com/dyn/str_strip/000000000/00000000/0000000/000000/10000/1000/100/10797/10797.strip.gif" border="0" />
</div>
</div>
 +
 +
<!-- CONTENT: MODELING: PARAMETERS -->
<div id="modeling-2">
<div id="modeling-2">
<img src="http://dilbert.com/dyn/str_strip/000000000/00000000/0000000/000000/00000/5000/500/5652/5652.strip.gif" border="0" />
<img src="http://dilbert.com/dyn/str_strip/000000000/00000000/0000000/000000/00000/5000/500/5652/5652.strip.gif" border="0" />
</div>
</div>
 +
<!-- CONTENT: MODELING: ENGINEERING -->
<div id="modeling-3">
<div id="modeling-3">
-
<img src="http://dilbert.com/dyn/str_strip/000000000/00000000/0000000/000000/00000/8000/800/8718/8718.strip.gif" border="0" />
+
<img class="floatright" width="140" heigth="170" src="https://static.igem.org/mediawiki/2008/4/4e/Model_homepage.PNG" />
 +
<p>
 +
The most important assets of our project are the different control mechanisms. Since these are very much dependent on kinetic and other constants, Dr. Coli heavily relies on proper <a href="https://2008.igem.org/Team:KULeuven/Model/Overview">modeling</a>. Our Dry-Lab team has spend its summer setting up a computational model of Dr. Coli to completely simulate his actions. We constructed models of all the subsystems (components) in both CellDesigner and Matlab. All these subsystems have been characterised by their ODE's and have been simulated thoroughly. Together they form our <a href="https://2008.igem.org/Team:KULeuven/Model/FullModel">full model</a> of Dr. Coli. These models are only capable of simulating the behaviour of 1 Dr. Coli cell, so we implemented our own Software Tool that can work with <a href="https://2008.igem.org/Team:KULeuven/Model/MultiCell">multi cellular models</a>.
 +
</p>
</div>
</div>
</div>
</div>
-
<!-- END MODELING BOX -->
+
 
 +
</div><!-- END CONTENT -->
</div>
</div>
-
<!-- END MAIN CONTENT -->
 
-
</div>
 
-
<!-- END MAIN CONTAINER -->
 
</html>
</html>
 +
<!-- SIDEBAR -->
 +
<div id="home-sidebar">
 +
 +
<!-- SIDEBAR: INTERESTING LINKS -->
 +
<div class="sidebox">
 +
<h3>Interesting Links</h3>
 +
<ul class="external-links">
 +
<li>[http://www.nature.com/nature/comics/syntheticbiologycomic/index.html Synthetic Biology comic]</li>
 +
<li>[http://partsregistry.org/Main_Page Registry of Standard Biological Parts]</li>
 +
<li>[http://www.kuleuven.be/bioscenter BioSCENTer]</li>
 +
</ul>
</div>
</div>
-
<!-- END MAIN -->
 
-
<!-- SIDEBAR -->
+
<!-- SIDEBAR: FUN STUFF -->
-
<div id="kul-sidebar">
+
<div class="sidebox fun-stuff">
-
 
+
<h3>Fun Stuff</h3>
-
<!-- SIDEBAR HEADER -->
+
-
<div id="kul-sidebar-header">
+
<html>
<html>
-
<object type="application/x-shockwave-flash" data="http://www.oneplusyou.com/bb/files/countdown/countdown.swf?co=075A90&bgcolor=CCC7DD&date_month=11&date_day=07&date_year=1&un=IGEM JAMBOREE 2008&size=normal&mo=11&da=07&yr=2008" width="261" height="80"><param name="movie" value="http://www.oneplusyou.com/bb/files/countdown/countdown.swf?co=075A90&bgcolor=CCC7DD&date_month=11&date_day=07&date_year=1&un=IGEM JAMBOREE 2008&size=normal&mo=11&da=07&yr=2008" /><param name="bgcolor" value="#FFF" /></object>
+
<p>
 +
<a href="http://student.kuleuven.be/~s0160104/iGEM/pairs.html" onClick="return popup(this,'notes')"><img src="https://static.igem.org/mediawiki/2008/e/e5/Bacteria_pairs.PNG">Bacteria Pairs</a>
 +
</p>
 +
 
 +
<p>
 +
<a href="http://student.kuleuven.be/~s0160104/iGEM/bacteriasolitaire.html" onClick="return popup(this,'notes')"><img src="https://static.igem.org/mediawiki/2008/d/d9/Bacteria_solitaire.PNG">Bacteria Solitaire</a>
 +
</p>
 +
 
 +
<p>
 +
<a href="http://nobelprize.org/educational_games/medicine/dna_double_helix/dnahelix.html" target="blank"><img src="https://static.igem.org/mediawiki/2008/1/1b/Helix-intro.png"> Double Helix</a>
 +
</p>
 +
 
 +
<ul class="general-links">
 +
<li><a href="http://www.youtube.com/watch?v=x5yPkxCLads" target="blank">PCR song</a></li>
 +
</ul>
 +
 
</html>
</html>
 +
</div>
</div>
-
<!-- END SIDEBAR HEADER -->
 
-
<!-- SIDEBAR CONTENT -->
+
<!-- SIDEBAR: NOTEBOOK -->
-
<div id="kul-sidebar-content">
+
<div class="sidebox">
 +
<h3>Notebook ({{CURRENTMONTHNAME}})</h3>
 +
<div>
 +
{{#calendar:query=preload=:Team:KULeuven/Tools/New_Day|title=Team:KULeuven|year=2008|month={{CURRENTMONTH}} }}
 +
</div>
 +
</div>
-
<!-- FUN STUFF -->
+
<!-- SIDEBAR: GOOGLE(CUSTOM SEARCH) -->
-
<div class="sidebox external">
+
<html>
-
<h3>Fun Stuff</h3>
+
<div class="cse-branding-bottom" style="background-color:#FFFFFF;color:#000000">
-
</div>
+
Search in our wiki pages:
-
<!-- END FUN STUFF -->
+
-
<!-- INTERESTING LINKS -->
+
<div class="cse-branding-form">
-
<div class="sidebox">
+
<form action="http://www.google.com/cse" id="cse-search-box">
-
<h3>Interesting Links</h3>
+
-
<ul class="external">
+
-
<li>[http://www.nature.com/nature/comics/syntheticbiologycomic/index.html Synthetic Biology comic]</li>
+
-
<li>[http://partsregistry.org/Main_Page Registry of Standard Biological Parts]</li>
+
-
<li>[http://www.kuleuven.be/bioscenter BIOScenter]</li>
+
-
</ul>
+
-
</div>
+
-
<!-- END INTERESTING LINKS -->
+
-
<!-- NOTEBOOK -->
+
<div>
-
<div class="sidebox">
+
<input type="hidden" name="cx" value="014084360811440219920:o0ayl5nue-m" />
-
<h3>Notebook ({{CURRENTMONTHNAME}})</h3>
+
<input type="hidden" name="ie" value="UTF-8" />
-
{{#calendar:query=preload=:Team:KULeuven/Tools/New_Day|title=Team:KULeuven|year=2008|month={{CURRENTMONTH}} }}
+
<input type="text" name="q" size="23" />
-
<p></p><!-- the paragraph forms a buffer so the bottom edge doesn't dissappear because of the calendar-->
+
<input type="submit" name="sa" value="Search" />
-
</div>
+
</div>
-
<!-- END NOTEBOOK -->
+
-
<!-- GOOGLE SEARCH BAR -->
+
</form>
-
<html>
+
</div>
-
<div class="cse-branding-bottom" style="background-color:#FFFFFF;color:#000000">
+
-
Search in our wiki pages:
+
-
  <div class="cse-branding-form">
+
-
    <form action="http://www.google.com/cse" id="cse-search-box">
+
-
      <div>
+
-
        <input type="hidden" name="cx" value="014084360811440219920:o0ayl5nue-m" />
+
-
        <input type="hidden" name="ie" value="UTF-8" />
+
-
        <input type="text" name="q" size="27" />
+
-
        <input type="submit" name="sa" value="Search" />
+
-
      </div>
+
-
    </form>
+
-
  </div>
+
-
  <div class="cse-branding-logo">
+
-
    <img src="http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif" alt="Google" />
+
-
  </div>
+
-
  <div class="cse-branding-text">
+
-
    Custom Search
+
-
  </div>
+
-
</div>
+
-
</html>
+
-
<!-- END GOOGLE SEARCH BAR -->
+
 +
<div class="cse-branding-logo">
 +
<img src="http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif" alt="Google" />
</div>
</div>
-
<!-- END SIDEBAR CONTENT -->
 
 +
<div class="cse-branding-text">
 +
Custom Search
</div>
</div>
-
<!-- END SIDEBAR -->
 
</div>
</div>
 +
</html>
 +
 +
<html>
 +
<!-- SIDEBAR: VISITORS -->
 +
<div class="visitors">
 +
<h3>Visitors &nbsp; &nbsp; &nbsp; &nbsp; <a id="geo" target="blank" href="http://www.searchandgo.com/geo/"><img src="http://www.searchandgo.com/geo/factory.php" rel="nofollow" alt="Visitor locations"></a></h3>
 +
<ul>
 +
<li><em>Amount:</em><a><img src="http://www.yourhitstats.com/Buy_Links-3717204.png" rel="nofollow" alt="Amount of visitors"></a></li>
 +
<li><a href="http://www4.clustrmaps.com/counter/maps.php?url=https://2008.igem.org/Team:KULeuven" rel="nofollow" id="clustrMapsLink"><img src="http://www4.clustrmaps.com/counter/index2.php?url=https://2008.igem.org/Team:KULeuven" style="border:0px;" alt="Locations of visitors to this page" title="Locations of visitors to this page" id="clustrMapsImg" onerror="this.onerror=null; this.src='http://www2.clustrmaps.com/images/clustrmaps-back-soon.jpg'; document.getElementById('clustrMapsLink').href='http://www2.clustrmaps.com';" /></a></li>
 +
</div>
 +
</html>
 +
 +
</div><!-- END SIDEBAR -->
 +
 +
</div><!-- END HOME -->

Latest revision as of 13:54, 5 September 2008

Result:

To have a dropdown for your own team copy over all of the content below. It might be needed to adjust a thing or two. Comments have been added throughout the code what must be changed.

Inspirational websites:

  • [http://javascript-array.com/scripts/simple_drop_down_menu/ Most basic dropdown menu, with no submenu's]
  • [http://jquery.com/ The javascript library used to add effects and optimise the dropdown]
  • [http://www.tyssendesign.com.au/articles/css/centering-a-dropdown-menu/ How to center a ul list effectively]

The dropdown has been created and developed by the KULeuven team.

<html>

<style type="text/css">
#content {z-index:4;}
#ddwrapper * {z-index:8 !important;}

div#ddwrapper {
	margin:0;
	padding:0;
	height:28px;
	width:945px;				/* change to adjust imperfections in width */
}
div#ddnav {
	margin:0 auto;				/* needed to center the dropdown */
	padding:0;
	top:5px;
	/* width: 965px */
	visibility:hidden;			/* dropdown is hidden until properly initalised by javascript */
}
div#ddtoggle {
	margin:0;
	position:fixed;
	right:2px;
	top:15px;
	height:10px;
	width:10px;
	z-index:100;
}

#ddnav ul {
	display:table-row;			/* works only for firefox, later adjusted by javascript for IE */
	margin:0 auto;
	padding:0;
}
#ddnav ul li {
	display:table-cell;			/* works only for firefox, later adjusted by javascript for IE */
	list-style:none;
	margin:0;
	padding:0 !important;
	border-right:1px solid #FFF;		/* creates illusion of spacing between tabs */
}
#ddnav ul li:last-child{border-right:none;}
#ddnav a{
	display:block;
	margin:0;
	padding:4px 14px;			/* play with dimensions for size of tabs */
	background-color:#075A90;		/* background color for tabs */
	color:#FFF !important;			/* font color for text in tabs */
	text-align:center;			/* aligning for text in tabs */
	text-decoration:none !important;
	font:bold 10pt Trebuchet MS;		/* font properties for text in tabs */
	outline:0;
}
#ddnav ul li a:hover {background-color:#99CCFF;}/* background color for tabs on mouseover */
#ddnav li a:active {outline:none;}		/* remove standard dotted border for links when clicked (IE) */
#ddnav li a:focus {-moz-outline-style:none;}	/* remove standard dotted border for links when clicked (FF) */
#ddnav div {
	display:none;
	position:absolute;
	width:9em;
	background-color:#000;			/* bug solution, do not change ! */
	border:1px solid #5970B2;		/* border color for dropdown menus */
	opacity:0.9;				/* transparancy of the dropdown menus (FF) */
	filter:alpha(opacity=90);		/* transparancy of the dropdown menus (IE) */
}
#ddnav div a {
	display:block;
	padding:5px 10px;			/* play with dimensions of block element in dropdown menus */
	position:relative;
	font:normal 8pt arial;			/* font properties for text in dropdown menus */
	text-align:left;			/* aligning of text in dropdown menus */
	cursor:pointer;
}
#ddnav div a:hover, #ddnav span a:hover {color:#000 !important;}	/* text color on mouseover */
#ddnav span div {
	position:relative;
	border:none;
	border-bottom:2px groove #5970B2;	/* separator for submenus, groove does not work in FF */
	opacity:1.0;				/* avoid stacking transparancy for submenus (FF) */
	filter:alpha(opacity=100);		/* avoid stacking transparancy for submenus (IE) */
}

/* may want to upload the following pictures to a new location */
.expand {background: url('https://static.igem.org/mediawiki/2008/e/ef/Icon-expand.png') no-repeat 95% 50%;}
.collapse {background: url('https://static.igem.org/mediawiki/2008/c/cd/Icon-collapse.png') no-repeat 95% 50%;}

.docked {background: #99ccff url("https://static.igem.org/mediawiki/2008/6/62/Ddnavundock.png") no-repeat 50% 50%;}
.undocked {background: #99ccff url("https://static.igem.org/mediawiki/2008/e/e4/Ddnavdock.png") no-repeat 50% 50%;}
</style>

<!-- IMPORTANT: save following script under a personalized webspace or download the library at www.jquery.com -->
<script type="text/javascript" src="http://student.kuleuven.be/~s0173901/wiki/js/jquery.js"></script>
<script type="text/javascript">
	function ddnav() {
		$('#ddnav ul li').hover(
			function () {
				$(this).find('div:first').css('display','block');},
			function () {
				$(this).find('div:first').css('display','none');}
		);
	}
			
	function ddnavsub() {
		$('#ddnav span > a').toggle(
			function () {
				$(this).removeClass("#ddnav expand").addClass("#ddnav collapse");
				$(this).parent().find('div:first').slideDown('fast');
				$(this).hover(
					function (){$(this).css('background-color','#99AAFF');},
					function (){$(this).css('background-color','#99AAFF');});},
			function () {
				$(this).removeClass("#ddnav collapse").addClass("#ddnav expand");
				$(this).parent().find('div:first').css('display','none');
				$(this).hover(
					function (){$(this).css('background-color','#99CCFF');},
					function (){$(this).css('background-color','#075A90');});}
		).addClass("#ddnav expand");
	}
	
	/* If you wish to omit the docking feature, remove following function ddtoggle() */	
	function ddtoggle() {
		$('#ddtoggle').toggle(
			function () {
				$(this).removeClass('undocked').addClass('docked');
				$('#ddnav').css('position','fixed');},
			function () {
				$(this).removeClass('docked').addClass('undocked');
				$('#ddnav').css('position','static');}
		);
	}

	function ddalign() {
		var _windowWidth = $(window).width();
		var _leftOffset = (_windowWidth - 965)/2;

		$('div#ddnav').css('left',_leftOffset);
	}
			
	function ddmsie() {
		$('#ddnav a').hover(
			function () {$(this).css('background-color','#99ccff');},
			function () {$(this).css('background-color','#075a90');}
		);
				
		/* toggle doesn't work yet */
		$('#ddtoggle').css('display','none');
				
		$('#ddnav ul').css('display','inline-block');
		$('#ddnav ul li').css('display','inline');
		$('#ddnav ul li').css('position','relative');
		$('#ddnav ul li>a').css('display','inline-block');
		$('#ddnav ul li>a').css('margin-right','-4px');
				
		$('#ddnav div').css('left','0');
		$('#ddnav div').css('top','100%');
		$('#ddnav span div').css('top','0');
	}
			
	function ddmozilla() {
		ddtoggle();
		$(window).bind('resize', function() {ddalign();});
	}

	$(function () {
		ddnav();
		ddnavsub();

		if(jQuery.browser.msie) ddmsie();
		if(jQuery.browser.mozilla) ddmozilla();

		$('#ddnav').css('visibility','visible');
	});
</script>

<!-- If you wish to omit the docking feature omit following line (div with id ddtoggle) -->
<div id="ddtoggle" class="undocked"></div>
<div id="ddwrapper">
<!-- Here the actual links are defined, simply replace with your own links in the appropriate sections -->
<div id="ddnav" align="center">
<ul>
	<li>
		<a href="https://2008.igem.org/Team:KULeuven">Home</a>
	</li>
	<li>
		<a>The Team</a>
		<div>
			<a href="https://2008.igem.org/Team:KULeuven/Team/LabsandGroups">Research Labs and Groups</a>
			<a href="https://2008.igem.org/Team:KULeuven/Team/Students">Students</a>
			<a href="https://2008.igem.org/Team:KULeuven/Team/Instructors">Instructors</a>
			<a href="https://2008.igem.org/Team:KULeuven/Team/Advisors">Advisors</a>
                        <a href="https://2008.igem.org/Team:KULeuven/Team/Pictures">Pictures</a>
		</div>
	</li>
	<li>
		<a>The Project</a>
		<div>
			<a href="https://2008.igem.org/Team:KULeuven/Project">Summary</a>
			<span>
				<a>Components</a>
				<div>
					<a href="https://2008.igem.org/Team:KULeuven/Project/Input">Input</a>
					<a href="https://2008.igem.org/Team:KULeuven/Project/Output">Output</a>
					<a href="https://2008.igem.org/Team:KULeuven/Project/Filter">Filter</a>
					<a href="https://2008.igem.org/Team:KULeuven/Project/Inverter">Invertimer</a>
					<a href="https://2008.igem.org/Team:KULeuven/Project/Reset">Reset</a>
					<a href="https://2008.igem.org/Team:KULeuven/Project/CellDeath">Cell Death</a>
					<a href="https://2008.igem.org/Team:KULeuven/Project/Memory">Memory</a>
				</div>
			</span>
                        <a href="https://2008.igem.org/Team:KULeuven/Evaluation">End Evaluation</a>
			<a href="https://2008.igem.org/Team:KULeuven/Literature">Literature</a>
                        <a href="https://2008.igem.org/Team:KULeuven/Brainstorm">Brainstorm</a>
		</div>
	</li>
        <li>
		<a>Ethics</a>
		<div>

		</div>
	</li>
	<li>
		<a>Submitted Parts</a>
		<div>
			<a href="https://2008.igem.org/Team:KULeuven/Parts">Listing</a>
			<a href="http://partsregistry.org/cgi/partsdb/pgroup.cgi?pgroup=iGEM2008&group=KULeuven">Sandbox</a>
		</div>
	</li>
	<li>
		<a>Modeling</a>
		<div>
			<a href="https://2008.igem.org/Team:KULeuven/Model/Overview">Overview</a>
			<a href="https://2008.igem.org/Team:KULeuven/Model/KineticConstants">Kinetic Constants</a>
			<span>
				<a>Components</a>
				<div>
					<a href="https://2008.igem.org/Team:KULeuven/Model/Output">Output</a>
					<a href="https://2008.igem.org/Team:KULeuven/Model/Filter">Filter</a>
					<a href="https://2008.igem.org/Team:KULeuven/Model/Inverter">Invertimer</a>
					<a href="https://2008.igem.org/Team:KULeuven/Model/Reset">Reset</a>
					<a href="https://2008.igem.org/Team:KULeuven/Model/CellDeath">Cell Death</a>
					<a href="https://2008.igem.org/Team:KULeuven/Model/Memory">Memory</a>
				</div>
			</span>
			<a href="https://2008.igem.org/Team:KULeuven/Model/FullModel">Full Model</a>
                        <a href="https://2008.igem.org/Team:KULeuven/Model/Sensitivity">Sensitivity Analysis</a>
			<a href="https://2008.igem.org/Team:KULeuven/Model/MultiCell">Multi-cell Model</a>
			<a href="https://2008.igem.org/Team:KULeuven/Model/Diffusion">Diffusion</a>
		</div>
	</li>
	<li>
		<a>Data Analysis</a>
		<div>
			<a href="https://2008.igem.org/Team:KULeuven/Data/Overview">Overview</a>
			<span>
				<a>New Parts</a>
				<div>
					<a href="https://2008.igem.org/Team:KULeuven/Data/GFP">GFP (LVA-tag)</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/T7">T7 (UmuD-tag)</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/Antisense">Antisense LuxI</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/ccdB">Celldeath (ccdB)</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/HybridProm">Hybrid Promotor</a>
				</div>
			</span>
                        <span>
				<a>Components</a>
				<div>
					<a href="https://2008.igem.org/Team:KULeuven/Data/Input">Input</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/Output">Output</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/Filter">Filter</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/Inverter">Invertimer</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/Reset">Reset</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/CellDeath">Cell Death</a>
					<a href="https://2008.igem.org/Team:KULeuven/Data/Memory">Memory</a>
				</div>
			</span>
			<a href="https://2008.igem.org/Team:KULeuven/Data/FullModel">Full Model</a>
		</div>
	</li>
        <li>
		<a>Software</a>
		<div>
			<a href="https://2008.igem.org/Team:KULeuven/Software/MultiCell">Multi-cell Toolbox</a>
			<a href="https://2008.igem.org/Team:KULeuven/Software/Simbiology2LaTeX">Simbiology2LaTeX Toolbox</a>
		</div>
	</li>
	<li>
		<a>Notebook</a>
		<div>
			<a href="https://2008.igem.org/Team:KULeuven/Meeting_Calendar">Calendar</a>
                        <a href="https://2008.igem.org/Team:KULeuven/SummerHolidays">Summer Holidays</a>
			<span>
				<a>Reports</a>
				<div>
					<a href="https://2008.igem.org/Team:KULeuven/Meeting Reports">Daily</a>
					<a href="https://2008.igem.org/Team:KULeuven/Weekly Meetings">Weekly</a>
				</div>
			</span>
			<span>
				<a>Lab Data</a>
				<div>
					<a href="https://2008.igem.org/Team:KULeuven/Freezer">Freezer</a>
					<a href="https://2008.igem.org/Team:KULeuven/Primers">Primers</a>
					<a href="https://2008.igem.org/Team:KULeuven/Ligation">Ligation</a>
				</div>
			</span>
			<a href="https://2008.igem.org/Team:KULeuven/Tools">Tools</a>
			<a href="https://2008.igem.org/Team:KULeuven/Press">Press</a>
			<a href="https://2008.igem.org/Team:KULeuven/Guestbook">Guestbook</a>
                        
		</div>
	</li>
        
</ul>
</div>
</div>
</html>


Wellcome to the KULeuven IGEM 2008 Homepage!

Enjoy the hard work we delivered, and feel free to contact us at igem@kuleuven.be

Synthetic Biology: BioSCENTer and iGEM

Synthetic biology is a new challenge in biosciences. It combines biology and engineering principles to design and build new biological functions and systems. Examples are abound: cancer cell invading bacteria, microbes that take pictures, antimalarial drug producers,... The advantage of using living systems for these purposes is that, once they are designed and built, they are self-reproducible. The challenge, however lies exactly within the design and construction: making biological circuits and devices as robust and predictive as their electrical counterparts. ...

The international Genetically Engineered Machine competition (iGEM) or iGEM competition is a synthetic biology competition for multidisciplinary teams of undergraduate students. It was first organized in 2004 by Drew Endy, Randy Rettberg and Tom Knight of MIT with two goals in mind: to yield new ideas in synthetic biology and to form the future researchers in this new scientific community. Whereas 5 US teams competed in 2004, the 2007 edition already had 750 students and advisors grouped in 54 teams from 19 countries. This year, the competition already counts 83 teams!

The core of the iGEM competition is to design and build a “new genetic machine” with BioBricks. BioBricks are standardized, off the shelf biological parts that are used by genetic network designers. All BioBricks that were made during previous iGEM competitions are registered and documented in the Registry of Standard Biological Parts. Each iGEM competition thus starts from the efforts of the previous years.

Leuven

The University of Leuven was founded almost six hundred years ago. Throughout the centuries people have always occupied center stage at the Catholic University of Leuven. The University's academic fame has attracted scholars and scientists as Justus Lipsius, Gerard Mercator and Andreas Vesalius who have all made valuable contribution to the European intellectual life. The University of Leuven can look back on a glorious past, but it also moves with the times. The University's educational concept is modern, with research activities focused on the needs and aspirations of contemporary people and society. The University of Leuven is famous not just within the borders of Belgium, but far beyond as well. Being a very lively city of and for students, Leuven aspires to maintain that reputation. In contrast to most university cities, Leuven does not have a closed campus. The University buildings are spread throughout the city and were originally built for completely different purposes.

The Team

The KULeuven team consists of 12 enthusiastic students selected out of three faculties, 4 civil engineers, 4 bio-engineers and 4 biochemists. More information on the team members can be found on the Students homepage or by scrolling over the heads of the students.

Maarten Breckpot
Maarten Breckpot

Studies:
1st Master of Applied Sciences and Engineering – Mathematical Engineering
Country:
Belgium
Nick Van Damme
Nick Van Damme

Studies:
1st Master of Applied Sciences and Engineering – Mathematical Engineering
Country:
Belgium
Benjamien Moeyaert
Benjamien Moeyaert

Studies:
3rd Bachelor of Biochemistry and Biotechnology
Country:
Belgium
Stefanie Roberfroid
Stefanie Roberfroid

Studies:
3rd Bachelor of Bioscience Engineering – Biomolecular Engineering
Country:
Belgium
Dries Vercruysse
Dries Vercruysse

Studies:
1st Master of Applied Sciences and Engineering - Nanoscience and Nanotechnology
Country:
Belgium
Andim Doldurucu
Andim Doldurucu

Studies:
1st Master of Bioscience Engineering – Nanoscience and Nanotechnology
Country:
Turkey
Hanne Tytgat
Hanne Tytgat

Studies:
3rd Bachelor of Biochemistry and Biotechnology
Country:
Belgium
Elke Van Assche
Elke Van Assche

Studies:
3rd Bachelor of Bioscience Engineering – Biomolecular Engineering
Country:
Belgium
Jan Mertens
Jan Mertens

Studies:
1st Master of Bioscience Engineering – Biomolecular Engineering
Country:
Belgium
Nathalie Busschaert
Nathalie Busschaert

Studies:
3rd Bachelor of Chemistry
Country:
Belgium
Jonas Demeulemeester
Jonas Demeulemeester

Studies:
1st Master of Biochemistry and Biotechnology
Country:
Belgium
Antoine Vandermeersch
Antoine Vandermeersch

Studies:
2nd and 3rd Bachelor of Applied Sciences and Engineering – Electrical and Materials Engineering
Country:
Belgium

The Project

Our team’s project is Dr. Coli, an E. coli bacterium that produces a drug when and where it is needed in the human body. It does this in an intelligent way, such that the drug production meets the individual patient’s needs. And when the patient is cured, Dr. Coli eliminates itself from the body. To achieve this goal we divided our project into several subsystems. A detailed description about every subsystem can be found by clicking on one of the following pictograms.




scroll over the pictograms to get a short description or click on them to go to the corresponding page

Modeling

The most important assets of our project are the different control mechanisms. Since these are very much dependent on kinetic and other constants, Dr. Coli heavily relies on proper modeling. Our Dry-Lab team has spend its summer setting up a computational model of Dr. Coli to completely simulate his actions. We constructed models of all the subsystems (components) in both CellDesigner and Matlab. All these subsystems have been characterised by their ODE's and have been simulated thoroughly. Together they form our full model of Dr. Coli. These models are only capable of simulating the behaviour of 1 Dr. Coli cell, so we implemented our own Software Tool that can work with multi cellular models.

Search in our wiki pages:
Custom Search

Visitors         Visitor locations

  • Amount:Amount of visitors
  • Locations of visitors to this page