Difference between revisions of "Template:Team:NUDT CHINA/CSS"

Line 1: Line 1:
 
{{Template_All_Teams}}
 
{{Template_All_Teams}}
 
<html>
 
<html>
<head>
+
<!-- Start of CSS-->
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
+
 
+
<!--RESET-->
+
 
<style type="text/css">
 
<style type="text/css">
.clearStyle {
+
/* PAGE LAYOUT */
margin: 0;
+
 
padding: 0;
+
/* Change Background color*/
border: 0;
+
body {
font-size: 100%;
+
background-color: #fff;
font: inherit;
+
vertical-align: baseline;
+
 
}
 
}
body {
+
 
background-color: #f3f3f3;
+
/* Creates a container that will wrap all of the content inside your wiki pages. */
background-image: url(https://static.igem.org/mediawiki/2015/8/8a/Team_NUDT_CHINA_Soft_wallpaper.png);
+
#mainContainer {
background-repeat: repeat;
+
width: 978px;
background-attachment: fixed;
+
overflow:hidden;
background-position: 0px 0px;  
+
float:left;
height: 100%;
+
margin-left:20px;
width: auto;
+
margin-bottom: 10px;
 +
background-color: #fff;  
 +
border-bottom: 14px solid #565656;
 +
border-right: 2px solid #565656;
 +
border-left: 2px solid #565656;
 +
border-top: 2px solid #565656;
 +
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
}
 
}
</style>
+
 
<!--MENU-->
+
/* Creates the container for the menu */
<style type="text/css">
+
#menuContainer  {  
#menu
+
float:left;
{
+
width: 134px;
    position: fixed;
+
padding: 20px 0px;
    top: 30px;  
+
border-top: 14px solid #565656;
left: 0px;
+
background-color: #E8E8E9;
 
}
 
}
#menu img
 
{
 
margin-left: 30px;
 
margin-bottom: 0px
 
}
 
#menu ul
 
{
 
list-style-type:none;
 
padding: 0;
 
border: 0;
 
  
}
+
/* Creates the container for the content */
#menu li
+
#contentContainer {
{
+
padding-top:20px;
position: relative;
+
padding-right:10px;
 +
margin-bottom: 20px;
 +
width: 814px;
 +
padding-left: 20px;
 +
float: left;
 +
background-color: #fff;
 +
border-top: 14px solid #565656;
 
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 16px;
 
 
}
 
}
#menu a
+
 
{
+
/*Set up height place holder for the banner*/
position: relative;
+
#bannerContainer {
display: inline-block;
+
height:200px;
margin: 8px 0px 0px 0px;
+
margin:auto;
    padding: 0.3em .5em 0.3em;
+
text-align:center;
    text-decoration: none;
+
color: #24B694;
background-color: #ffffff;
+
color: #888887;
+
border-radius: 0 .4em .4em 0;
+
outline: none;
+
cursor: pointer;
+
 
}
 
}
#menu a.b
+
 
{
+
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
position: relative;
+
 
display: inline-block;
+
/*Change the styling of text for everything inside main container*/
margin: 1px 0px;
+
#mainContainer p {
    padding: 0.3em .5em 0.3em;
+
font-size: 13px;
    text-decoration: none;
+
color: #000000;
background-color: #ffffff;
+
outline: none;
+
cursor: pointer;
+
background-color: #888887;
+
color: #ffffff;
+
border-radius: 0 1em 1em 0;
+
font-size: 14px;
+
 
}
 
}
#menu a:hover
+
{
+
/*This changes the color and font family */
background-color: #ffffff;
+
#contentContainer h1, h2, h3, h4, h5, h6 {  
color:#d82545;
+
color: #565656;
}
+
border-bottom: none;
#menu a.b:hover
+
font-weight: bold;
{
+
background-color: #888887;
+
color:#f9d24b;
+
}
+
#menu span
+
{
+
padding-left: 10px;
+
padding-right: 10px;
+
}
+
</style>
+
<!--NAVIGATION-->
+
<style type="text/css">
+
#navigation
+
{
+
    position: fixed;
+
    top: 50px;
+
right: 0px;
+
text-align: right;
+
}
+
#navigation img
+
{
+
margin-right: 30px;
+
margin-top: 0px;
+
}
+
#navigation ul
+
{
+
list-style-type:none;
+
border: 0;
+
}
+
#navigation li
+
{
+
position: relative;
+
 
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 16px;
+
margin-top:10px;
 
}
 
}
#navigation a
+
 
