Difference between revisions of "Template:China Tongji"

(Prototype team template page)
 
Line 1: Line 1:
−
{{Template_All_Teams}}
+
__NOTOC__<html lang="en">
 +
<head>
 +
<script>
 +
$(document).ready(function(){
 +
$('p:empty').css('display','none');
 +
});
 +
</script>
 +
</head>
 +
<!-- wiki hacks --><style type="text/css"><!--
 +
/*------------------------------------*\
 +
RESET
 +
\*------------------------------------*/
 +
table{
 +
border-collapse:collapse;
 +
border-spacing:0;
 +
background-color:transparent;
 +
}
 +
a {
 +
color:teal;
 +
}
 +
a:visited {
 +
color:teal;
 +
}
 +
fieldset,img{
 +
border:0;
 +
}
 +
address,caption,cite,code,dfn,th,var{
 +
font-style:normal;
 +
font-weight:normal;
 +
}
 +
caption,th{
 +
text-align:left;
 +
}
 +
q:before,q:after{
 +
content:'';
 +
}
 +
abbr,acronym{
 +
border:0;
 +
}
 +
/*End reset*/
  
−
<!-- Declare that you are going to use html code instead of wiki code -->
+
OL {
−
<html>
+
padding-left:2em;
 +
}
  
−
<!-- Start of CSS-->
+
#top-section
−
<style type="text/css">
+
{
 +
    height: 1em;
 +
    background-color: #FFFFFF;
 +
}
 +
#search-controls
 +
{
 +
    display: none;
 +
}
  
−
/* PAGE LAYOUT */
+
#globalwrapper {
 +
    width:1000px;
 +
    padding:20px 0px;
 +
    margin: 0 auto;
 +
    /*background-color:#ffffff;*/
 +
    height:100%;
 +
}
 +
#footer-box {
 +
    width:990px;
 +
}
 +
.firstHeading {
 +
    height:0px;
 +
display:none;
 +
}
 +
body {
 +
    background: #404040;
 +
    background-position: center;
 +
    background-repeat: repeat-y;
 +
    height:100%;
 +
}
 +
/*page title*/
 +
h1 {
 +
font-weight:bold;
 +
padding-top:20px;
 +
}
 +
/*page sections*/
 +
h2 {
 +
}
 +
/*title on header*/
 +
h5 {
 +
font-size:20pt;
 +
}
  
−
/* Change Background color*/
+
#p-logo {
−
body {  
+
    height:1px; overflow:hidden; display: none;
−
background-color: #fff;
+
}
−
}
+
  
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
+
#content {
−
#mainContainer {
+
    border-left-width:0px;
−
width: 978px;
+
    border-right-width:0px;
−
overflow:hidden;
+
    padding:0;
−
float:left;
+
    padding-top: 0;
−
margin-left:20px;
+
    width:1000px;
−
margin-bottom: 10px;
+
    border-top: none;
−
background-color: #fff;  
+
    background: #f3f3f3;
−
border-bottom: 14px solid #565656;
+
    height:100%;
−
border-right: 2px solid #565656;
+
    font-family: verdana;
−
border-left: 2px solid #565656;
+
    font-weight: 300;
−
border-top: 2px solid #565656;
+
}
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
#menubar {
−
}
+
    background-color: #FFFFFF;  
 +
}
 +
#menubar ul li a {
 +
    color: #999999; }
 +
    .right-menu li a {
 +
    color: black;
 +
    background-color: #FFFFFF;
 +
}
  
−
/* Creates the container for the menu */
+
.nav{
−
#menuContainer  {  
+
float:left;
−
float:left;
+
width:100%;
−
width: 134px;
+
margin:0;
−
padding: 20px 0px;
+
color:#FFFFFF;
−
border-top: 14px solid #565656;
+
list-style:none;
−
background-color: #E8E8E9;
+
position:relative;
−
}
+
z-index:5;
 +
text-align:center;
 +
/*CHANGE THIS TO CENTER*/
 +
padding:0 0px; /*12px;*/
 +
}
  
