Team:LMU-Munich/Templates/Page Header

From 2012.igem.org

(Difference between revisions)
(more bugfixing…)
 
(69 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
__NOTOC__<html>
<style type="text/css">
<style type="text/css">
/* hide some igem stuff... */
/* hide some igem stuff... */
Line 5: Line 5:
h1.firstHeading, #p-logo, #catlinks {
h1.firstHeading, #p-logo, #catlinks {
display: none;
display: none;
-
font-weight: lighter;
 
}
}
 +
.previewnote {
 +
position: fixed;
 +
background: #FFCCCC;
 +
left: 0;
 +
width: 10em;
 +
top: 0;
 +
z-index: 100;
 +
}
 +
 +
.previewnote:hover {
 +
visibility: hidden;
 +
}
/* reformat the major elements of the page */
/* reformat the major elements of the page */
Line 21: Line 32:
border-top: 1px solid transparent;
border-top: 1px solid transparent;
margin-top: -1px;
margin-top: -1px;
-
position: static;
 
-
}
 
-
 
-
html {
 
-
background: #DDDDDD; /* ← change the left/right border color here! */
 
}
}
body {
body {
 +
background: url(https://static.igem.org/mediawiki/2012/e/e3/Team_LMU_banner.png) no-repeat 50% 20px white;
width: 1000px; /* against my better judgement… */
width: 1000px; /* against my better judgement… */
margin: 0 auto;
margin: 0 auto;
-
background: url(http://wrtlprnft.ath.cx/igem12_header.jpg) no-repeat 0 0 white;
+
position: relative;
}
}
Line 40: Line 47:
width: auto;
width: auto;
height: 1.5em;
height: 1.5em;
 +
margin-bottom: -1.5em;
}
}
Line 71: Line 79:
#footer-box {
#footer-box {
-
margin-top: -5em;
+
margin: 0;
-
margin-right: 18px;
+
border: 0 transparent none;
-
margin-left: 285px;
+
border-top: 1px solid black;
width: auto;
width: auto;
-
height: 2.8em;
 
text-align: center;
text-align: center;
}
}
Line 97: Line 104:
display: 0;
display: 0;
margin: 0;
margin: 0;
-
padding: 0;
+
padding: 0 213px;
-
background: #421135;
+
background: url(https://static.igem.org/mediawiki/2012/8/86/Team_LMU_top.png) #785d99 repeat-y;
height: 2.5em;
height: 2.5em;
-
border-bottom: .2em solid #7b406c;
+
}
 +
 
 +
#nav_shadow {
 +
height: 100px;
 +
margin: 0 -221px;
 +
background: url(https://static.igem.org/mediawiki/2012/2/2c/Team_LMU_top_shadow.png) no-repeat;
 +
margin-top: 154px;
 +
margin-bottom: -98px;
 +
}
 +
 
 +
#nav {
 +
height: 2.5em;
 +
margin: 0 -213px;
 +
padding-bottom: .4em;
 +
background: url(https://static.igem.org/mediawiki/2012/9/99/Team_LMU_bottom.png) #785d99 repeat-y;
}
}
Line 109: Line 130:
margin: 0;
margin: 0;
float: left;
float: left;
-
margin-right: 1px;
+
margin-right: 2px;
-
height: 2.7em;
+
height: 2.5em;
}
}
#nav li:hover {
#nav li:hover {
-
border-right: 1px solid white;
+
border-right: 2px solid white;
-
border-left: 1px solid white;
+
border-left: 2px solid white;
-
margin-left: -1px;
+
margin-left: -2px;
margin-right: 0;
margin-right: 0;
}
}
Line 127: Line 148:
#nav a, #nav strong {
#nav a, #nav strong {
display: block;
display: block;
-
background: #421135;
+
background: #785d99;
padding: .5em;
padding: .5em;
height: 1.5em;
height: 1.5em;
Line 135: Line 156:
}
}
-
#nav a:hover, #nav strong, #nav>ul>li:nth-child(</html>{{{2|100}}}<html>) a {
+
#nav a:hover, #nav strong, #nav>ul>li:nth-child(</html>{{{2|100}}}<html>)>a {
text-decoration: none;
text-decoration: none;
color: white;
color: white;
-
background: #7b406c;
+
background: #b381d9;
}
}
-
#nav li ul {
+
#nav>ul>li:nth-child(</html>{{{2|100}}}<html>)>a {
-
display: none;
+
font-weight: bold;
}
}
-
#nav li:hover ul {
+
#nav li ul {
-
display: table;
+
display: none;
position: absolute;
position: absolute;
 +