{
+
/*Style of the links - links are different inside the menu */
position: relative;
+
#contentContainer a {  
display: inline-block;
+
font-weight: bold;
margin: 8px 0px 0px 0px;
+
color: #23b593;
    padding: 0.3em .5em 0.3em;
+
    text-decoration: none;
+
background-color: #ffffff;
+
color: #888887;
+
border-radius: .4em 0em 0em .4em;
+
outline: none;
+
cursor: pointer;
+
 
}
 
}
#navigation a.b
+
 
{
+
  /* Styling links on hover- links are different inside the menu */
position: relative;
+
#contentContainer a:hover {
display: inline-block;
+
color: #59bf92;
margin: 1px 0px;
+
    padding: 0.3em .5em 0.3em;
+
    text-decoration: none;
+
background-color: #ffffff;
+
outline: none;
+
cursor: pointer;
+
background-color: #888887;
+
color: #ffffff;
+
border-radius: 1em 0em 0em 1em;
+
font-size: 14px;
+
 
}
 
}
#navigation a:hover
+
 
{
+
/*Change the styling of tables */
background-color: #ffffff;
+
        #contentContainer table {
color:#d82545;
+
    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*/
 +
    #contentContainer  td {
 +
    padding: 10px;
 +
    border: 1px solid #565656;
 +
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
    }
 +
 
 +
/*Change the styling of table headers */
 +
    #contentContainer th {
 +
    background-color: #E8E8E9;
 +
    padding: 10px;
 +
    border: 1px solid #565656;
 +
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
    }
 +
 
 +
 
 +
 
 +
/*MENU STYLING */
 +
 
 +
/*Styling for the links in the menu */
 +
#menuContainer a {
 +
color: #565656;
 +
text-decoration:none;
 +
font-weight: bold;
 
}
 
}
#navigation a.b:hover
+
 
{
+
/* Sets the style for lists inside menuContainer  */
background-color: #888887;
+
#menuContainer ul {  
color:#f9d24b;
+
list-style: none;
 +
margin-left:0px;
 
}
 
}
#navigation span
+
 
{
+
/*Styles the list items to become menu buttons */
padding-left: 10px;
+
#menuContainer ul li {  
padding-right: 10px;
+
text-align: center;
}
+
display: block;
</style>
+
width: 100%;
<!--MAINCONTAINER-->
+
height:30px;
<style type="text/css">
+
padding-top:10px;
#mainContainer
+
{
+
clear: both;
+
width: 900px;
+
margin: 30px 200px;
+
padding: 30px 0px;
+
font-family: 'verdana',sans-serif;
+
background: #fff;
+
box-shadow: 0 3px 8px rgba(0,0,0,.1);
+
position: relative;
+
 
}
 
}
#mainContainer ul
 
{
 
list-style-position:inside;
 
padding: 10px 50px;
 
border: 0;
 
  
 +
/*For the menu buttons, changes the color when hovering*/
 +
#menuContainer li:hover {
 +
color:  #FFF;
 +
background-color: #24B694;
 
}
 
}
#mainContainer li
+
 
{
+
/*Submenus are not displayed as default*/
padding: 0;
+
#menuContainer li ul {
border: 0;
+
display: none;
 +
padding-top:15px;
 +
margin-left: -19px;
 
}
 
}
  
#mainContainer p{
+
/*Submenus are displayed when hovering the menu button */
text-decoration: none;
+
#menuContainer li:hover ul {
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
/*display: inline-block; */
color: #888887;
+
display: block;  
position: relative;
+
position: absolute;  
padding: 10px 50px;
+
float:right;
font-size: 16px;
+
margin-left: 134px;
}
+
margin-top:-42px;
#mainContainer a {
+
}
position: relative;
+
 
    text-decoration: none;
+
/*Style the submenu buttons*/
background-color: #c3c3c3;
+
#menuContainer li ul li{
color: #888887;
+
background-color: #59BF92;  
 +
padding-left:20px;
 +
padding-right:20px;
 +
height:30px;
 +
padding-top:10px;
 +
margin-top:-2px;
 +
color: #565656;
 +
width: 150px;
 
}
 
}
  
