Team:Uppsala/Templates/header template

From 2014.igem.org

(Difference between revisions)
Line 2: Line 2:
<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">
 +
<!--
 +
#imgwrapNH    { width: 1050px; height: 300px;
 +
              position: relative }
 +
#ste      { width:35px; height: 40px;
 +
              position: absolute; left: 755px; top: 145px;
 +
              }
 +
#ter      { width: 35px; height: 35px;
 +
              position: absolute; left: 613px; top: 197px;
 +
              }
 +
#joa      { width: 35px; height: 35px;
 +
              position: absolute; left: 231px; top: 88px;
 +
              }
 +
#ale      { width: 35px; height: 35px;
 +
              position: absolute; left: 150px; top: 140px;
 +
              }
 +
#jen      { width: 35px; height: 35px;
 +
              position: absolute; left: 209px; top: 170px;
 +
              }
 +
#marc      { width: 35px; height: 35px;
 +
              position: absolute; left: 265px; top: 145px;
 +
              }
 +
#mir      { width: 35px; height: 35px;
 +
              position: absolute; left: 310px; top: 190px;
 +
              }
 +
#tim      { width: 35px; height: 35px;
 +
              position: absolute; left: 315px; top: 100px;
 +
              }
 +
#vik      { width: 35px; height: 35px;
 +
              position: absolute; left: 365px; top: 130px;
 +
              }  
 +
#meg      { width: 35px; height: 35px;
 +
              position: absolute; left: 406px; top: 188px;
 +
              }  
 +
#nik      { width: 35px; height: 35px;
 +
              position: absolute; left: 404px; top: 107px;
 +
              }
 +
#jon      { width: 35px; height: 35px;
 +
              position: absolute; left: 480px; top: 107px;
 +
              }
 +
#ari      { width: 35px; height: 35px;
 +
              position: absolute; left: 454px; top: 145px;
 +
              }  
 +
#nil      { width: 35px; height: 35px;
 +
              position: absolute; left: 520px; top: 185px;
 +
              }  
 +
#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: 695px; top: 195px;
 +
              }
 +
#chr      { width: 35px; height: 35px;
 +
              position: absolute; left: 733px; top: 95px;
 +
              }  
 +
#lau      { width: 35px; height: 35px;
 +
              position: absolute; left: 795px; top: 205px;
 +
              }  
 +
#and      { width: 35px; height: 35px;
 +
              position: absolute; left: 830px; top: 70px;
 +
              }  
 +
#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">
 +
<img src="https://static.igem.org/mediawiki/2014/1/11/Uppsala_iGEM2014_Team_headerV3.png" width="1050" height="300" usemap="#map" alt="Webdesign Group">
 +
<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 Rosènius</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 Wille Boers</span></div>
 +
</div>
 +
<script>
 +
function darkLord() {
 +
alert("The Dark Lord is too GREAT to allow for clicking on him. *You surrender*");
 +
}
 +
</script>
</div> <!-- Ends main_header -->
</div> <!-- Ends main_header -->

Revision as of 17:08, 16 October 2014