Difference between revisions of "Team:TU Darmstadt/Templates/CSS"
Line 81: | Line 81: | ||
margin: 0 auto; | margin: 0 auto; | ||
padding: 20px; | padding: 20px; | ||
+ | font-size: 28px; | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #bannerMenu { | ||
+ | width: 978px; | ||
+ | margin: 0 auto; | ||
font-size: 28px; | font-size: 28px; | ||
color: #fff; | color: #fff; | ||
Line 194: | Line 202: | ||
/*Style the submenu buttons*/ | /*Style the submenu buttons*/ | ||
#menuContainer li ul li{ | #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; | ||
+ | } | ||
+ | |||
+ | |||
+ | /*BANNER MENU STYLING */ | ||
+ | |||
+ | /*Styling for the links in the menu */ | ||
+ | #bannerMenuContainer { | ||
+ | width: 978px; | ||
+ | margin: 0 auto; | ||
+ | color: #fff; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #bannerMenuContainer a { | ||
+ | color: #fff; | ||
+ | text-decoration:none; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | /* Sets the style for lists inside menuContainer */ | ||
+ | #bannerMenuContainer ul { | ||
+ | list-style: none; | ||
+ | margin-left:0px; | ||
+ | } | ||
+ | |||
+ | /*Styles the list items to become menu buttons */ | ||
+ | #bannerMenuContainer ul li { | ||
+ | text-align: center; | ||
+ | display: inline; | ||
+ | width: 100%; | ||
+ | height: 30px; | ||
+ | padding-right: 20px; | ||
+ | } | ||
+ | |||
+ | /*For the menu buttons, changes the color when hovering*/ | ||
+ | #bannerMenuContainer li:hover { | ||
+ | color: #FFF; | ||
+ | background-color: #24B694; | ||
+ | } | ||
+ | |||
+ | /*Submenus are not displayed as default*/ | ||
+ | #bannerMenuContainer li ul { | ||
+ | display: none; | ||
+ | padding-top:15px; | ||
+ | margin-left: -19px; | ||
+ | } | ||
+ | |||
+ | /*Submenus are displayed when hovering the menu button */ | ||
+ | #bannerMenuContainer li:hover ul { | ||
+ | /*display: inline-block; */ | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | float:right; | ||
+ | margin-left: 134px; | ||
+ | margin-top:-42px; | ||
+ | } | ||
+ | |||
+ | /*Style the submenu buttons*/ | ||
+ | #bannerMenuContainer li ul li{ | ||
background-color: #59BF92; | background-color: #59BF92; | ||
padding-left:20px; | padding-left:20px; | ||
Line 230: | Line 305: | ||
<div id="bannerContainer"> | <div id="bannerContainer"> | ||
<div id="bannerContent"> | <div id="bannerContent"> | ||
− | + | <img src="https://static.igem.org/mediawiki/igem.org/f/f2/Igemfooterlogo.png" alt="" align="right"> | |
iGEM 2015 TU Darmstadt: Under Construction! | iGEM 2015 TU Darmstadt: Under Construction! | ||
Line 236: | Line 311: | ||
<p> Remember to call the file: "<i>Team_Example_banner.jpg</i>" </p>--> | <p> Remember to call the file: "<i>Team_Example_banner.jpg</i>" </p>--> | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | <!-- Banner menu --> | ||
+ | <div id="bannerMenuContainer"> | ||
+ | |||
+ | <!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons --> | ||
+ | <ul> | ||
+ | <li class="active first"><a href="https://2014.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://2014.igem.org/Team:TU_Darmstadt/Results">Results</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:TU_Darmstadt/PolicyandPractices">Policy & Practices</a></li> | ||
+ | <li><a href="https://2014.igem.org/Team:TU_Darmstadt/Achievements">Achievements</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> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
</div> | </div> | ||
Revision as of 16:10, 2 September 2015