#mainContainer a:hover
+
/*CLASSES */
{
+
 
text-decoration:underline;
+
/*Clear class for all the pages, adds spacing too*/
color:#d82545;
+
.clear{
}
+
clear:both;
#mainContainer h1, h2, h3, h4, h5, h6{
+
height: 10px;
color: #444;
+
margin: 20px 0px;
+
padding:4px 8px;
+
letter-spacing: -1px;
+
text-transform: uppercase;
+
position: relative;
+
}
+
#mainContainer h1 {
+
font:bold 28px/12px 'verdana',sans-serif;
+
border-left: 10px solid #444;
+
}
+
#mainContainer h2 {
+
font:bold 24px/10px 'verdana',sans-serif;
+
border-left: 20px solid #444;
+
}
+
#mainContainer h3 {
+
font:bold 22px/8px 'verdana',sans-serif;
+
border-left: 30px solid #444;
+
}
+
#mainContainer h4 {
+
font:bold 22px/6px 'verdana',sans-serif;
+
border-left: 35px solid #444;
+
}
+
#mainContainer h5 {
+
font:bold 20px/4px 'verdana',sans-serif;
+
border-left: 40px solid #444;
+
}
+
#mainContainer h6 {
+
font:bold 18px/2px 'verdana',sans-serif;
+
border-left: 45px solid #444;
+
 
}
 
}
 +
 +
 +
/* highlight box for special messages */
 +
    .highlightBox {
 +
    width:500px;
 +
    margin:auto;
 +
    background-color: #E8E8E9;
 +
    margin-bottom: 15px;
 +
margin-top: 15px;
 +
padding: 15px;
 +
padding-top: 5px;
 +
    }
 +
 +
 
</style>
 
</style>
</head>
+
<!-- End of CSS -->
<body>
+
 
<div id = "menu">
+
 
<img src="https://static.igem.org/mediawiki/2015/9/99/Menu.png"/>
+
<!-- Start of the template html elements. -->
<ul>
+
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
<li><a id = "HOME" href="https://2015.igem.org/Team:NUDT_CHINA"><span>HOME</span></a></li>
+
 
+
 
<li><a id = "PROJECT" href = "#"><span>PROJECT</span></a></li>
+
<div id="bannerContainer">
<li><a id = "Description" href = "https://2015.igem.org/Team:NUDT_CHINA/Description" class = "b"><span>Description</span></a></li>
+
<img src="https://static.igem.org/mediawiki/2015/0/06/Team_NUDT_CHINA_banner.jpg" style="top-margin: 15px; left-margin: 15px;"/>
<li><a id = "Experiments" href = "https://2015.igem.org/Team:NUDT_CHINA/Experiments" class = "b"><span>Experiments &amp; Protocols</span></a></li>
+
</div>
<li><a id = "Results" href="https://2015.igem.org/Team:NUDT_CHINA/Results"  class = "b"><span>Results</span></a></li>
+
 
<li><a id = "Design" href="https://2015.igem.org/Team:NUDT_CHINA/Design" class = "b"><span>Design</span></a></li>
+
<!-- Start of menu -->
+
<div id="menuContainer">
<li><a id = "PARTS" href = "#"><span>PARTS</span></a></li>
+
 
<li><a id = "Team" href = "https://2015.igem.org/Team:NUDT_CHINA/Parts" class = "b"><span>Team Parts</span></a></li>
+
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
<li><a id = "Basic" href = "https://2015.igem.org/Team:NUDT_CHINA/Basic_Part" class = "b"><span>Basic Parts</span></a></li>
+
<ul>
<li><a id = "Composite" href="https://2015.igem.org/Team:NUDT_CHINA/Composite_Part"  class = "b"><span>Composite Parts</span></a></li>
+
<a href="https://2015.igem.org/Team:NUDT_CHINA"><li>HOME</li></a>
<li><a id = "Part" href="https://2015.igem.org/Team:NUDT_CHINA/Part_Collection" class = "b"><span>Part Collection</span></a></li>
+
 
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Team"><li>TEAM</li></a>
 +
 
 +
<a href="#"><li>PROJECT
 +
            <ul>
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Description"><li>Description</li></a>
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Experiments"><li>Experiments &amp; Protocols</li></a>
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Results"><li>Results</li></a> 
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Design"><li>Design</li></a>
 +
</ul>
 +
</li></a>
 +
 
 +
<a href="#"><li>PARTS
 +
            <ul>
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Parts"><li>Team Parts</li></a>
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Basic_Part"><li>Basic Parts</li></a
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Composite_Part"><li>Composite Parts</li></a>
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Part_Collection"><li>Part Collection</li></a>
 +
</ul>
 +
</li></a>
 +
 
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Notebook"><li>NOTEBOOK</li></a>
 +
     
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Attributions"><li>ATTRIBUTIONS</li></a>
 +
 
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Collaborations"><li>COLLABORATIONS</li></a>
 +
 
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Practices"><li>HUMAN PRACTICES</li></a>
 +
 
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Safety"><li>SAFETY</li></a>
 +
 
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Modeling"><li>MODELING</li></a>
 +
 
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Measurement"><li>MEASUREMENT</li></a>
 +
 
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Software"><li>SOFTWARE</li></a>
 +
 
 +
