Difference between revisions of "Team:TU Darmstadt/Templates/CSS"

 
(85 intermediate revisions by 7 users not shown)
Line 1: Line 1:
 
{{Template_All_Teams}}
 
{{Template_All_Teams}}
−
 
 
<!-- Declare that you are going to use html code instead of wiki code -->
 
<!-- Declare that you are going to use html code instead of wiki code -->
 
<html>
 
<html>
Line 49: Line 48:
 
/* Creates a container that will wrap all of the content inside your wiki pages. */
 
/* Creates a container that will wrap all of the content inside your wiki pages. */
 
#mainContainer {   
 
#mainContainer {   
−
width: 978px;
+
                                position: relative;
 +
                                height: 100%;
 +
width: 980px;
 
margin: 0 auto;
 
margin: 0 auto;
 
overflow:hidden;
 
overflow:hidden;
Line 62: Line 63:
 
font-weight: normal;
 
font-weight: normal;
 
-webkit-font-smoothing: antialiased;
 
-webkit-font-smoothing: antialiased;
 +
                                padding-bottom: 400px;
 
}
 
}
−
 
−
/* Creates the container for the menu */
 
−
#menuContainer  {
 
−
float:left;
 
−
width: 134px;
 
−
padding: 40px 0px;
 
−
}
 
−
 
 
/* Creates the container for the content */
 
/* Creates the container for the content */
 
#contentContainer {
 
#contentContainer {
Line 127: Line 121:
 
border-bottom: none;
 
border-bottom: none;
 
font-weight: 600;
 
font-weight: 600;
−
margin-top: 10px;
+
padding-bottom: 15px;
 
}
 
}
 
#contentContainer h1 {
 
#contentContainer h1 {
Line 134: Line 128:
 
}
 
}
  
 +
#contentContainer code {
 +
    border-radius: 2px;
 +
    padding: 1px 4px;
 +
    border: none;
 +
}
  
 
/*Style of the links - links are different inside the menu */
 
/*Style of the links - links are different inside the menu */
Line 148: Line 147:
 
/*Change the styling of tables */
 
/*Change the styling of tables */
 
         #contentContainer table {
 
         #contentContainer table {
−
    border: 1px solid #565656;
 
 
     border-collapse: collapse;
 
     border-collapse: collapse;
 
     width: 90%
 
     width: 90%
Line 161: Line 159:
 
     #contentContainer  td {
 
     #contentContainer  td {
 
     padding: 10px;
 
     padding: 10px;
−
    border: 1px solid #565656;
 
 
     border-collapse: collapse;
 
     border-collapse: collapse;
 
     vertical-align: text-top;
 
     vertical-align: text-top;
Line 177: Line 174:
  
  
−
/*MENU STYLING */
 
  
−
/*Styling for the links in the menu */
 
−
#menuContainer a {
 
−
color: #0d1112;
 
−
text-decoration:none;
 
−
font-weight: normal;
 
−
}
 
−
 
−
/* 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: left;
 
−
display: block;
 
−
width: 100%;
 
−
padding-top:5px;
 
−
padding-bottom:5px;
 
−
border-bottom: 1px solid #bddeff;
 
−
}
 
−
 
−
/*For the menu buttons, changes the color when hovering*/
 
−
#menuContainer li:hover {
 
−
color:  #3380f5;
 
−
}
 
−
 
−
/*Submenus are displayed as default*/
 
−
#menuContainer li ul {
 
−
display: block;
 
−
padding-bottom: 10px;
 
−
}
 
−
 
−
/*Submenus are displayed when hovering the menu button */
 
−
#menuContainer li:hover ul {
 
−
/*display: inline-block; */
 
−
/*display: block;
 
−
position: absolute;
 
−
float:right;
 
−
margin-left: 134px;
 
−
margin-top:-42px;
 
−
color:  #0f2a58;*/
 
−
}
 
−
 
−
/*Style the submenu buttons*/
 