margin: 0;
 +
padding: 0;
 +
padding-top: .4em;
top: 2.5em;
top: 2.5em;
-
left: -1px;
 
width: auto;
width: auto;
-
border: 1px solid white;
+
background: transparent;
-
border-top: 0 none transparent;
+
z-index: 100;
}
}
-
#nav li:hover li {
+
#nav li li {
float:none;
float:none;
display: table-row;
display: table-row;
Line 161: Line 184:
}
}
-
#nav li:hover li a, #nav li:hover li strong {
+
/*
-
border-top: 1px solid white;
+
round border experiments — do not work yet
 +
#nav li li:last-child {
 +
-moz-border-bottom-left-radius: 10px;
 +
border-bottom-left-radius: 10px;
 +
-moz-border-bottom-right-radius: 10px;
 +
border-bottom-right-radius: 10px;
 +
border-bottom: 3px solid #785d99;
 +
border-left: 3px solid #785d99;
 +
border-right: 3px solid #785d99;
 +
overflow: hidden;
}
}
 +
*/
-
#search-controls {
+
#nav li li a, #nav li li strong {
-
float: right;
+
border-top: 1px solid white;
-
width: 15em;
+
font-weight: normal;
-
position: absolute;
+
-
right: 5em;
+
-
top: 5em;
+
-
text-align:center;
+
-
line-height: 1.5em;
+
}
}
-
#searchInput {
+
#nav li li:first-child a, #nav li li:first-child strong {
-
width: 14em;
+
border-top: 0 none transparent;
-
background: rgba(255, 255, 255, 0.75);
+
}
}
 +
#search-controls {
 +
display: none; /* mostly useless */
 +
}
/* format our own design elements */
/* format our own design elements */
Line 197: Line 227:
}
}
-
#logos {
+
#logo_lmu {
-
margin-top: -40px;
+
position: absolute;
-
width:190px;
+
right: 60px;
-
text-align:center;
+
top: 95px;
-
padding: 0 35px;
+
}
 +
 
 +
#logo_igem {
 +
position: absolute;
 +
right: 62px;
 +
top: -5px;
 +
}
 +
 
 +
#logo_beadzillus {
 +
position: absolute;
 +
left: 155px;
 +
top: 25px;
}
}
Line 222: Line 263:
#right {
#right {
padding: 25px;
padding: 25px;
 +
padding-right: 60px;
border-left: 7px solid #16933f;
border-left: 7px solid #16933f;
margin-left: 260px;
margin-left: 260px;
Line 233: Line 275:
h2 {
h2 {
border: 0;
border: 0;
-
margin-left: -1em;
+
margin-left: 0;
font-weight: bold;
font-weight: bold;
}
}
Line 246: Line 288:
}
}
 +
#nav li.over ul {
 +
display: table;
 +
}
 +
 +
a, a:link, a:visited {
 +
color: #16933f;
 +
}
 +
 +
a.new {
 +
color: red;
 +
}
 +
 +
table.colored th {
 +
background: #16933f;
 +
color: white;
 +
}
 +
 +
table.colored tr:nth-child(odd) {
 +
background: #ebfce4;
 +
}
 +
 +
table.colored {
 +
border: 0 none transparent;
 +
border-bottom: 2px solid #00b050;
 +
}
 +
 +
table.colored th, table.colored td {
 +
padding-left: .5em;
 +
padding-right: .5em;
 +
}
 +
 +
/* rounded shadowed boxes */
 +
 +
.box {
 +
border: 1px solid #888;
 +
padding: 5px;
 +
margin-bottom: 10px;
 +
 +
-moz-border-radius: 10px;
 +
border-radius: 10px;
 +
-moz-box-shadow: 0 0 8px #888;
 +
-webkit-box-shadow: 0 0 8px #888;
 +
box-shadow: 0 0 8px #888;
 +
}
 +
 +
