Team:UNAM-Genomics Mexico/Templates/Team
From 2011.igem.org
(Difference between revisions)
(changed footer and header font style) |
(Created one screen per option and the javascript code to stack them properly) |
||
Line 2: | Line 2: | ||
<!-- | <!-- | ||
- | @VERSION 1. | + | @VERSION 1.1.0 |
@NAME /Templates/Team | @NAME /Templates/Team | ||
@DESC This is a wiki template designed for the welcoming page. | @DESC This is a wiki template designed for the welcoming page. | ||
Line 20: | Line 20: | ||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); | ||
})(); | })(); | ||
+ | |||
+ | </script> | ||
+ | <script language="JavaScript" type="text/javascript"> | ||
+ | |||
+ | var currOnTop = getElementById("psiScreen"); | ||
+ | function HeapScreen(currId){ | ||
+ | currOnTop.style.zIndex = "1"; | ||
+ | currOnTop = getElementById( currId + "Screen" ); | ||
+ | currOntTop.style.zIndex = "2"; | ||
+ | } | ||
</script> | </script> | ||
Line 63: | Line 73: | ||
height: 650px; | height: 650px; | ||
margin: 0 auto; | margin: 0 auto; | ||
- | padding: | + | padding: 0px; |
border: none; | border: none; | ||
z-index: 0; | z-index: 0; | ||
Line 123: | Line 133: | ||
margin-top: 0px; | margin-top: 0px; | ||
font-size: 95%; | font-size: 95%; | ||
- | font-family: sans serif; | + | font-family: sans-serif; |
} | } | ||
#menubar ul{ | #menubar ul{ | ||
Line 167: | Line 177: | ||
border: none; | border: none; | ||
font-size: 95%; | font-size: 95%; | ||
- | font-family: sans serif; | + | font-family: sans-serif; |
} | } | ||
ul#f-list{ | ul#f-list{ | ||
Line 191: | Line 201: | ||
/******************************* | /******************************* | ||
- | + | Screen Control Properties | |
*******************************/ | *******************************/ | ||
/*Bar Properties*/ | /*Bar Properties*/ | ||
- | div. | + | div.bar{ |
margin: 0px; | margin: 0px; | ||
padding: 5px; | padding: 5px; | ||
width: 990px; | width: 990px; | ||
height: 50px; | height: 50px; | ||
- | |||
} | } | ||
- | div# | + | /*Sepparating space: 20px;*/ |
+ | /*Box Properties*/ | ||
+ | div.box{ | ||
+ | margin: 0px; | ||
+ | padding: 5px; | ||
+ | width: 140px; | ||
+ | height: 140px; | ||
+ | } | ||
+ | /*Screen Properties*/ | ||
+ | div.screen{ | ||
+ | margin: 0px; | ||
+ | padding: 5px; | ||
+ | width: 650px; | ||
+ | height: 480px; | ||
+ | position: absolute; | ||
+ | top: 80px; | ||
+ | left: 170px; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | div#psi { | ||
position: absolute; | position: absolute; | ||
top: 0px; | top: 0px; | ||
left: 0px; | left: 0px; | ||
+ | backgound-color: #44CC44; | ||
} | } | ||
- | div# | + | div#omega { |
position: absolute; | position: absolute; | ||
bottom: 0px; | bottom: 0px; | ||
left: 0px; | left: 0px; | ||
+ | backgound-color: #444444; | ||
} | } | ||
- | + | div#alpha{ | |
- | + | ||
- | div | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
position: absolute; | position: absolute; | ||
top: 80px; | top: 80px; | ||
left: 0px; | left: 0px; | ||
+ | backgound-color: #CC4444; | ||
} | } | ||
- | div# | + | div#beta{ |
position: absolute; | position: absolute; | ||
top: 250px; | top: 250px; | ||
left: 0px; | left: 0px; | ||
+ | backgound-color: #4444CC; | ||
} | } | ||
- | div# | + | div#gamma{ |
position: absolute; | position: absolute; | ||
top: 420px; | top: 420px; | ||
left: 0px; | left: 0px; | ||
+ | backgound-color: #44CCCC; | ||
} | } | ||
- | div# | + | div#delta{ |
position: absolute; | position: absolute; | ||
top: 80px; | top: 80px; | ||
right: 0px; | right: 0px; | ||
+ | backgound-color: #CC44CC; | ||
} | } | ||
- | div# | + | div#epsilon{ |
position: absolute; | position: absolute; | ||
top: 250px; | top: 250px; | ||
right: 0px; | right: 0px; | ||
+ | backgound-color: #CCCC44; | ||
} | } | ||
- | div# | + | div#zeta{ |
position: absolute; | position: absolute; | ||
top: 420px; | top: 420px; | ||
right: 0px; | right: 0px; | ||
+ | backgound-color: #CCCCCC; | ||
} | } | ||
- | div# | + | div#psiScreen { |
- | + | backgound-color: #44CC44; | |
- | + | z-index: 2; | |
- | + | } | |
- | + | div#alphaScreen { | |
- | + | backgound-color: #CC4444; | |
- | + | } | |
- | + | div#betaScreen { | |
- | + | backgound-color: #4444CC; | |
+ | } | ||
+ | div#gammaScreen { | ||
+ | backgound-color: #44CCCC; | ||
+ | } | ||
+ | div#deltaScreen { | ||
+ | backgound-color: #CC44CC; | ||
+ | } | ||
+ | div#epsilonScreen { | ||
+ | backgound-color: #CCCC44; | ||
+ | } | ||
+ | div#zetaScreen { | ||
+ | backgound-color: #CCCCCC; | ||
+ | } | ||
+ | div#omegaScreen { | ||
+ | backgound-color: #444444; | ||
} | } | ||
Line 266: | Line 309: | ||
</html> | </html> | ||
- | <div id=" | + | <div id="psi" class="bar" onMouseOver="HeapScreen(this.id); return(true);">Psi</div> |
- | <div id=" | + | <div id="psiScreen" class="screen">==psiPSIpsiPSIpsi==</div> |
- | <div id=" | + | |
- | <div id=" | + | <div id="alpha" class="box" onMouseOver="HeapScreen(this.id); return(true);">Alpha</div> |
- | <div id=" | + | <div id="alphaScreen" class="screen">==alphaALPHAalpha==</div> |
- | <div id=" | + | |
- | <div id=" | + | <div id="beta" class="box" onMouseOver="HeapScreen(this.id); return(true);">Beta</div> |
- | <div id=" | + | <div id="betaScreen" class="screen">==betaBETAbeta==</div> |
- | <div id=" | + | |
+ | <div id="gamma" class="box" onMouseOver="HeapScreen(this.id); return(true);">Gamma</div> | ||
+ | <div id="gammaScreen" class="screen">==gammaGAMMAgamma==</div> | ||
+ | |||
+ | <div id="delta" class="box" onMouseOver="HeapScreen(this.id); return(true);">Delta</div> | ||
+ | <div id="deltaScreen" class="screen">==deltaDELTAdelta==</div> | ||
+ | |||
+ | <div id="epsilon" class="box" onMouseOver="HeapScreen(this.id); return(true);">Epsilon</div> | ||
+ | <div id="epsilonScreen" class="screen">==epsilonEPSILONepsilon==</div> | ||
+ | |||
+ | <div id="zeta" class="box" onMouseOver="HeapScreen(this.id); return(true);">Zeta</div> | ||
+ | <div id="zetaScreen" class="screen">==zetaZETAzeta==</div> | ||
+ | |||
+ | <div id="omega" class="bar" onMouseOver="HeapScreen(this.id); return(true);">Omega</div> | ||
+ | <div id="omegaScreen" class="screen">==omegaOMEGAomega==</div> |
Revision as of 00:11, 23 July 2011
==psiPSIpsiPSIpsi==
Alpha
==alphaALPHAalpha==
Beta
==betaBETAbeta==
Gamma
==gammaGAMMAgamma==
Delta
==deltaDELTAdelta==
Epsilon
==epsilonEPSILONepsilon==
Zeta
==zetaZETAzeta==
==omegaOMEGAomega==