−
/* Creates the container for the content */
+
.nav table{
−
#contentContainer {
+
background-color:#505050;
−
padding-top:20px;
+
clear:both;
−
padding-right:10px;
+
align:center;
−
margin-bottom: 20px;
+
}
−
width: 814px;
+
.nav tr{
−
padding-left: 20px;
+
background-color:#505050;
−
float: left;
+
}
−
background-color: #fff;  
+
.nav tbody tr td{
−
border-top: 14px solid #565656;
+
float:left;
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
position:relative;
−
}
+
display:inline;
 +
width:16%;
 +
line-height: 2.2em;
 +
}
  
−
/*Set up height place holder for the banner*/
+
.nav a{
−
#bannerContainer {
+
height:1.5em;
−
height:200px;
+
padding: 0.2em;
−
margin:auto;
+
color:#FFF;;
−
text-align:center;
+
font-size:13pt;
−
color: #24B694;
+
background-color:#505050;
−
}
+
border-right:0px solid white;
 +
white-space:nowrap;
 +
text-decoration:none;
 +
display:block;
 +
width:100%;
 +
}
  
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
.nav a:hover{
 +
background-color:#303030!important;
 +
}
  
−
/*Change the styling of text for everything inside main container*/
+
/*--- DROPDOWN ---*/
−
#mainContainer p {  
+
.nav ul{
−
font-size: 13px;
+
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
−
color: #000000;
+
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
−
}
+
list-style:none;
−
+
position:absolute;
−
/*This changes the color and font family */
+
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
−
#contentContainer h1, h2, h3, h4, h5, h6 {
+
margin-top: 0;
−
color: #565656;
+
margin-left:0;
−
border-bottom: none;
+
margin-right:0;
−
font-weight: bold;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
margin-top:10px;
+
−
}
+
  
−
/*Style of the links - links are different inside the menu */
+
}
−
#contentContainer a {
+
−
font-weight: bold;
+
−
color: #23b593;
+
−
}
+
  
−
  /* Styling links on hover- links are different inside the menu */
 
−
#contentContainer a:hover {
 
−
color: #59bf92;
 
−
}
 
  
−
/*Change the styling of tables */
+
.nav ul li{
−
        #contentContainer table {
+
padding-top:1px;
−
    border: 1px solid #565656;
+
}
−
    border-collapse: collapse;
+
−
    width: 90%
+
−
    margin: auto;
+
−
    margin-bottom: 15px;
+
−
    margin-top: 15px;
+
−
    margin-right: 10px;
+
−
    margin-left: 10px;
+
−
    }
+
  
−
/*Change the styling of table cells*/
+
.nav ul a{
−
    #contentContainer  td {
+
padding-top: 0px;
−
    padding: 10px;
+
float:left;
−
    border: 1px solid #565656;
+
padding-bottom:0px; /*Introducing a padding between the li and the a give the illusion spaced items */
−
    border-collapse: collapse;
+
white-space:normal;
−
    vertical-align: text-top;
+
text-decoration:none;
−
    }
+
height:auto;
 +
width: 13em;
 +
line-height: 1.5em;
 +
}
  
−
/*Change the styling of table headers */
+
.nav td:hover ul{ /* Display the dropdown on hover */
−
    #contentContainer th {
+
left:0; /* Bring back on-screen when needed */
−
    background-color: #E8E8E9;
+
text-decoration:none;
−
    padding: 10px;
+
}
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
  
 +
.nav td:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
 +
background:#505050;
 +
text-decoration:none;
 +
}
  
 +
.nav td:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
 +
text-decoration:none;
 +
}
  
−
/*MENU STYLING */
+
.nav td:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
 +
background:#000;
 +
text-decoration:none;
 +
}
  
−
/*Styling for the links in the menu */
+
.links {
−
#menuContainer a {
+
background-color:#c5c5c5;
−
color: #565656;
+
float:left;
−
text-decoration:none;
+
width:125px;
−
font-weight: bold;
+
height:100%;
−
}
+
padding-top:10px;
 +
}
 +
.links ul{
 +
width:100%;
 +
}
  