.box {
 +
margin-right: 5px;
 +
margin-left: 5px;
 +
}
 +
 +
/* slideshow stuff */
 +
 +
.slideshow {
 +
position: relative;
 +
overflow: hidden;
 +
}
 +
 +
.slideshow li {
 +
display: block;
 +
position: absolute;
 +
left: -100%;
 +
top: 0;
 +
}
 +
 +
.slideshow div.antilink {
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
}
 +
 +
.slideshow div.next {
 +
position: absolute;
 +
width: 0;
 +
height: 0;
 +
border-left: 20px solid /*#7b609b*/ white;
 +
border-top: 20px solid transparent;
 +
border-bottom: 20px solid transparent;
 +
right: 20px;
 +
top: 50%;
 +
margin-top: -20px;
 +
}
</style>
</style>
-
<div id="logos">
+
<style type="text/css" id="hoverstyle">
-
<a href="https://2012.igem.org/Main_Page">
+
#nav li:hover ul {
-
<img src="https://static.igem.org/mediawiki/2012/f/f0/IGEM_logo.png" alt="iGEM" />
+
display: table;
-
</a>
+
}
-
<a href="http://www.mikrobiologie.biologie.uni-muenchen.de/index.html">
+
</style>
-
<img src="https://static.igem.org/mediawiki/2012/9/9e/LMU_logo.png" alt="Ludwig-Maximilians-Universität München" />
+
<a id="logo_igem" href="https://2012.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2012/archive/f/f0/20120817084834%21IGEM_logo.png" alt="iGEM" /></a>
-
</a>
+
<a id="logo_lmu" href="http://www.uni-muenchen.de/index.html"><img src="https://static.igem.org/mediawiki/2012/9/9e/LMU_logo.png" alt="Ludwig-Maximilians-Universität München" /></a>
 +
<a id="logo_beadzillus" href="https://2012.igem.org/Team:LMU-Munich"><img src="https://static.igem.org/mediawiki/2012/2/2c/Team-LMU_Beadzillus_logo_200.png" alt="Beadzillus" /></a>
</div>
</div>
 +
<div id="nav_shadow"></div>
<div id="nav">
<div id="nav">
</html>
</html>
Line 260: Line 385:
<html>
<html>
</div>
</div>
 +
<script type="text/javascript">
 +
var lis = document.getElementById("nav").getElementsByTagName("li");
 +
function nav_animator(ele) {
 +
ele.my_opacity += ele.delta_opacity;
 +
if(ele.my_opacity < 0) {
 +
ele.my_opacity = 0;
 +
}
 +
if(ele.my_opacity > 1) {
 +
ele.my_opacity = 1;
 +
}
 +
var uls = ele.getElementsByTagName("ul");
 +
for(var i = 0; i < uls.length; ++i) {
 +
uls[i].style.opacity = ele.my_opacity;
 +
}
 +
 +
var mythis = ele;
 +
 +
if(!(ele.my_opacity >= 1.0 || ele.my_opacity <= 0.0)) {
 +
ele.timeout = window.setTimeout(function() {
 +
nav_animator(mythis);
 +
}, 25);
 +
}
 +
 +
if(ele.my_opacity > 0.0) {
 +
ele.setAttribute("class", "over");
 +
ele.className = "over";
 +
} else {
 +
ele.setAttribute("class", "");
 +
ele.className = "";
 +
}
 +
 +
}
 +
 +
function addEvent(ele, ev, func) {
 +
if (ele.addEventListener) {
 +
ele.addEventListener(ev,func,false);
 +
} else if (ele.attachEvent) {
 +
ele.attachEvent("on" + ev, func);
 +
}
 +
}
 +
 +
