Template:SJTU09 header
From 2009.igem.org
(Difference between revisions)
Pnstontale (Talk | contribs) |
|||
Line 2: | Line 2: | ||
<style type="text/css"> | <style type="text/css"> | ||
<!-- | <!-- | ||
- | + | * { | |
- | + | margin: 0px; padding: 0px; border: 0px; | |
- | + | ||
} | } | ||
- | # | + | .hide { |
+ | display:none; | ||
+ | } | ||
+ | body { | ||
+ | background:#333; | ||
+ | position:relative; | ||
+ | } | ||
+ | #content, #bodyContent { | ||
+ | border: 0px; | ||
+ | padding: 0px; | ||
+ | width: 975px; | ||
+ | background:none; | ||
+ | } | ||
+ | #content h1.firstHeading, #contentSub { | ||
+ | display: none; | ||
+ | } | ||
+ | #mainDiv { | ||
+ | background: #4D4A3B url(https://static.igem.org/mediawiki/2009/f/f3/SJTU09_Page_Background.png) no-repeat; | ||
+ | font-family: Arial, Helvetica, sans-serif; | ||
+ | color: #fff; | ||
+ | width: 975px; | ||
+ | position: relative; | ||
+ | z-index: 0; | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | padding-bottom: 35px; | ||
+ | padding-top: 526px; | ||
+ | } | ||
+ | #logoDiv { | ||
+ | left: 25px; | ||
+ | top: 20px; | ||
position: absolute; | position: absolute; | ||
- | width: | + | width: 273px; |
- | + | height: 356px; | |
- | + | z-index: 0; | |
- | + | ||
- | + | ||
} | } | ||
- | + | #logoHeader { | |
- | # | + | |
position: absolute; | position: absolute; | ||
- | + | left: 5px; | |
- | + | z-index: 2; | |
- | + | width: 190px; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #logoHeader img { |
- | + | border-width: 0px; | |
- | + | ||
} | } | ||
- | + | #logoContent { | |
- | # | + | position: absolute; |
- | position: | + | background: #222222; |
- | + | top: 28px; | |
+ | height: 328px; | ||
+ | width: 273px; | ||
+ | z-index: 1; | ||
} | } | ||
- | # | + | #teamLogo { |
- | + | left: 6px; | |
+ | top: 6px; | ||
+ | position: absolute; | ||
} | } | ||
- | # | + | #projectCard { |
- | + | position: absolute; | |
- | background:# | + | top: 6px; |
- | + | left: 6px; | |
+ | width: 260px; | ||
+ | height: 315px; | ||
+ | background-color:#FFF; | ||
+ | display: none; | ||
} | } | ||
- | # | + | #projectCard p{ |
- | + | font: italic 14px Georgia, "Times New Roman", Times, serif; | |
- | + | color: #A8A800; | |
- | + | margin: 15px; | |
- | + | text-align: left; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #projectCard p:first-letter { |
- | width: | + | color:#3F2812; |
- | + | font-size:3em; | |
+ | float:left; | ||
+ | } | ||
+ | #galleryDiv { | ||
+ | position: absolute; | ||
+ | left: 311px; | ||
+ | top: 20px; | ||
+ | background:#111; | ||
+ | overflow:hidden; | ||
+ | border:1px solid #FFF; | ||
+ | width:596px; | ||
+ | height:354px; | ||
} | } | ||
- | # | + | #sideMenu { |
- | + | position: absolute; | |
- | + | width: 140px; | |
- | + | left: 60px; | |
- | + | top: 518px; | |
- | width: | + | |
- | + | ||
} | } | ||
- | # | + | #sideMenu h3 { |
- | font: | + | font: bolder normal 14px/120% Arial, Helvetica, sans-serif; |
text-transform: capitalize; | text-transform: capitalize; | ||
- | |||
margin: 0px; | margin: 0px; | ||
padding: 0px; | padding: 0px; | ||
+ | border-bottom: 1px solid #FFF; | ||
} | } | ||
- | # | + | #sideMenu h3 a { |
display:block; | display:block; | ||
- | padding: | + | padding: 0px 4px; |
text-decoration: none; | text-decoration: none; | ||
- | color: # | + | color: #DDD; |
- | + | filter:dropshadow(color:#000000,offx=4,offy=4,positive=1); | |
} | } | ||
- | # | + | #sideMenu h3 a:hover{ |
display:block; | display:block; | ||
- | color:# | + | color: #FFF; |
- | + | text-decoration: none; | |
- | + | font-weight: bold; | |
- | + | ||
- | + | ||
} | } | ||
- | # | + | #sideMenu ul{ |
padding: 0; | padding: 0; | ||
- | margin: 0 0 | + | margin: 0 0 8px; |
list-style: none; | list-style: none; | ||
} | } | ||
- | # | + | #sideMenu li{ |
- | font: | + | font: 13px Georgia, "Times New Roman", Times, serif; |
margin:0; | margin:0; | ||
+ | list-style: none; | ||
} | } | ||
- | # | + | #sideMenu li a{ |
- | height: | + | height: 15px; |
- | + | ||
display:block; | display:block; | ||
- | padding: | + | padding: 1px 5px 1px 10px; |
+ | color: #A5DE46; | ||
+ | line-height: 120%; | ||
text-decoration: none; | text-decoration: none; | ||
- | + | list-style: none; | |
- | + | ||
} | } | ||
- | # | + | #sideMenu li a:hover { |
display: block; | display: block; | ||
- | + | color: #D5FF76; | |
- | + | font-style: italic; | |
+ | text-decoration: underline; | ||
+ | list-style: none; | ||
} | } | ||
- | # | + | #contextDiv h0,h1 { |
- | + | /*height: 64px;*/ | |
- | + | width: 500px; | |
- | color: # | + | position: absolute; |
+ | left: 147px; | ||
+ | top: -110px; | ||
+ | font: 25px/120% Arial, Helvetica, sans-serif; | ||
+ | color: #5F7617; | ||
} | } | ||
- | + | #contextDiv { | |
- | + | padding: 0px 45px 30px; | |
- | # | + | background-color: #FFF; |
+ | color: #333333; | ||
+ | width: 608px; | ||
+ | font: 14px "Palatino Linotype", "Book Antiqua", Palatino, serif; | ||
+ | border-top: 0px solid #858480; | ||
+ | border-right: 2px solid #858480; | ||
+ | border-bottom: 0px solid #858480; | ||
+ | border-left: 1px solid #78756B; | ||
+ | /*margin: 526px auto 35px 222px;*/ | ||
+ | left: 223px; | ||
position: relative; | position: relative; | ||
- | + | min-height:470px; | |
- | + | height:auto !important; | |
- | + | height:470px; | |
- | + | overflow:visible; | |
- | + | ||
- | height: | + | |
- | + | ||
} | } | ||
- | # | + | #contextDiv p { |
- | margin: | + | margin-top:8px; |
+ | font-size:14px; | ||
} | } | ||
- | + | #contextDiv p:first-letter { | |
- | # | + | color:#3F2812; |
- | + | font-size:2em; | |
- | + | font-weight:bold; | |
- | + | line-height: 18px; | |
- | + | } | |
- | + | #contentTop { | |
- | + | position: absolute; | |
- | + | top: -125px; | |
- | + | ||
- | + | ||
- | color: # | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | font-size: | + | |
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | # | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
--> | --> | ||
</style> | </style> | ||
+ | |||
<script> | <script> | ||
- | function | + | function switchItem(type) |
{ | { | ||
- | if (document. | + | if(type==1) |
- | + | { | |
- | + | document.getElementById("team1").style.display="inline"; | |
- | + | document.getElementById("team2").style.display="none"; | |
- | + | document.getElementById("project1").style.display="none"; | |
- | + | document.getElementById("project2").style.display="inline"; | |
- | + | document.getElementById("teamLogo").style.display="inline"; | |
- | + | document.getElementById("projectCard").style.display="none"; | |
- | + | } | |
- | + | else | |
+ | { | ||
+ | document.getElementById("team1").style.display="none"; | ||
+ | document.getElementById("team2").style.display="inline"; | ||
+ | document.getElementById("project1").style.display="inline"; | ||
+ | document.getElementById("project2").style.display="none"; | ||
+ | document.getElementById("project2").style.display="none"; | ||
+ | document.getElementById("teamLogo").style.display="none"; | ||
+ | document.getElementById("projectCard").style.display="inline"; | ||
+ | } | ||
} | } | ||
</script> | </script> | ||
- | + | <!--[if IE 6]> | |
- | <div id=" | + | <script> |
- | <div id=" | + | // DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>. |
- | + | var DD_belatedPNG={ns:"DD_belatedPNG",imgSize:{},delay:10,nodesFixed:0,createVmlNameSpace:function(){if(document.namespaces){if(!document.namespaces[this.ns]){document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}}},createVmlStyleSheet:function(){var b,a;b=document.createElement("style");b.setAttribute("media","screen");document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);if(b.styleSheet){b=b.styleSheet;b.addRule(this.ns+"\\:*","{behavior:url(#default#VML)}");b.addRule(this.ns+"\\:shape","position:absolute;");b.addRule("img."+this.ns+"_sizeFinder","behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;");this.screenStyleSheet=b;a=document.createElement("style");a.setAttribute("media","print");document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);a=a.styleSheet;a.addRule(this.ns+"\\:*","{display: none !important;}");a.addRule("img."+this.ns+"_sizeFinder","{display: none !important;}")}},readPropertyChange:function(){var b,c,a;b=event.srcElement;if(!b.vmlInitiated){return}if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){DD_belatedPNG.applyVML(b)}if(event.propertyName=="style.display"){c=(b.currentStyle.display=="none")?"none":"block";for(a in b.vml){if(b.vml.hasOwnProperty(a)){b.vml[a].shape.style.display=c}}}if(event.propertyName.search("filter")!=-1){DD_belatedPNG.vmlOpacity(b)}},vmlOpacity:function(b){if(b.currentStyle.filter.search("lpha")!=-1){var a=b.currentStyle.filter;a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;b.vml.color.shape.style.filter=b.currentStyle.filter;b.vml.image.fill.opacity=a}},handlePseudoHover:function(a){setTimeout(function(){DD_belatedPNG.applyVML(a)},1)},fix:function(a){if(this.screenStyleSheet){var c,b;c=a.split(",");for(b=0;b<c.length;b++){this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))")}}},applyVML:function(a){a.runtimeStyle.cssText="";this.vmlFill(a);this.vmlOffsets(a);this.vmlOpacity(a);if(a.isImg){this.copyImageBorders(a)}},attachHandlers:function(i){var d,c,g,e,b,f;d=this;c={resize:"vmlOffsets",move:"vmlOffsets"};if(i.nodeName=="A"){e={mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"};for(b in e){if(e.hasOwnProperty(b)){c[b]=e[b]}}}for(f in c){if(c.hasOwnProperty(f)){g=function(){d[c[f]](i)};i.attachEvent("on"+f,g)}}i.attachEvent("onpropertychange",this.readPropertyChange)},giveLayout:function(a){a.style.zoom=1;if(a.currentStyle.position=="static"){a.style.position="relative"}},copyImageBorders:function(b){var c,a;c={borderStyle:true,borderWidth:true,borderColor:true};for(a in c){if(c.hasOwnProperty(a)){b.vml.color.shape.style[a]=b.currentStyle[a]}}},vmlFill:function(e){if(!e.currentStyle){return}else{var d,f,g,b,a,c;d=e.currentStyle}for(b in e.vml){if(e.vml.hasOwnProperty(b)){e.vml[b].shape.style.zIndex=d.zIndex}}e.runtimeStyle.backgroundColor="";e.runtimeStyle.backgroundImage="";f=true;if(d.backgroundImage!="none"||e.isImg){if(!e.isImg){e.vmlBg=d.backgroundImage;e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5)}else{e.vmlBg=e.src}g=this;if(!g.imgSize[e.vmlBg]){a=document.createElement("img");g.imgSize[e.vmlBg]=a;a.className=g.ns+"_sizeFinder";a.runtimeStyle.cssText="behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;";c=function(){this.width=this.offsetWidth;this.height=this.offsetHeight;g.vmlOffsets(e)};a.attachEvent("onload",c);a.src=e.vmlBg;a.removeAttribute("width");a.removeAttribute("height");document.body.insertBefore(a,document.body.firstChild)}e.vml.image.fill.src=e.vmlBg;f=false}e.vml.image.fill.on=!f;e.vml.image.fill.color="none";e.vml.color.shape.style.backgroundColor=d.backgroundColor;e.runtimeStyle.backgroundImage="none";e.runtimeStyle.backgroundColor="transparent"},vmlOffsets:function(d){var h,n,a,e,g,m,f,l,j,i,k;h=d.currentStyle;n={W:d.clientWidth+1,H:d.clientHeight+1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop};a=(n.L+n.bLW==1)?1:0;e=function(b,p,q,c,s,u){b.coordsize=c+","+s;b.coordorigin=u+","+u;b.path="m0,0l"+c+",0l"+c+","+s+"l0,"+s+" xe";b.style.width=c+"px";b.style.height=s+"px";b.style.left=p+"px";b.style.top=q+"px"};e(d.vml.color.shape,(n.L+(d.isImg?0:n.bLW)),(n.T+(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);e(d.vml.image.shape,(n.L+n.bLW),(n.T+n.bTW),(n.W),(n.H),1);g={X:0,Y:0};if(d.isImg){g.X=parseInt(h.paddingLeft,10)+1;g.Y=parseInt(h.paddingTop,10)+1}else{for(j in g){if(g.hasOwnProperty(j)){this.figurePercentage(g,n,j,h["backgroundPosition"+j])}}}d.vml.image.fill.position=(g.X/n.W)+","+(g.Y/n.H);m=h.backgroundRepeat;f={T:1,R:n.W+a,B:n.H,L:1+a};l={X:{b1:"L",b2:"R",d:"W"},Y:{b1:"T",b2:"B",d:"H"}};if(m!="repeat"||d.isImg){i={T:(g.Y),R:(g.X+n.w),B:(g.Y+n.h),L:(g.X)};if(m.search("repeat-")!=-1){k=m.split("repeat-")[1].toUpperCase();i[l[k].b1]=1;i[l[k].b2]=n[l[k].d]}if(i.B>n.H){i.B=n.H}d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}else{d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}},figurePercentage:function(d,c,f,a){var b,e;e=true;b=(f=="X");switch(a){case"left":case"top":d[f]=0;break;case"center":d[f]=0.5;break;case"right":case"bottom":d[f]=1;break;default:if(a.search("%")!=-1){d[f]=parseInt(a,10)/100}else{e=false}}d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));if(d[f]%2===0){d[f]++}return d[f]},fixPng:function(c){c.style.behavior="none";var g,b,f,a,d;if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){return}c.isImg=false;if(c.nodeName=="IMG"){if(c.src.toLowerCase().search(/\.png$/)!=-1){c.isImg=true;c.style.visibility="hidden"}else{return}}else{if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){return}}g=DD_belatedPNG;c.vml={color:{},image:{}};b={shape:{},fill:{}};for(a in c.vml){if(c.vml.hasOwnProperty(a)){for(d in b){if(b.hasOwnProperty(d)){f=g.ns+":"+d;c.vml[a][d]=document.createElement(f)}}c.vml[a].shape.stroked=false;c.vml[a].shape.appendChild(c.vml[a].fill);c.parentNode.insertBefore(c.vml[a].shape,c)}}c.vml.image.shape.fillcolor="none";c.vml.image.fill.type="tile";c.vml.color.fill.on=false;g.attachHandlers(c);g.giveLayout(c);g.giveLayout(c.offsetParent);c.vmlInitiated=true;g.applyVML(c)}};try{document.execCommand("BackgroundImageCache",false,true)}catch(r){}DD_belatedPNG.createVmlNameSpace();DD_belatedPNG.createVmlStyleSheet(); | |
- | + | DD_belatedPNG.fix('#mainDiv'); | |
- | < | + | </script> |
- | </ | + | <![endif]--> |
+ | <div id="mainDiv"> | ||
+ | <div id="logoDiv"> | ||
+ | <div id="logoHeader"> | ||
+ | <a name="bannerTop"></a> | ||
+ | <a href="https://2009.igem.org/Team:SJTU-BioX-Shanghai/The_team#bannerTop" onMouseOver="javascript:switchItem(1);"><img id="team1" src="https://static.igem.org/mediawiki/2009/a/a1/SJTU09_Main_Team1.gif" width="90" height="34" alt="Team Logo Button" /><img id="team2" src="https://static.igem.org/mediawiki/2009/b/b0/SJTU09_Main_Team2.gif" class="hide" width="90" height="34" alt="Team Logo Button" /></a><a href="https://2009.igem.org/Team:SJTU-BioX-Shanghai/The_project#bannerTop" onMouseOver="javascript:switchItem(2);"><img id="project2" src="https://static.igem.org/mediawiki/2009/7/76/SJTU09_Main_Project2.gif" width="86" height="34" alt="Project Button" /><img id="project1" src="https://static.igem.org/mediawiki/2009/0/0e/SJTU09_Main_Project1.gif" width="90" class="hide" height="34" alt="Team Logo Button" /></a> | ||
+ | </div> | ||
+ | <div id="logoContent"> | ||
+ | <img src="https://static.igem.org/mediawiki/2009/a/ae/SJTU09_Main_Logo.gif" id="teamLogo" width="260" height="315" border="0px" alt="Team Logo" /> | ||
+ | <div id="projectCard"> | ||
+ | <p><img src="https://static.igem.org/mediawiki/2009/e/e9/SJTU09_Main_mascot.gif" width="230" height="110" border="0" /></p> | ||
+ | <p>Project introduction. | ||
+ | Inspired by the natural regulator of circadian bioclock exhibited in most eukaryotic organisms, our team has designed an E.coli-based genetic network with the toxin-antitoxin system so that the bacterium oscillates between two states of dormancy and activity... </p> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
- | |||
- | |||
- | |||
- | |||
- | < | + | <div id="galleryDiv"> |
- | + | </div> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </div> | + | |
</html> | </html> |
Revision as of 12:00, 7 October 2009