Template:TU-Delft css
From 2012.igem.org
(Difference between revisions)
(86 intermediate revisions not shown) | |||
Line 99: | Line 99: | ||
<style type="text/css"> | <style type="text/css"> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | * { | |
+ | font-family:Century gothic; | ||
+ | margin-left:800px; | ||
+ | margin-right:800px; | ||
+ | |||
+ | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
- | + | * { margin: 0px; padding: 0px; } | |
+ | |||
- | |||
- | |||
- | |||
- | |||
- | + | /* OVERRIDING */ | |
- | + | body { | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | */ | + | |
- | + | ||
/* format main-background C0C5CA*/ | /* format main-background C0C5CA*/ | ||
background-color: #7297BA; | background-color: #7297BA; | ||
Line 224: | Line 127: | ||
background-color: #E0F574; | background-color: #E0F574; | ||
} | } | ||
+ | #contentSub, #catlinks { | ||
+ | display:none; | ||
+ | } | ||
.firstHeading { | .firstHeading { | ||
Line 230: | Line 136: | ||
} | } | ||
#top-section { | #top-section { | ||
- | + | background-color: black; | |
- | + | height: 0; | |
- | + | border: none;} | |
- | + | ||
#p-logo { | #p-logo { | ||
/* removes iGEM logo */ | /* removes iGEM logo */ | ||
Line 246: | Line 152: | ||
font-family:"Trebuchet MS","Verdana",Arial,sans-serif; | font-family:"Trebuchet MS","Verdana",Arial,sans-serif; | ||
font-size:85%; | font-size:85%; | ||
- | height: | + | height: 24px; |
} | } | ||
#menubar li a { | #menubar li a { | ||
Line 268: | Line 174: | ||
z-index: 8; | z-index: 8; | ||
} | } | ||
+ | #menubar.left-menu:hover { | ||
+ | background-color: transparent;} | ||
#search-controls { | #search-controls { | ||
Line 312: | Line 220: | ||
text-decoration: underline; | text-decoration: underline; | ||
} | } | ||
+ | .right-menu li a { | ||
+ | background-color: transparent; | ||
+ | } | ||
#footer-box { | #footer-box { | ||
Line 332: | Line 243: | ||
End Format iGEM base | End Format iGEM base | ||
*/ | */ | ||
+ | /* --- OVERRIDING, RÖR INTE ÖVER --- */ | ||
- | + | body {font-family: "Verdana", arial, sans-serif; font-size: 12px;} | |
- | + | ||
- | + | ||
- | + | #wrapper { width: 960px; margin: 10px auto; padding: 6px; } | |
+ | #header{ | ||
/* position logo */ | /* position logo */ | ||
width: 975px; | width: 975px; | ||
Line 345: | Line 256: | ||
} | } | ||
- | + | #header h1 { line-height: 120px; color: #fff; font-family : "Georgia", sans-serif; margin: 0 10px; } | |
- | + | ||
- | + | #nav { | |
- | + | margin: 0; | |
- | + | background:#AEC245; | |
- | + | line-height: 35px; | |
- | + | border-bottom: 0px solid #6699cc; | |
- | + | color: #3b3b3b; | |
- | + | } | |
- | + | ||
- | + | #nav li { | |
- | + | float: left; | |
- | + | position: relative; | |
- | + | list-style: none; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | /* main level link */ | |
- | + | #nav li a { | |
- | + | color: #fff; | |
- | + | text-decoration: none; | |
- | + | display: block; | |
- | + | margin: 0 20px; /* ändra avstånd mellan meny alternativ. */ | |
- | + | padding: 0px 28px; /* ändra höjd på meny alternativ. */ /* 22px utan stylesheet */ | |
- | + | margin: 0; | |
- | + | border-right: 1px solid #2d2d2d; /* Avskiljare i länkarna. */ | |
- | + | font-variant: small-caps; /* Ta bort hela för "vanliga" bokstäver. */ | |
- | + | } | |
- | + | ||
- | + | #nav li a:hover { | |
- | + | background: #336699; | |
- | + | color: #fff; | |
- | + | font-size:20px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | /* sub levels link hover */ | |
- | + | #nav ul li:hover a, #nav li:hover li a { | |
- | + | background: #AEC245; /* Huvudbakgrund för dropdown. */ | |
- | + | border: none; | |
- | + | color: #fff; | |
- | + | } | |
- | + | #nav ul a:hover { | |
- | + | background: #336699!important; /* <- musöver på dorpdown. TA INTE BORT !IMPORTANT*/ | |
- | + | color: #fff !important; | |
- | + | } | |
- | + | ||
- | + | /* dropdown */ | |
- | + | #nav li:hover > ul { | |
- | + | display: block; | |
- | + | } | |
- | + | ||
- | + | /* level 2 list */ | |
- | + | #nav ul { | |
- | + | display: none; | |
- | + | ||
- | + | margin: 0; | |
- | + | padding: 0; | |
- | + | width: 215px; /* ändra bredd på dropdown */ | |
- | + | position: absolute; | |
- | + | z-index:1; | |
- | + | top: 35px; | |
- | + | left: 0; | |
- | + | border-bottom: 0px solid #6699cc; /*#4ba6d5; blåa längst ner på dropdown. */ | |
- | + | } | |
- | + | #nav ul li { | |
- | + | float: none; | |
- | + | margin: 0; | |
- | + | padding: 0; | |
- | + | border-bottom: 1px solid #2d2d2d; /* Avskiljare i dropdown. */ | |
- | + | line-height: 35px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | /* rounded corners of first and last link */ | |
- | + | #nav ul li:first-child > a { | |
- | + | } | |
- | + | #nav ul li:last-child > a { | |
- | + | } | |
- | + | ||
- | + | #nav social { | |
- | + | background: none; | |
- | + | margin: 0 1px; | |
- | + | /*padding: 0 10px;*/ | |
- | + | position: relative; | |
- | + | right: -10px; | |
- | + | font-size: 8px; | |
- | + | alt="Join iGEM Chalmers on Facebook!" | |
- | + | title="Join iGEM Chalmers on Facebook!" | |
- | + | } | |
- | + | ||
- | + | #nav social2 { | |
- | + | background: none; | |
- | + | margin: 0 1px; | |
- | + | /*padding: 0 10px;*/ | |
- | + | position: relative; | |
- | + | right: -10px; | |
- | + | font-size: 8px; | |
- | + | alt="Follow iGEM Chalmers on Twitter!" | |
- | + | title="Follow iGEM Chalmers on Twitter!" | |
- | + | } | |
- | + | ||
- | + | #nav social3 { | |
- | + | background: none; | |
- | + | margin: 0 1px; | |
- | + | /*padding: 0 10px;*/ | |
- | + | position: relative; | |
- | + | right: -10px; | |
- | + | font-size: 8px; | |
- | + | alt="Look up the iGEM competition!" | |
- | + | title="Look up the iGEM competition!" | |
- | + | } | |
- | + | ||
- | + | #nav:after { | |
- | + | content: "."; | |
- | + | display: block; | |
- | + | clear: both; | |
- | + | visibility: hidden; | |
- | + | line-height: 0; | |
- | + | height: 0; | |
- | + | } | |
- | + | ||
- | + | .boxWrap | |
- | + | { | |
- | + | border: 1px solid #CCCCCC; | |
- | + | background-color: #F5F5F5; | |
- | + | box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); | |
- | + | -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Safari/Chrome */ | |
- | + | -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Old Mozilla Versions */ | |
- | + | border-radius: 15px; | |
- | + | -moz-border-radius: 15px; | |
- | + | padding: 15px; | |
- | + | text-align:justify; | |
- | + | max-width: 1000px; | |
- | + | } | |
- | + | ||
- | + | ||
- | + | /* CSS Document */ | |
- | + | #menu, #menu ul { | |
- | + | list-style:none; | |
- | + | padding:0; | |
- | + | margin:0; | |
- | + | } | |
- | + | #menu li { | |
- | + | float:left; | |
- | + | position:relative; | |
- | + | line-height:3.5em; | |
- | + | width:15em; | |
- | + | } | |
- | + | #menu li ul { | |
- | + | position:absolute; | |
- | + | margin-top:-1em; | |
- | + | margin-left:.5em; /* for IE */ | |
- | + | display:none; | |
- | + | } | |
- | + | #menu ul li ul { | |
- | + | margin-top:-3em; | |
- | + | margin-left:7em; | |
- | + | } | |
- | + | /* ******************************************************************* */ | |
- | + | /* SHOW SUBMENU 1 */ | |
- | + | #menu li:hover ul, #menu li.over ul { | |
- | + | display:block; | |
- | + | } | |
- | + | #menu li:hover ul ul, #menu li.over ul ul { | |
- | + | display:none; | |
- | + | } | |
- | + | /* SHOW SUBMENU 2 */ | |
- | + | #menu ul li:hover ul, #menu ul li.over ul { | |
- | + | display:block; | |
- | + | } | |
- | + | /* ******************************************************************* */ | |
- | + | /* STYLING UP THE LINKS */ | |
- | + | #menu a { | |
- | + | display:block; | |
- | + | border-right:1px solid #fff; | |
- | + | background:#E0F574; | |
- | /* | + | color:#3B3B3B; |
- | + | text-decoration:none; | |
- | */ | + | padding:0 10px; |
+ | } | ||
+ | #menu a:hover { | ||
+ | background-color:#5798B4; | ||
+ | color:#fff; | ||
+ | } | ||
+ | #menu ul { | ||
+ | border-top:1px solid #fff; | ||
+ | } | ||
+ | #menu ul a { | ||
+ | border-right:none; | ||
+ | border-right:1px solid #fff; | ||
+ | border-bottom:1px solid #fff; | ||
+ | border-left:1px solid #fff; | ||
+ | background:#AEC245; | ||
+ | } | ||
+ | |||
+ | /* ******************************************************************* */ | ||
+ | |||
+ | #menu { | ||
+ | z-index:1; | ||
+ | } | ||
+ | #menu ul { | ||
+ | z-index:2; | ||
+ | } | ||
+ | #menu ul ul { | ||
+ | z-index:3; | ||
+ | } | ||
+ | |||
+ | /* ******************************************************************* */ | ||
+ | |||
+ | /* Fix IE. Hide from IE Mac \*/ | ||
+ | * html ul li { float: left; height: 1%; } | ||
+ | * html ul li a { height: 1%; } | ||
+ | /* End */ | ||
+ | |||
</style> | </style> | ||
</head> | </head> | ||
</html> | </html> |
Latest revision as of 22:42, 4 September 2012