−
#menuContainer li ul li{
 
−
/*background-color: #59BF92;
 
−
padding-left:20px;
 
−
padding-right:20px;
 
−
height:30px;
 
−
padding-top:10px;
 
−
margin-top:-2px;
 
−
color: #0d1112;
 
−
width: 150px;*/
 
−
 
−
padding-left:20px;
 
−
padding-top:5px;
 
−
border-bottom: none;
 
−
}
 
−
 
−
 
−
#menuContainer li.active {
 
−
color: #0f2a58;
 
−
font-weight: bold;
 
−
}
 
  
  
Line 263: Line 193:
 
text-decoration:none;
 
text-decoration:none;
 
font-weight: bold;
 
font-weight: bold;
 +
                                margin: 0px 20px;
 
}
 
}
  
Line 269: Line 200:
 
list-style: none;
 
list-style: none;
 
margin-left:0px;
 
margin-left:0px;
 +
font-size: larger;
 
}
 
}
  
Line 329: Line 261:
 
/* highlight box for special messages */
 
/* highlight box for special messages */
 
     .highlightBox {
 
     .highlightBox {
−
         width:500px;  
+
         width:700px;  
 
         margin:auto;  
 
         margin:auto;  
−
         background-color: #d1e0db;  
+
         background-color: #d1e0db;
−
margin-bottom: 15px;
+
padding: 10px;
−
margin-top: 15px;
+
margin-top: 10px;
−
padding: 15px;
+
margin-bottom: 10px;
−
padding-top: 5px;
+
border-radius: 5px;
 
     }
 
     }
  
 +
/* Figure classes to include images */
 +
                .centerFig {
 +
                    color: #4e7085;
 +
                    max-width: 760px;
 +
                    margin:0 auto;
 +
                    text-align: center;
 +
                    overflow: hidden;
 +
 +
                    padding-top: 15px;
 +
                    padding-bottom: 15px;
 +
                }
 +
 +
                .leftFig {
 +
                    color: #4e7085;
 +
                    width: 50%;
 +
                    float: left;
 +
                    text-align: center;
 +
                    overflow: hidden;
 +
                }
 +
 +
                .rightFig {
 +
                    color: #4e7085;
 +
                    width: 50%;
 +
                    float: right;
 +
                    text-align: center;
 +
                    overflow: hidden;
 +
                }
 +
 +
                .inlineFig {
 +
                    display: inline-block;
 +
                }
 +
 +
                .contentSection {
 +
                    overflow: hidden;
 +
                    text-align: justify;
 +
                }
 +
 +
                figcaption {
 +
                    display: block;
 +
                    text-align: left;
 +
                    padding-bottom: 3px;
 +
                    margin-top: 8px;
 +
                }
 +
 +
 +
                #mainContainerContainer {
 +
                    witdh: 100%;
 +
                    position: relative;
 +
                }
  
 
</style>
 
</style>
 
<!-- End of CSS -->
 
<!-- End of CSS -->
 +
  
 
<div id="bannerContainer">
 
<div id="bannerContainer">
Line 347: Line 329:
 
<div id="bannerMenuContainer">
 
<div id="bannerMenuContainer">
 
<ul>
 
