Team:Uppsala/Templates/header template

From 2014.igem.org

(Difference between revisions)
 
(20 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<div id="main_frame_upper"> <!-- Master div that contains all other header divs (upper section), should store background image etc. -->
 
<div id="header"> <!-- Header that contains all elements in the header -->  
<div id="header"> <!-- Header that contains all elements in the header -->  
 +
<style type="text/css">
 +
<!--
-
<div id="left_content_header"> <!-- Store x on the left side of header -->
+
#imgwrapNH    { width: 1050px; height: 300px;
 +
              position: relative }
 +
#ste      { width:35px; height: 40px;
 +
              position: absolute; left: 762px; top: 145px;
 +
              }
 +
#ter      { width: 35px; height: 35px;
 +
              position: absolute; left: 613px; top: 210px;
 +
              }
 +
#joa      { width: 35px; height: 35px;
 +
              position: absolute; left: 221px; top: 88px;
-
<img class="logo" src="https://static.igem.org/mediawiki/2013/e/e0/Uppsala2013_IGEMlogo.png">
+
              }
 +
#ale      { width: 35px; height: 35px;
 +
              position: absolute; left: 135px; top: 140px;
-
</div> <!-- Ends left_content_header -->
+
              }
 +
#jen      { width: 35px; height: 35px;
 +
              position: absolute; left: 194px; top: 170px;
-
<div id="right_content_header"> <!-- Store x on the right side of header -->
+
              }
 +
#marc      { width: 35px; height: 35px;
 +
              position: absolute; left: 255px; top: 145px;
-
+
              }
-
</div> <!-- Ends right_content_header -->
+
#mir      { width: 35px; height: 35px;
 +
              position: absolute; left: 300px; top: 190px;
 +
 
 +
              }
 +
#tim      { width: 35px; height: 35px;
 +
              position: absolute; left: 310px; top: 100px;
 +
 
 +
              }
 +
#vik      { width: 35px; height: 35px;
 +
              position: absolute; left: 360px; top: 130px;
 +
 
 +
              }  
 +
#meg      { width: 35px; height: 35px;
 +
              position: absolute; left: 406px; top: 198px;
 +
 
 +
              }  
 +
#nik      { width: 35px; height: 35px;
 +
              position: absolute; left: 399px; top: 102px;
 +
 
 +
              }
 +
#jon      { width: 35px; height: 35px;
 +
              position: absolute; left: 480px; top: 107px;
 +
 
 +
              }
 +
#ari      { width: 35px; height: 35px;
 +
              position: absolute; left: 454px; top: 150px;
 +
 
 +
              }  
 +
#nil      { width: 35px; height: 35px;
 +
              position: absolute; left: 520px; top: 190px;
 +
 
 +
              }  
 +
#eri      { width: 35px; height: 35px;
 +
              position: absolute; left: 550px; top: 145px;
 +
 
 +
              }  
 +
#gun      { width: 35px; height: 35px;
 +
              position: absolute; left: 565px; top: 100px;
 +
 
 +
              }  
 +
#oli      { width: 35px; height: 35px;
 +
              position: absolute; left: 665px; top: 115px;
 +
 
 +
              }
 +
#mar      { width: 35px; height: 35px;
 +
              position: absolute; left: 625px; top: 100px;
 +
 
 +
              }
 +
#kir      { width: 35px; height: 35px;
 +
              position: absolute; left: 705px; top: 210px;
 +
 
 +
              }
 +
#chr      { width: 35px; height: 35px;
 +
              position: absolute; left: 740px; top: 85px;
 +
 
 +
              }  
 +
#lau      { width: 35px; height: 35px;
 +
              position: absolute; left: 810px; top: 210px;
 +
 
 +
              }  
 +
#and      { width: 35px; height: 35px;
 +
              position: absolute; left: 840px; top: 60px;
 +
 
 +
              }  
 +
#ste span, #ter span, #joa span, #ale span, #jen span, #marc span, #mir span, #tim span, #vik span, #meg span, #nik span, #jon span, #ari span, #nil span, #eri span, #gun span, #oli span, #mar span, #kir span, #chr span, #lau span, #and span
 +
            { width: 5em;
 +
              font: bold 75% Arial, sans-serif;
 +
              display: none }
 +
 
 +