−
/* Sets the style for lists inside menuContainer  */
 
−
#menuContainer ul {
 
−
list-style: none;
 
−
margin-left:0px;
 
−
}
 
  
−
/*Styles the list items to become menu buttons */
 
−
#menuContainer ul li {
 
−
text-align: center;
 
−
display: block;
 
−
width: 100%;
 
−
height:30px;
 
−
padding-top:10px;
 
−
}
 
  
−
/*For the menu buttons, changes the color when hovering*/
+
#long {
−
#menuContainer li:hover {
+
width:10em;
−
color: #FFF;
+
}
−
background-color: #24B694;
+
#project_title a:hover { text-decoration: none; }
−
}
+
#project_title { margin: 0; padding: 0; }
 +
--></style>
  
−
/*Submenus are not displayed as default*/
 
−
#menuContainer li ul {
 
−
display: none;
 
−
padding-top:15px;
 
−
margin-left: -19px;
 
−
}
 
  
−
/*Submenus are displayed when hovering the menu button */
+
<body>
−
#menuContainer li:hover ul {
+
<div style="margin-top:-50px;Background-color:#FFF"> <br><br><br></div>
−
/*display: inline-block; */
+
<div id="project_header" style="margin-top: -1em; position:relative;align:center;">
−
display: block;  
+
<img id="headerImage" src="https://static.igem.org/mediawiki/2015/9/95/Team_China_Tongji_banner.jpg" border="0" width="980" height="200" orgWidth="980" orgHeight="200" usemap="#image-maps-2015-10-16-234534" alt="" />
−
position: absolute;  
+
<map name="image-maps-2015-10-16-234534" id="ImageMapsCom-image-maps-2015-10-16-234534">
−
float:right;
+
<area  alt="" title="" href="https://2015.igem.org" shape="rect" coords="797,7,874,69" style="outline:none;" target="_self"    />
−
margin-left: 134px;
+
<area  alt="" title="" href="https://2015.igem.org/Team:China_Tongji" shape="rect" coords="0,0,794,77" style="outline:none;" target="_self"    />
−
margin-top:-42px;
+
<area shape="rect" coords="998,75,1000,77" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
−
}
+
</map>
 +
</div>
  
−
/*Style the submenu buttons*/
+
<div style="float:left; clear:left; margin-top: -2.5em; z-index:1; position:relative;">
−
#menuContainer li ul li{
+
−
background-color: #59BF92;
+
−
padding-left:20px;
+
−
padding-right:20px;
+
−
height:30px;
+
−
padding-top:10px;
+
−
margin-top:-2px;
+
−
color: #565656;
+
−
width: 150px;
+
−
}
+
  
−
/*CLASSES */
+
</div>
  
−
/*Clear class for all the pages, adds spacing too*/
 
−
.clear{
 
−
clear:both;
 
−
height: 10px;
 
−
}
 
  
 +
<div id="project_title" style="text-align: center; margin-top: -0.8em; float:left; z-index:1; position:relative;
 +
margin-left:3em;">
 +
<a href="https://2015.igem.org/Team:China_Tongji">
 +
<!--<h5 style="border: none; line-height: 1.2em; margin: 0; padding: 0; padding-top: 0.7em;">
  
−
/* highlight box for special messages */
+
Genetic Diagnosis and Treatment of Alzheimer's Disease
−
    .highlightBox {
+
</h5>-->
−
        width:500px;
+
</a>
−
        margin:auto;
+
</div></div>
−
        background-color: #E8E8E9;
+
<table class="nav">
−
margin-bottom: 15px;
+
<tr>
−
margin-top: 15px;
+
  <td><a href="https://2015.igem.org/Team:China_Tongji">Home</a></td>
−
padding: 15px;
+
  <td><a href="https://2015.igem.org/Team:China_Tongji/Project"><img src="https://2015.igem.org/File:China_Tongji_2015_dropdown_arrow.png"> Project</a>
−
padding-top: 5px;
+
  <ul>
−
    }