<a href="https://2015.igem.org/Team:NUDT_CHINA/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
  
<li><a id = "NOTEBOOK" href="https://2015.igem.org/Team:NUDT_CHINA/Notebook"><span>NOTEBOOK</span></a></li>
+
<!-- Start of test -->
<li><a id = "ATTRIBUTIONS" href="https://2015.igem.org/Team:NUDT_CHINA/Attributions"><span>ATTRIBUTIONS</span></a></li>
+
<a href="https://2015.igem.org/Team:NUDT_CHINA/Temporary Test"><li>TEST</li></a>
<li><a id = "COLLABORATIONS" href="https://2015.igem.org/Team:NUDT_CHINA/Collaborations"><span>COLLABORATIONS</span></a></li>
+
<!-- End of test -->
<li><a id = "HUMAN" href="https://2015.igem.org/Team:NUDT_CHINA/Practices"><span>HUMAN PRACTICES</span></a></li> 
+
<li><a id = "SAFETY" href="https://2015.igem.org/Team:NUDT_CHINA/Safety"><span>SAFETY</span></a></li>
+
<li><a id = "MODELING" href="https://2015.igem.org/Team:NUDT_CHINA/Modeling"><span>MODELING</span></a></li> 
+
<li><a id = "MEASUREMENT" href="https://2015.igem.org/Team:NUDT_CHINA/Measurement"><span>MEASUREMENT</span></a></li> 
+
<li><a id = "SOFTWARE" href="https://2015.igem.org/Team:NUDT_CHINA/Software"><span>SOFTWARE</span></a></li>
+
<li><a id = "ENTREPRENEURSHIP" href="https://2015.igem.org/Team:NUDT_CHINA/Entrepreneurship"><span>ENTREPRENEURSHIP</span></a></li> 
+
</ul>
+
<script type="text/javascript">
+
$(document).ready(function() {
+
$('#menu li a').hover( 
+
function() { 
+
$(this).animate({'paddingLeft': '1.2em', 'paddingRight': '1.2em'}, 'fast');
+
}, 
+
function() {
+
$(this).animate({'paddingLeft': '0.5em', 'paddingRight': '0.5em'}, 'fast'); 
+
}
+
);
+
});
+
</script> 
+
    </div>
+
<div id = "navigation">
+
<ul> 
+
<li><a href="#pos1"><span>Title 1</span></a></li>
+
+
<li><a href = "#pos2"><span>Title 2</span></a></li>
+
<li><a href = "#pos2" class = "b"><span>Title 2.1</span></a></li>
+
<li><a href = "#pos3" class = "b"><span>Title 2.2</span></a></li>
+
  
<li><a href = "#pos4"><span>Title 3</span></a></li>
+
</ul>
<li><a href = "#pos4" class = "b"><span>Title 3.1</span></a></li>
+
</div>
 +
<!-- End of menu  -->
  
<li><a href = "#pos5"><span>Title 4</span></a></li>
+
<!-- Start of content -->
<li><a href = "#pos6"><span>Title 5</span></a></li>
+
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
</ul>
+
<div>
<script type="text/javascript">
+
<h1>Hollow, world!</h1>
$(document).ready(function() {
+
</div>
$('#navigation li a').hover( 
+
</div>
function() { 
+
$(this).animate({'paddingLeft': '1.2em', 'paddingRight': '1.2em'}, 'fast');
+
}, 
+
function() {
+
$(this).animate({'paddingLeft': '0.5em', 'paddingRight': '0.5em'}, 'fast'); 
+
}
+
);
+
});
+
</script>
+
<img src="https://static.igem.org/mediawiki/2015/9/93/Team_NUDT_CHINA_Navigate.png"/>
+
    </div>
+
<div id = "mainContainer" class = "clearStyle">
+
<h1 id = "pos1">Title 1</h1>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<h2 id = "pos2" >Title 2.1</h2>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<h3 id = "pos3" >Title 2.2</h3>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<h4 id = "pos4" >Title 3.1 </h4>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<h5 id = "pos5" >Title 4</h5>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<h6 id = "pos6" >Title 5</h6>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo nibh, mattis sit amet consequat a, varius vitae metus. Proin pharetra sodales pellentesque."</p>
+
<ul> 
+
<li><a href="http://wwww.baidu.com">BAIDU</a></li>
+
<li><a href="http://wwww.baidu.com">BAIDU</a></li>
+
<li><a href="http://wwww.baidu.com">BAIDU</a></li>
+
</ul>
+
 
</div>
 
</div>
</body>
 
 
</html>
 
</html>

Revision as of 03:43, 28 July 2015