<ul>
−
<li class="active first"><a href="https://2014.igem.org/Team:TU_Darmstadt">Home</a></li>
+
<li class="active first"><a href="https://2015.igem.org/Team:TU_Darmstadt">Home</a></li>
−
<li><a href="https://2014.igem.org/Team:TU_Darmstadt/Project">Project</a></li>
+
<li><a href="https://2015.igem.org/Team:TU_Darmstadt/Project/Tech">SLA 3D-Printer</a></li>
−
<li><a href="https://2014.igem.org/Team:TU_Darmstadt/Results">Results</a></li>
+
<li><a href="https://2015.igem.org/Team:TU_Darmstadt/Project/PnP/LabSurfing">LabSurfing</a></li>
−
<li><a href="https://2014.igem.org/Team:TU_Darmstadt/PolicyandPractices">Policy &amp; Practices</a></li>
+
<li><a href="https://2015.igem.org/Team:TU_Darmstadt/Parts">Bricks</a></li>
−
<li><a href="https://2014.igem.org/Team:TU_Darmstadt/Achievements">Achievements</a></li>
+
<li><a href="https://2015.igem.org/Team:TU_Darmstadt/Project/Bio/Modeling/sec2">RnD-Nerf</a></li>
−
<li><a href="https://2014.igem.org/Team:TU_Darmstadt/Notebook">Notebook</a></li>
+
−
<li><a href="https://2014.igem.org/Team:TU_Darmstadt/Team">Team</a></li>
+
−
<li><a href="https://2014.igem.org/Team:TU_Darmstadt/Gallery">Gallery</a></li>
+
−
<li><a href="https://2014.igem.org/Team:TU_Darmstadt/Sitemap">Sitemap</a></li>
+
 
</ul>
 
</ul>
 
</div>
 
</div>
Line 361: Line 340:
  
 
</div>
 
</div>
 +
<div id="mainContainerContainer">
 +
</html>
 +
        {{:Team:TU_Darmstadt/Templates/Footer}}
 +
<html>
  
−
<!-- Start of the template html elements. -->
+
<div id="mainContainer">
−
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
+
</html>
−
 
+
{{:Team:TU_Darmstadt/Templates/SideBarMenu}}
−
<!-- Start of menu -->
+
<html>
−
<div id="menuContainer">
+
<div id="contentContainer">
−
 
+
−
<!-- 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:Example"><li>HOME</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Example/Team"><li>TEAM</li></a>
+
−
 
+
−
 
+
−
<li class="active">PROJECT
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:Example/Description"><li>Bio
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:Example/Description"><li>Modeling</li></a>
+
−
<a href="https://2015.igem.org/Team:Example/Experiments"><li>EG</li></a> 
+
−
<a href="https://2015.igem.org/Team:Example/Results"><li>Hexe</li></a> 
+
−
<a href="https://2015.igem.org/Team:Example/Design"><li>Scaffold</li></a>
+
−
<a href="https://2015.igem.org/Team:Example/Design"><li>Safety</li></a>
+
−
</ul>
+
−
</li></a>
+
−
<a href="https://2015.igem.org/Team:Example/Experiments"><li>Chem
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:Example/Description"><li>Propolymer</li></a>
+
−
<a href="https://2015.igem.org/Team:Example/Experiments"><li>...</li></a>
+
−
</ul>
+
−
</li></a>
+
−
<a href="https://2015.igem.org/Team:Example/Results"><li>Tech
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:Example/Description"><li>Hardware</li></a>
+
−
<a href="https://2015.igem.org/Team:Example/Experiments"><li>Software</li></a>
+
−
</ul>
+
−
</li></a>
+
−
<a href="https://2015.igem.org/Team:Example/Design"><li>P & P
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:Example/Description"><li>LabSurfing</li></a>
+
−
<a href="https://2015.igem.org/Team:Example/Experiments"><li>AS</li></a>
+
−
<a href="https://2015.igem.org/Team:Example/Experiments"><li>Collaborations</li></a>
+
−
</ul>
+
−
</li></a>
+
−
</ul>
+
−
</li>
+
−
 
+
−
<a href="#"><li>PARTS
+
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:Example/Parts"><li>Team Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:Example/Basic_Part"><li>Basic Parts</li></a> 
+
−
<a href="https://2015.igem.org/Team:Example/Composite_Part"><li>Composite Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:Example/Part_Collection"><li>Part Collection</li></a> 
+
−
</ul>
+
−
</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Example/Notebook"><li>NOTEBOOK</li></a>
+
−
     
