Template:CSS/UT-Tokyo
From 2014.igem.org
(Difference between revisions)
Pineappler (Talk | contribs) |
|||
(170 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<head> | <head> | ||
+ | <script type="text/javascript"> | ||
+ | function changeIcon(URL) { | ||
+ | var target = document.getElementsByTagName("link"); | ||
+ | var i = 0; | ||
+ | for(i = 0;i<target.length;i++){ | ||
+ | if(target[i].rel == "shortcut icon"){ | ||
+ | target[i].parentNode.removeChild(target[i]); | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | var link = document.createElement("link"); | ||
+ | link.type = "image/x-icon"; | ||
+ | link.rel = "shortcut icon"; | ||
+ | link.href = URL; | ||
- | + | document.getElementsByTagName("head")[0].appendChild(link); | |
+ | } | ||
+ | changeIcon("https://static.igem.org/mediawiki/2014/a/a9/Icon_32.gif"); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | <style type="text/css"> | ||
+ | |||
+ | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear, .firstHeading{ | ||
+ | display: none; | ||
+ | } | ||
+ | /*-- hides default wiki settings --*/ | ||
.firstHeading { | .firstHeading { | ||
width: 975px; | width: 975px; | ||
Line 10: | Line 35: | ||
padding-top: 100px; | padding-top: 100px; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
- | font-family: Georgia, Times, "Times New Roman", serif; | + | font-family: Georgia, Times, "Times New Roman", serif; |
+ | color:#FFF; | ||
} | } | ||
- | h1, h2, h3, h4, h5 { font-family: Georgia, Times, "Times New Roman", serif;} | + | h1, h2, h3, h4, h5 { |
+ | font-family: Georgia, Times, "Times New Roman", serif; | ||
+ | color:#FFF; | ||
+ | } | ||
table{ background-color:#D20505;} | table{ background-color:#D20505;} | ||
Line 22: | Line 51: | ||
height: 14px; | height: 14px; | ||
z-index: 100; | z-index: 100; | ||
- | |||
position: fixed; | position: fixed; | ||
width: 975px; | width: 975px; | ||
left: 50%; | left: 50%; | ||
margin-left: -487px; | margin-left: -487px; | ||
+ | top:0; | ||
} | } | ||
Line 45: | Line 74: | ||
} | } | ||
- | |||
- | |||
- | |||
#globalWrapper, #content { /*-- changes default wiki settings --*/ | #globalWrapper, #content { /*-- changes default wiki settings --*/ | ||
Line 54: | Line 80: | ||
border: 0px; | border: 0px; | ||
background-color: transparent; | background-color: transparent; | ||
- | margin: 0px; | + | margin: 0px auto; |
padding: 0px; | padding: 0px; | ||
+ | position:relative; | ||
+ | |||
} | } | ||
- | html, | + | html, .wrapper { /*-- changes default wiki settings --*/ |
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
/* background-color: #FFF; */ | /* background-color: #FFF; */ | ||
+ | } | ||
+ | body { | ||
+ | background-color: #9FA0A0; | ||
+ | width: 100%; | ||
+ | margin: 0 auto; | ||
+ | color:white; | ||
} | } | ||
Line 211: | Line 245: | ||
.annItem li {list-style: none; margin: 5px} | .annItem li {list-style: none; margin: 5px} | ||
- | + | #index_header{ | |
- | + | position: relative; | |
- | + | width:500px; | |
- | width: | + | margin: 0 auto; |
} | } | ||
- | #index_header { | + | #index_header img{ |
+ | width: 500px; | ||
+ | } | ||
+ | #team{ | ||
+ | width: 400px; | ||
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
- | # | + | #team img{ |
+ | width: 400px; | ||
+ | } | ||
+ | |||
+ | #index_navi{ | ||
+ | position: relative; | ||
+ | width:600px; | ||
margin: 0 auto; | margin: 0 auto; | ||
- | # | + | } |
+ | #index_navi ul.index_menu{ | ||
list-style-type:none; | list-style-type:none; | ||
+ | list-style:none; | ||
+ | width:600px; | ||
+ | height:140px; | ||
} | } | ||
- | # | + | #index_navi ul.index_menu li{ |
float: left; | float: left; | ||
- | width: | + | width: 120px; |
- | + | margin: 0; | |
+ | } | ||
+ | #index_navi ul.index_menu li img{ | ||
+ | width: 110px; | ||
+ | margin: 0; | ||
+ | } | ||
+ | .contents{ | ||
+ | align:left; | ||
+ | position: relative; | ||
+ | top:10px; | ||
+ | width:600px; | ||
+ | margin: 0 auto; | ||
} | } | ||
+ | .contents p{ | ||
+ | text-align:left; | ||
+ | width: 600px; | ||
+ | color:#FFF; | ||
+ | } | ||
+ | .contents h2{ | ||
+ | text-align:left; | ||
+ | padding-left:0px; | ||
+ | color:#FFF; | ||
+ | } | ||
+ | /* ここからindex用 */ | ||
+ | .left-side{ | ||
+ | width:50%; | ||
+ | height:750px; | ||
+ | background-color:#FFF; | ||
+ | float:left; | ||
+ | position:absolute; | ||
+ | top:0; | ||
+ | } | ||
+ | #bodyContent{ | ||
+ | width:100%; | ||
+ | } | ||
+ | #contentSub{ | ||
+ | width:100%; | ||
+ | } | ||
+ | .top{ | ||
+ | width:100%; | ||
+ | height:750px; | ||
+ | background-color:#000; | ||
+ | } | ||
+ | #top-img{ | ||
+ | display:block; | ||
+ | margin-left:-530px; | ||
+ | position:absolute; | ||
+ | top:50px; | ||
+ | left:50%; | ||
+ | width:900px; | ||
+ | } | ||
+ | #left-img{ | ||
+ | width:300px; | ||
+ | position:absolute; | ||
+ | top:350px; | ||
+ | right:50%; | ||
+ | margin-right:100px; | ||
+ | z-index:200; | ||
+ | border-radius:30px; | ||
+ | } | ||
+ | #right-img{ | ||
+ | width:300px; | ||
+ | position:absolute; | ||
+ | top:350px; | ||
+ | left:50%; | ||
+ | margin-left:100px; | ||
+ | z-index:200; | ||
+ | border-radius:30px; | ||
+ | } | ||
+ | #left-bottom{ | ||
+ | width:50%; | ||
+ | height:100px; | ||
+ | position:absolute; | ||
+ | top:650px; | ||
+ | float:left; | ||
+ | background-image:url("https://static.igem.org/mediawiki/2014/e/eb/Gra_white.png"); | ||
+ | background-repeat:repeat no-repeat; | ||
+ | } | ||
+ | #right-bottom{ | ||
+ | width:50%; | ||
+ | height:100px; | ||
+ | position:absolute; | ||
+ | top:650px; | ||
+ | margin-left:50%; | ||
+ | background-image:url("https://static.igem.org/mediawiki/2014/b/ba/Gra_black.png"); | ||
+ | background-repeat:repeat no-repeat; | ||
+ | } | ||
+ | #index-body{ | ||
+ | width:100%; | ||
+ | background-color:#9FA0A0; | ||
+ | } | ||
+ | .content-box{ | ||
+ | width:1000px; | ||
+ | background-color:#FFF; | ||
+ | margin-left:auto; | ||
+ | margin-right:auto; | ||
+ | position:relative; | ||
+ | top:50px; | ||
+ | border-radius:10px; | ||
+ | margin-bottom:30px; | ||
+ | min-height:150px; | ||
+ | } | ||
+ | .content-box h2, p{ | ||
+ | color:#000; | ||
+ | margin-left:30px; | ||
+ | width:950px; | ||
+ | } | ||
+ | .content-box h2{ | ||
+ | font-size:x-large; | ||
+ | } | ||
+ | .content-box p{ | ||
+ | font-size: medium; | ||
+ | font-family: Georgia; | ||
+ | color: #3F3F3F; | ||
+ | } | ||
+ | img.circle{ | ||
+ | visibility:hidden; | ||
+ | width:150px; | ||
+ | position:absolute; | ||
+ | } | ||
+ | .content-box #box-left{ | ||
+ | width:500px; | ||
+ | float:left; | ||
+ | } | ||
+ | .content-box #box-right{ | ||
+ | width:400px; | ||
+ | float:left; | ||
+ | } | ||
+ | #box-right h2, #box-left h2{ | ||
+ | width:300px; | ||
+ | } | ||
+ | img.sns{ | ||
+ | width:150px; | ||
+ | padding-left:2px; | ||
+ | padding-bottom:10px; | ||
+ | } | ||
+ | img{ | ||
+ | border:0; | ||
+ | } | ||
</style> | </style> | ||
- | + | <script type = "text/javascript" language = "Javascript"> | |
+ | function randomEcoli(){ | ||
+ | document.title = "TOP | UT-Tokyo 2014"; | ||
+ | var rand1 = Math.floor(Math.random()*9)+1; | ||
+ | var str = "circle0" + rand1; | ||
+ | document.getElementById(str).style.visibility = "visible"; | ||
+ | document.getElementById(str).style.top = "280px"; | ||
+ | document.getElementById(str).style.right = "50%"; | ||
+ | document.getElementById(str).style.paddingRight = "380px"; | ||
+ | var rand2 = Math.floor(Math.random()*9)+1; | ||
+ | var str = "circle0" + rand2; | ||
+ | document.getElementById(str).style.visibility = "visible"; | ||
+ | document.getElementById(str).style.top = "580px"; | ||
+ | document.getElementById(str).style.right = "50%"; | ||
+ | document.getElementById(str).style.paddingRight = "100px"; | ||
+ | document.getElementById(str).style.zIndex = "100"; | ||
+ | var rand3 = Math.floor(Math.random()*9)+1; | ||
+ | var str = "circle0" + rand3; | ||
+ | document.getElementById(str).style.visibility = "visible"; | ||
+ | document.getElementById(str).style.top = "300px"; | ||
+ | document.getElementById(str).style.right = ""; | ||
+ | document.getElementById(str).style.paddingRight = ""; | ||
+ | document.getElementById(str).style.left = "50%"; | ||
+ | document.getElementById(str).style.marginLeft = "-30px"; | ||
+ | var rand4 = Math.floor(Math.random()*9)+1; | ||
+ | var str = "circle0" + rand4; | ||
+ | document.getElementById(str).style.visibility = "visible"; | ||
+ | document.getElementById(str).style.top = "270px"; | ||
+ | document.getElementById(str).style.right = ""; | ||
+ | document.getElementById(str).style.paddingRight = ""; | ||
+ | document.getElementById(str).style.marginLeft = ""; | ||
+ | document.getElementById(str).style.left = "50%"; | ||
+ | document.getElementById(str).style.paddingLeft = "400px"; | ||
+ | var rand5 = Math.floor(Math.random()*9)+1; | ||
+ | var str = "circle0" + rand5; | ||
+ | document.getElementById(str).style.visibility = "visible"; | ||
+ | document.getElementById(str).style.top = "50px"; | ||
+ | document.getElementById(str).style.right = ""; | ||
+ | document.getElementById(str).style.paddingRight = ""; | ||
+ | document.getElementById(str).style.marginLeft = ""; | ||
+ | document.getElementById(str).style.paddingLeft = ""; | ||
+ | document.getElementById(str).style.left = "50%"; | ||
+ | document.getElementById(str).style.paddingLeft = "350px"; | ||
+ | var rand6 = Math.floor(Math.random()*9)+1; | ||
+ | var str = "circle0" + rand6; | ||
+ | document.getElementById(str).style.visibility = "visible"; | ||
+ | document.getElementById(str).style.top = "440px"; | ||
+ | document.getElementById(str).style.right = ""; | ||
+ | document.getElementById(str).style.paddingRight = ""; | ||
+ | document.getElementById(str).style.marginLeft = ""; | ||
+ | document.getElementById(str).style.paddingLeft = ""; | ||
+ | document.getElementById(str).style.left = "50%"; | ||
+ | document.getElementById(str).style.marginLeft = "-120px"; | ||
+ | var rand7 = Math.floor(Math.random()*9)+1; | ||
+ | var str = "circle0" + rand7; | ||
+ | document.getElementById(str).style.visibility = "visible"; | ||
+ | document.getElementById(str).style.top = "540px"; | ||
+ | document.getElementById(str).style.left = ""; | ||
+ | document.getElementById(str).style.paddingRight = ""; | ||
+ | document.getElementById(str).style.marginLeft = ""; | ||
+ | document.getElementById(str).style.paddingLeft = ""; | ||
+ | document.getElementById(str).style.right = "50%"; | ||
+ | document.getElementById(str).style.paddingRight = "370px"; | ||
+ | document.getElementById(str).style.zIndex = "100"; | ||
+ | } | ||
+ | </script> | ||
</head> | </head> | ||
</html> | </html> |
Latest revision as of 03:27, 18 October 2014