#ste:hover span, #ter:hover span, #joa:hover span, #ale:hover span, #jen:hover span, #mar:hover span, #mir:hover span, #tim:hover span, #vik:hover span, #meg:hover span, #nik:hover span, #jon:hover span, #ari:hover span, #nil:hover span, #eri:hover span, #gun:hover span, #oli:hover span, #marc:hover span, #kir:hover span, #chr:hover span, #lau:hover span, #and:hover span
 +
            { display: block;
 +
position: absolute;
 +
padding: .5em;
 +
content: attr(title);
 +
min-width: px;
 +
text-align: center;
 +
width: auto;
 +
height: auto;
 +
white-space: nowrap;
 +
top: -40px;
 +
background: rgba(0,0,0,.8);
 +
-moz-border-radius: 10px;
 +
-webkit-border-radius: 10px;
 +
border-radius: 10px;
 +
color: yellow;
 +
font-size: 0.86em;
 +
font-family: Arial, Helvetica, sans-serif; }
 +
#ste:hover span:after, #ter:hover span:after, #joa:hover span:after, #ale:hover span:after, #jen:hover span:after, #mar:hover span:after, #mir:hover span:after, #tim:hover span:after, #vik:hover span:after, #meg:hover span:after, #nik:hover span:after, jon:hover span:after, #ari:hover span:after, #nil:hover span:after, #eri:hover span:after, #gun:hover span:after, #oli:hover span:after, #marc:hover span:after, #kir:hover span:after, #chr:hover span:after, #lau:hover span:after, #and:hover span:after
 +
{
 +
position: absolute;
 +
display: block;
 +
content: "";
 +
border-color: rgba(0,0,0,.8) transparent transparent transparent;
 +
border-style: solid;
 +
border-width: 10px;
 +
height: 0;
 +
width: 0;
 +
position: absolute;
 +
bottom: -20px;
 +
left: 1em;
 +
}
 +
-->
 +
</style>
 +
 
 +
<div id="imgwrapNH">
 +
<div id="ste"><span>Stephanie Herman</span></div>
 +
<div id="ter"><span>Teresa Reinli</span></div>
 +
<div id="joa"><span>Joakim Hellner</span></div>
 +
<div id="ale"><span>Alexander Virtanen</span></div>
 +
<div id="jen"><span>Jennifer Rosenius</span></div>
 +
<div id="marc"><span>Marcus Hong</span></div>
 +
<div id="mir"><span>Miranda Stiernborg</span></div>
 +
<div id="tim" onclick="darkLord()"><span>Tim Hagelby Edström</span></div>
 +
<div id="vik"><span>Viktor Blomkvist</span></div>
 +
<div id="meg"><span>Megha Biradar</span></div>
 +
<div id="nik"><span>Niklas Handin</span></div>
 +
<div id="jon"><span>Jonas Mattisson</span></div>
 +
<div id="ari"><span>Arina Gromov</span></div>
 +
<div id="nil"><span>Nils Anlind</span></div>
 +
<div id="eri"><span>Eric Sandström</span></div>
 +
<div id="gun"><span>Gunta Celma</span></div>
 +
<div id="oli"><span>Oliver Possnert</span></div>
 +
<div id="mar"><span>Martin Friberg</span></div>
 +
<div id="kir"><span>Kira Karlsson</span></div>
 +
<div id="chr"><span>Christoffer Andersson</span></div>
 +
<div id="lau"><span>Laura Pacoste</span></div>
 +
<div id="and"><span>Andries Willem Boers</span></div>
 +
</div>
 +
<script>
 +
function darkLord() {
 +
alert("The Dark Lord is too GREAT to allow you to click on him. *You surrender*");
 +
}
 +
</script>
</div> <!-- Ends main_header -->
</div> <!-- Ends main_header -->
Line 20: Line 168:
{{:Team:Uppsala/Templates/navigation_template}}
{{:Team:Uppsala/Templates/navigation_template}}
<html>
<html>
-
</div> <!-- Ends main_frame_upper -->
 
</html>
</html>

Latest revision as of 19:23, 17 October 2014

Retrieved from "http://2014.igem.org/Team:Uppsala/Templates/header_template"