+
−
<a href="https://2015.igem.org/Team:Example/Attributions"><li>ATTRIBUTIONS</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Example/Collaborations"><li>COLLABORATIONS</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Example/Practices"><li>POLICY & PRACTICES</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Example/Safety"><li>SAFETY</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Example/Modeling"><li>MODELING</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Example/Measurement"><li>MEASUREMENT</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Example/Software"><li>SOFTWARE</li></a>
+
−
 
+
−
<a href="https://2015.igem.org/Team:Example/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.-->
+
−
 
+
−
<h1>iGEM 2015 Wiki TU Darmstadt: Under Construction!</h1>
+
−
<p>
+
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sit amet rhoncus ligula, sit amet iaculis nulla. Pellentesque ut libero sapien. Duis vel aliquam est. Vivamus at nibh ultricies, consequat nunc vitae, pharetra turpis. Maecenas facilisis fermentum leo, eu condimentum arcu. Donec id magna nec metus iaculis suscipit eget eget elit. Mauris ac rutrum urna, ut imperdiet justo. Aenean eget posuere tortor.
+
−
</p>
+
−
<p>
+
−
Morbi dapibus suscipit augue at tincidunt. Phasellus efficitur semper scelerisque. Nunc ultricies neque accumsan est rhoncus auctor. In aliquet hendrerit leo, at egestas mauris facilisis convallis. Duis ac ligula mi. Etiam nec augue metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus vel tristique augue. Donec cursus metus at elit mollis convallis. Etiam feugiat neque dui, vitae fringilla lacus consequat quis. Aliquam sagittis euismod dictum. Suspendisse consequat consectetur ligula, eget viverra ex. Ut sed purus vel risus dignissim vulputate ut a lacus. Integer consequat, orci vel aliquam posuere, orci massa gravida velit, vel dictum velit libero eget elit. Aliquam sagittis semper lacus, vitae blandit mauris congue dapibus. Cras a erat nec neque molestie porta.
+
−
</p>
+
−
<p>
+
−
Nulla et lobortis sapien, vitae bibendum augue. Fusce dictum ex et orci pretium, nec tincidunt dolor maximus. Phasellus eros urna, hendrerit ut ex et, vulputate scelerisque libero. Pellentesque eu tellus id nunc porttitor congue non quis elit. Nunc ut cursus orci, ut mattis mi. Maecenas rutrum lacus vel nulla rutrum placerat. Vestibulum sodales purus non accumsan vestibulum. Donec blandit mattis erat, ut sollicitudin tortor fermentum eget. Pellentesque tempor neque eget sodales auctor. Pellentesque id lacus in orci tempus bibendum nec sit amet libero.
+
−
</p>
+
−
<p>
+
−
Nullam scelerisque libero ligula, sed maximus nibh maximus vitae. Nulla quis nunc lacinia, pharetra nisl eu, dapibus purus. Fusce gravida lacus metus, ac pellentesque erat imperdiet id. Nunc maximus turpis sed sollicitudin egestas. Suspendisse non ligula ut arcu ultricies ullamcorper. Nam at lacus sed lacus vehicula iaculis. Sed at leo tincidunt, volutpat lacus consequat, bibendum est. Cras viverra dictum hendrerit. Donec ut fermentum justo, nec hendrerit ipsum. Sed augue eros, efficitur in quam a, maximus bibendum ante. Quisque vitae est lobortis, volutpat lorem et, facilisis quam.
+
−
</p>
+
  
−
<p>
 
−
Nam eu quam et dui convallis gravida eget non turpis. Pellentesque consectetur erat ut ligula pretium, quis efficitur libero ultricies. Vivamus ut sagittis tortor, vitae venenatis elit. Pellentesque lobortis diam ac diam pulvinar efficitur. Nam dignissim placerat tortor sed tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate diam id tempus varius. Donec porttitor sapien in nibh maximus, ut interdum enim facilisis.
 
−
</p>
 
  
 
</html>
 
</html>

Latest revision as of 02:58, 19 September 2015