for(var i = 0; i < lis.length; ++i) {
 +
// create a new closure to pass down the li variable
 +
// no idea why the assignment is needed…
 +
var a = function() {
 +
var li = lis[i];
 +
li.my_opacity = 0.0;
 +
addEvent(li, "mouseover", function() {
 +
if(li.timeout != null) {
 +
window.clearTimeout(this.timeout);
 +
li.timeout = null;
 +
}
 +
var timeout = li.my_opacity > 0 ? 25 : 200;
 +
li.delta_opacity = 1.0/16;
 +
li.timeout = window.setTimeout(function() {
 +
nav_animator(li);
 +
}, timeout);
 +
});
 +
addEvent(li, "mouseout", function() {
 +
if(li.timeout != null) {
 +
window.clearTimeout(this.timeout);
 +
li.timeout = null;
 +
}
 +
var timeout = li.my_opacity < 1 ? 25 : 200;
 +
li.delta_opacity = -1.0/8;
 +
li.timeout = window.setTimeout(function() {
 +
nav_animator(li);
 +
}, timeout);
 +
});
 +
}();
 +
}
 +
 +
var style = document.getElementById("hoverstyle");
 +
style.parentNode.removeChild(style);
 +
 +
var links = document.getElementById("nav").getElementsByTagName("a");
 +
for(var i = 0; i < links.length; ++i) {
 +
links[i].removeAttribute("title");
 +
}
 +
</script>
<div id="left">
<div id="left">
</html>
</html>
Line 268: Line 473:
</div>
</div>
<html>
<html>
 +
<div id="mascot"><img alt="Sporenfreunde" src="https://static.igem.org/mediawiki/2012/e/e3/Team_LMU_Sporenfreunde.png"></div>
</div>
</div>
 +
<script type="text/javascript">
 +
var mascot = document.getElementById("mascot");
 +
var dummy = document.createElement("div");
 +
mascot.parentNode.insertBefore(dummy, mascot);
 +
mascot.style.marginTop = "-268px";
 +
dummy.style.height = "268px";
 +
 +
function get_y(ele) {
 +
var ret = 0;
 +
for(; ele != null; ele = ele.offsetParent) {
 +
ret += ele.offsetTop;
 +
}
 +
return ret;
 +
}
 +
 +
function scroll() {
 +
var scroll_top = window.pageYOffset != null ? window.pageYOffset : document.body.parentElement ? document.body.parentElement.scrollTop : document.body.scrollTop;
 +
 +
var distance_bottom = window.innerHeight - 268 - (get_y(dummy) - scroll_top);
 +
 +
if(distance_bottom > 75) {
 +
mascot.style.position = "fixed";
 +
mascot.style.left = (window.innerWidth / 2.0 - 500 + 17) + "px";
 +
mascot.style.bottom = "75px";
 +
mascot.style.width = "210px";
 +
mascot.style.height = "268px";
 +
} else {
 +
mascot.style.position = "static";
 +
}(dummy);
 +
}
 +
 +
window.onscroll = scroll;
 +
window.onresize = scroll;
 +
scroll();
 +
</script>
<div id="right">
<div id="right">
</html>
</html>
-
<div style="text-align: right">[[File:Team-LMU_Beadzillus_logo.png|150px]]</div>
 
<noinclude>
<noinclude>
== Page title ==
== Page title ==
Line 285: Line 525:
;[[Team:LMU-Munich/Templates/News]]
;[[Team:LMU-Munich/Templates/News]]
:the text in the sidebar
:the text in the sidebar
 +
 +
<div class="box">
 +
=== box test ===
 +
{| class="colored"
 +
|-
 +
!A1
 +
!B1
 +
!C1
 +
|-
 +
!A2
 +
|B2
 +
|C2
 +
|-
 +
!A3
 +
|B3
 +
|C3
 +
|}
 +
</div>
{{:Team:LMU-Munich/Templates/Page Footer}}
{{:Team:LMU-Munich/Templates/Page Footer}}
</noinclude>
</noinclude>

Latest revision as of 17:04, 24 October 2012

iGEM Ludwig-Maximilians-Universität München Beadzillus

Team-LMU Sidebar Home.jpg

The LMU-Munich team is exuberantly happy about the great success at the World Championship Jamboree in Boston. Our project Beadzillus finished 4th and won the prize for the "Best Wiki" (with Slovenia) and "Best New Application Project".

IGEM HQ LMU prize.jpg

[ more news ]

Sporenfreunde

Retrieved from "http://2012.igem.org/Team:LMU-Munich/Templates/Page_Header"