+
    <li><a href="https://2015.igem.org/Team:China_Tongji/Project">Overview</a></li>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/Background">Background</a></li>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/Design">Design</a></li>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/Protocol">Protocol</a></li>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/SAR">Summary and Result</a></li>
 +
  </ul>
 +
  </td>
 +
  <td><a href="https://2015.igem.org/Team:China_Tongji/Notebook"><img src="https://2015.igem.org/File:China_Tongji_2015_dropdown_arrow.png"> Notebook</a>
 +
  <ul>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/Notebook">Record</a></li>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/Timeline">Timeline</a></li>
 +
  </ul>
  
 +
  </td>
 +
  <td><a href="https://2015.igem.org/Team:China_Tongji/Achivement"><img src="https://2015.igem.org/File:China_Tongji_2015_dropdown_arrow.png"> Achivement</a>
 +
  <ul>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/Achivement">Parts</a></li>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/Equipment">Equipment</a></li>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/Modeling">Modeling</a></li>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/JF">Judging Form</a></li>
 +
  </ul>
 +
  </td>
 +
  <td><a href="https://2015.igem.org/Team:China_Tongji/Team"><img src="https://2015.igem.org/File:China_Tongji_2015_dropdown_arrow.png"> Team</a>
 +
  <ul>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/Team">Members</a></li>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/Attributions">Attributions</a></li>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/Adviser">Adviser</a></li>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/Sponsor">Sponsor</a></li>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/Contact">Contact</a></li>
 +
  </ul>
 +
  </td>
 +
  <td><a href="https://2015.igem.org/Team:China_Tongji/Outreach"><img src="https://2015.igem.org/File:China_Tongji_2015_dropdown_arrow.png"> Outreach</a>
 +
  <ul>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/Outreach">Human Practice</a></li>
 +
    <li><a href="https://2015.igem.org/Team:China_Tongji/Collaboration">Collaboration</a></li>
 +
  </ul>
 +
  </td>
 +
  <td><a href="https://2015.igem.org/Team:China_Tongji/Safety">Safety</a>
 +
  </td>
 +
<tr>
 +
</table>
  
−
</style>
+
<br />
−
<!-- End of CSS -->
+
  
−
 
+
</body>
−
<!-- Start of the template html elements. -->
+
−
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
+
−
 
+
−
 
+
−
<div id="bannerContainer">
+
−
<br><br>
+
−
<h2> Add a banner to your wiki! </h2>
+
−
+
−
<p>You can make the image 980px  by  200px</p>
+
−
<p> Remember to call the file: "<i>Team_China_Tongji_banner.jpg</i>" </p>
+
−
</div>
+
−
 
+
−
<!-- Start of menu -->
+
−
<div id="menuContainer">
+
−
 
+
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
+
−
<ul>
+
−
<a href="https://2015.igem.org/Team:China_Tongji"><li>HOME</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Team"><li>TEAM</li></a>
+
−
 
+
−
<a href="#"><li>PROJECT
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Description"><li>Description</li></a>
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Experiments"><li>Experiments &amp; Protocols</li></a> 
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Results"><li>Results</li></a> 
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Design"><li>Design</li></a>
+
−
</ul>
+
−
</li></a>
+
−
 
+
−
<a href="#"><li>PARTS
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Parts"><li>Team Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Basic_Part"><li>Basic Parts</li></a> 
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Composite_Part"><li>Composite Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Part_Collection"><li>Part Collection</li></a> 
+
−
</ul>
+
−
</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Notebook"><li>NOTEBOOK</li></a>
+
−
     
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Attributions"><li>ATTRIBUTIONS</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Collaborations"><li>COLLABORATIONS</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Practices"><li>HUMAN PRACTICES</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Safety"><li>SAFETY</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Modeling"><li>MODELING</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Measurement"><li>MEASUREMENT</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Software"><li>SOFTWARE</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:China_Tongji/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
−
 
+
−
</ul>
+
−
</div>
+
−
<!-- End of menu  -->
+
−
 
+
−
<!-- Start of content -->
+
−
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
+
 
</html>
 
</html>

Revision as of 21:23, 11 July 2015




Image Map
Home Project Notebook Achivement Team Outreach Safety