Team:Freiburg Bioware/css menu
From 2010.igem.org
(Difference between revisions)
(89 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<style> | <style> | ||
/* menu and header */ | /* menu and header */ | ||
+ | |||
+ | /* top menu */ | ||
+ | |||
+ | #p-logo { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #top-section .left-menu { | ||
+ | margin-left:0px; | ||
+ | } | ||
+ | #top-section { | ||
+ | background:transparent | ||
+ | } | ||
+ | |||
+ | #menubar li.pad-right { | ||
+ | padding-right:20px; | ||
+ | } | ||
+ | |||
+ | #search-controls { | ||
+ | top:15px; | ||
+ | margin-right:30px; | ||
+ | } | ||
+ | |||
+ | input.searchButton { | ||
+ | color:#555; | ||
+ | position:relative; | ||
+ | top:-20px; | ||
+ | left:20px; | ||
+ | } | ||
+ | input.searchButton:hover, #menubar li a:hover { | ||
+ | color:#030659; | ||
+ | } | ||
+ | |||
+ | #searchGoButton { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #searchInput { | ||
+ | width:100px; | ||
+ | } | ||
+ | |||
+ | #searchform { | ||
+ | left:-15px; | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | #menubar li a, #menubar .selected a { | ||
+ | color:#030659; | ||
+ | } | ||
+ | div#menubar li.menubar_current { | ||
+ | color:#970808; | ||
+ | } | ||
+ | |||
+ | #top-section #menubar { | ||
+ | top:10px; | ||
+ | } | ||
+ | |||
+ | #top-section .right-menu { | ||
+ | margin-right:185px; | ||
+ | width:250px; | ||
+ | } | ||
+ | |||
+ | |||
+ | input.searchButton { | ||
+ | left:80px; | ||
+ | } | ||
/* banner */ | /* banner */ | ||
+ | |||
+ | #banner-wrap { | ||
+ | width:975px; | ||
+ | height:350px; | ||
+ | position:relative; | ||
+ | margin-left:-10px; | ||
+ | top:12px; | ||
+ | background:transparent; | ||
+ | } | ||
+ | |||
+ | #banner1, #banner2, #banner3 { | ||
+ | background:transparent; | ||
+ | } | ||
#banner1 { | #banner1 { | ||
float:left; | float:left; | ||
- | width: | + | width: 713px; |
- | height: | + | height: 285px; |
- | margin: | + | margin: 0px 0px 0px 0px; |
background: transparent | background: transparent | ||
url(https://static.igem.org/mediawiki/2010/3/33/Freiburg10_Banner_Snippet_1.png) no-repeat scroll center 0px; | url(https://static.igem.org/mediawiki/2010/3/33/Freiburg10_Banner_Snippet_1.png) no-repeat scroll center 0px; | ||
- | |||
position:relative; | position:relative; | ||
+ | top:-25px; | ||
} | } | ||
#banner2 { | #banner2 { | ||
float:left; | float:left; | ||
- | width: | + | width: 20px; |
- | height: | + | height: 325px; |
- | margin: -25px 0px 0px 0px; | + | margin: 0px 0px 0px 0px; |
+ | background: transparent | ||
+ | url(https://static.igem.org/mediawiki/2010/1/1b/Freiburg10_Banner_Snippet_6.png) no-repeat scroll center 0px; | ||
+ | position:relative; | ||
+ | top:-25px; | ||
+ | z-index:2; | ||
+ | } | ||
+ | |||
+ | #banner3 { | ||
+ | float:left; | ||
+ | width: 242px; | ||
+ | height: 260px; | ||
+ | margin: 0px 0px 0px 0px; | ||
background: transparent | background: transparent | ||
- | url(https://static.igem.org/mediawiki/2010/ | + | url(https://static.igem.org/mediawiki/2010/b/ba/Freiburg10_Banner_Snippet_3.png) no-repeat scroll center 0px; |
- | + | ||
position:relative; | position:relative; | ||
+ | top:-25px; | ||
+ | z-index:-1; | ||
} | } | ||
Line 30: | Line 122: | ||
width: 965px; | width: 965px; | ||
height: 400px; | height: 400px; | ||
- | margin: | + | margin: 0px 0px 0px 0px; |
background: white | background: white | ||
url(https://static.igem.org/mediawiki/2010/f/f5/Freiburg10_huennue5-_Kopie2.png) no-repeat scroll center 0px; | url(https://static.igem.org/mediawiki/2010/f/f5/Freiburg10_huennue5-_Kopie2.png) no-repeat scroll center 0px; | ||
Line 36: | Line 128: | ||
/* Drop-Down Start */ | /* Drop-Down Start */ | ||
- | #menu {list-style-type:none | + | div#menu { |
- | #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:119px; height:3em | + | left:5px; |
+ | } | ||
+ | #menu { | ||
+ | clear:both; | ||
+ | width: 975px; | ||
+ | margin: 0px 0px 0px 0px; | ||
+ | border: none; | ||
+ | position: relative; | ||
+ | text-align:center; | ||
+ | top: -52px; | ||
+ | filter:alpha(opacity=50); -moz-opacity: 0.97; opacity: 0.97; | ||
+ | filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=97, FinishOpacity=80, Style=2); | ||
+ | filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=97, FinishOpacity=80, Style=2)"; | ||
+ | z-index:1; | ||
+ | } | ||
+ | |||
+ | #menu {list-style-type:none; padding:0;} | ||
+ | #menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:119px; height:3em;} | ||
#menu li dl {position:absolute; top:0; left:0; padding-bottom:0;} | #menu li dl {position:absolute; top:0; left:0; padding-bottom:0;} | ||
#menu li a, #menu li a:visited {text-decoration:none;} | #menu li a, #menu li a:visited {text-decoration:none;} | ||
#menu li dd {display:none;} | #menu li dd {display:none;} | ||
+ | #menu li d3 {display:none;} | ||
#menu li a:hover {border:0;} | #menu li a:hover {border:0;} | ||
- | #menu li:hover dd, #menu li a:hover dd {display:block;} | + | #menu li:hover dd, #menu li a:hover dd, #menu li:hover d3, #menu li a:hover d3 {display:block;} |
#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;} | #menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;} | ||
- | #menu table {border-collapse:collapse; padding:0; margin:-1px | + | #menu table {border-collapse:collapse; padding:0; margin:-1px;} |
#menu dl {width: 119px; margin: 0; padding: 0; background: transparent;} | #menu dl {width: 119px; margin: 0; padding: 0; background: transparent;} | ||
#menu dt {margin:0; padding: 0;} | #menu dt {margin:0; padding: 0;} | ||
- | #menu dd {margin:0; padding:0; color: #fff; font-size: | + | #menu dd, #menu d3 {margin:0; padding:0; color: #fff; font-size: 0.9em; text-align:left;width: 150px;} |
+ | #menu dd.first, #menu d3.first {margin: 30px 0 0;} | ||
- | #menu dt a, #menu dt a:visited { | + | #menu dt a, |
+ | #menu dt a:visited { | ||
width: 120px; | width: 120px; | ||
height: 35px; | height: 35px; | ||
Line 60: | Line 172: | ||
text-decoration: none; | text-decoration: none; | ||
color: #555555; | color: #555555; | ||
- | background: transparent url( | + | background: transparent url(https://static.igem.org/mediawiki/2010/5/56/Freiburg10_button_a_120.jpg) no-repeat scroll center center; |
outline:none;} | outline:none;} | ||
- | + | #menu li:hover dt a, | |
- | #menu li: | + | #menu a:hover dt a, |
+ | #menu li:active dt a, | ||
+ | #menu a:active dt a { | ||
color:#030659; | color:#030659; | ||
+ | background: transparent url(https://static.igem.org/mediawiki/2010/8/88/Freiburg10_button_aho_120.jpg) no-repeat scroll center center; | ||
+ | outline:none; | ||
+ | } | ||
+ | #menu li dt a.current, | ||
+ | #menu li dt a.current { | ||
+ | color:#970808; | ||
background: transparent url(http://www.molbiotech.uni-freiburg.de/iGEM/wiki2010/images/8/88/Freiburg10_button_aho_120.jpg) no-repeat scroll center center; | background: transparent url(http://www.molbiotech.uni-freiburg.de/iGEM/wiki2010/images/8/88/Freiburg10_button_aho_120.jpg) no-repeat scroll center center; | ||
- | |||
outline:none; | outline:none; | ||
} | } | ||
- | + | #menu li:active dt a, #menu a:active dt a, #menu li:focus dt a, #menu a:focus dt a {color:#970808;} | |
- | #menu dd a, #menu dd a:visited {background:# | + | #menu dt.menu_button_left a, |
- | + | #menu dt.menu_button_left a:visited { | |
- | + | background: transparent url(https://static.igem.org/mediawiki/2010/1/15/Freiburg10_button_a_left_120.png) no-repeat scroll center center; | |
- | #menu dd a:hover {background: #d7f6d6; color:#030659; border: none; font-weight:bolder;} | + | } |
- | + | #menu li:hover dt.menu_button_left a, | |
+ | #menu a:hover dt.menu_button_left a, | ||
+ | #menu li:active dt.menu_button_left a, | ||
+ | #menu a:active dt.menu_button_left a, | ||
+ | #menu li dt.menu_button_left a.current, | ||
+ | #menu a dt.menu_button_left a.current { | ||
+ | background: transparent url(https://static.igem.org/mediawiki/2010/b/b2/Freiburg10_button_aho_left_120.png) no-repeat scroll center center; | ||
+ | } | ||
+ | #menu li:active dt.menu_button_left a, | ||
+ | #menu a:active dt.menu_button_left a, | ||
+ | #menu li:focus dt.menu_button_left a, | ||
+ | #menu a:focus dt.menu_button_left a { | ||
+ | color:#970808; | ||
+ | } | ||
+ | #menu dt.menu_button_right a, | ||
+ | #menu dt.menu_button_right a:visited { | ||
+ | background: transparent url(https://static.igem.org/mediawiki/2010/f/f0/Freiburg10_button_a_right_120.png) no-repeat scroll center center; | ||
+ | } | ||
+ | #menu li:hover dt.menu_button_right a, | ||
+ | #menu a:hover dt.menu_button_right a, | ||
+ | #menu li:active dt.menu_button_right a, | ||
+ | #menu a:active dt.menu_button_right a, | ||
+ | #menu li dt.menu_button_right a.current, | ||
+ | #menu a dt.menu_button_right a.current { | ||
+ | background: transparent url(https://static.igem.org/mediawiki/2010/0/0f/Freiburg10_button_aho_right_120.png) no-repeat scroll center center; | ||
+ | } | ||
+ | #menu li:active dt.menu_button_right a, | ||
+ | #menu a:active dt.menu_button_right a, | ||
+ | #menu li:focus dt.menu_button_right a, | ||
+ | #menu a:focus dt.menu_button_right a { | ||
+ | color:#970808; | ||
+ | } | ||
+ | #menu dd a, #menu dd a:visited, #menu d3 a, #menu d3 a:visited {background:#f5f5f5; color: #555555; padding:0.5em 0; text-decoration:none; display:block; text-align:left; border:none; font-weight:bolder; padding: 5px;} | ||
+ | #menu dd a:hover, #menu d3 a:hover {background: #d7f6d6; color:#030659; border: none; font-weight:bolder;} | ||
#menu b {display:block; overflow:hidden; height:1px;} | #menu b {display:block; overflow:hidden; height:1px;} | ||
+ | #menu ul {list-style-image:none;} | ||
- | /* | + | /* 3rd level */ |
- | + | ||
- | + | ||
+ | /* Drop-Down Start */ | ||
- | + | #menu3 { | |
- | + | width: 975px; | |
- | + | ||
- | + | ||
- | + | ||
- | width: | + | |
margin: 0px 0px 0px 0px; | margin: 0px 0px 0px 0px; | ||
border: none; | border: none; | ||
position: relative; | position: relative; | ||
- | |||
- | |||
text-align:center; | text-align:center; | ||
- | top: - | + | top: -57px; |
- | filter:alpha(opacity= | + | filter:alpha(opacity=50); -moz-opacity: 0.97; opacity: 0.97; |
+ | filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=97, FinishOpacity=80, Style=2); | ||
+ | filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=97, FinishOpacity=80, Style=2)"; | ||
+ | z-index:1; | ||
} | } | ||
- | # | + | #menu3 {list-style-type:none; padding:0;} |
- | display: none; | + | #menu3 li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:119px; height:3em;} |
- | } | + | #menu3 li dl {position:absolute; top:0; left:0; padding-bottom:0;} |
+ | #menu3 li a, #menu li a:visited {text-decoration:none;} | ||
+ | #menu3 li dd {display:none;} | ||
+ | #menu3 li d3 {display:none;} | ||
+ | #menu3 li a:hover {border:0;} | ||
+ | #menu3 li:hover dd, #menu li a:hover dd, #menu li:hover d3, #menu li a:hover d3 {display:block;} | ||
+ | #menu3 li:hover dl, #menu li a:hover dl {padding-bottom:10px;} | ||
+ | #menu3 table {border-collapse:collapse; padding:0; margin:-1px;} | ||
+ | #menu3 dl {width: 119px; margin: 0; padding: 0; background: transparent;} | ||
+ | #menu3 dd {margin:0; padding: 0;} | ||
- | + | #menu d3 {margin:0; padding:0; color: #fff; font-size: 0.9em; text-align:left;width: 150px;} | |
- | + | #menu d3.first {margin: 30px 0 0;} | |
- | } | + | |
- | + | #menu3 dd a, | |
+ | #menu3 dd a:visited { | ||
width: 120px; | width: 120px; | ||
height: 35px; | height: 35px; | ||
Line 117: | Line 275: | ||
text-decoration: none; | text-decoration: none; | ||
color: #555555; | color: #555555; | ||
- | background: | + | background: none repeat scroll 0 0 #F5F5F5; |
- | + | outline:none;} | |
- | + | ||
+ | #menu3 li:hover dd a, | ||
+ | #menu3 a:hover dd a, | ||
+ | #menu3 li:active dd a, | ||
+ | #menu3 a:active dd a { | ||
+ | color:#030659; | ||
+ | background: background: none repeat scroll 0 0 #030659; | ||
+ | outline:none; | ||
} | } | ||
- | + | #menu3 li dd a.current, | |
- | + | #menu3 li dd a.current { | |
- | + | color:#970808; | |
- | + | background: transparent url(http://www.molbiotech.uni-freiburg.de/iGEM/wiki2010/images/8/88/Freiburg10_button_aho_120.jpg) no-repeat scroll center center; | |
- | + | ||
- | background: transparent url(http://www.molbiotech.uni-freiburg.de/iGEM/wiki2010/images/ | + | |
- | + | ||
outline:none; | outline:none; | ||
} | } | ||
- | .menu_button_left. | + | #menu3 li:active dd a, #menu a:active dd a, #menu li:focus dd a, #menu a:focus dt a {color:#970808;} |
+ | #menu3 dd.menu_button_left a, | ||
+ | #menu3 dd.menu_button_left a:visited { | ||
+ | background: transparent url(http://www.molbiotech.uni-freiburg.de/iGEM/wiki2010/images/2/2f/Freiburg10_button_a_left_120.jpg) no-repeat scroll center center; | ||
+ | } | ||
+ | #menu3 li:hover dd.menu_button_left a, | ||
+ | #menu3 a:hover dd.menu_button_left a, | ||
+ | #menu3 li:active dd.menu_button_left a, | ||
+ | #menu3 a:active dd.menu_button_left a, | ||
+ | #menu3 li dd.menu_button_left a.current, | ||
+ | #menu3 a dd.menu_button_left a.current { | ||
background: transparent url(http://www.molbiotech.uni-freiburg.de/iGEM/wiki2010/images/9/92/Freiburg10_button_aho_left_120.jpg) no-repeat scroll center center; | background: transparent url(http://www.molbiotech.uni-freiburg.de/iGEM/wiki2010/images/9/92/Freiburg10_button_aho_left_120.jpg) no-repeat scroll center center; | ||
- | |||
- | |||
} | } | ||
- | + | #menu3 li:active dd.menu_button_left a, | |
- | + | #menu3 a:active dd.menu_button_left a, | |
- | + | #menu3 li:focus dd.menu_button_left a, | |
- | + | #menu3 a:focus dd.menu_button_left a { | |
- | + | color:#970808; | |
- | + | } | |
- | + | #menu3 dd.menu_button_right a, | |
- | + | #menu3 dd.menu_button_right a:visited { | |
- | + | ||
- | + | ||
- | + | ||
background: transparent url(http://www.molbiotech.uni-freiburg.de/iGEM/wiki2010/images/a/a6/Freiburg10_button_a_right_120.jpg) no-repeat scroll center center; | background: transparent url(http://www.molbiotech.uni-freiburg.de/iGEM/wiki2010/images/a/a6/Freiburg10_button_a_right_120.jpg) no-repeat scroll center center; | ||
- | |||
- | |||
} | } | ||
- | + | #menu3 li:hover dd.menu_button_right a, | |
+ | #menu3 a:hover dd.menu_button_right a, | ||
+ | #menu3 li:active dd.menu_button_right a, | ||
+ | #menu3 a:active dd.menu_button_right a, | ||
+ | #menu3 li dd.menu_button_right a.current, | ||
+ | #menu3 a dd.menu_button_right a.current { | ||
background: transparent url(http://www.molbiotech.uni-freiburg.de/iGEM/wiki2010/images/f/f9/Freiburg10_button_aho_right_120.jpg) no-repeat scroll center center; | background: transparent url(http://www.molbiotech.uni-freiburg.de/iGEM/wiki2010/images/f/f9/Freiburg10_button_aho_right_120.jpg) no-repeat scroll center center; | ||
- | |||
- | |||
} | } | ||
- | + | #menu3 li:active dd.menu_button_right a, | |
- | + | #menu3 a:active dd.menu_button_right a, | |
- | + | #menu3 li:focus dd.menu_button_right a, | |
- | + | #menu3 a:focus dd.menu_button_right a { | |
- | + | color:#970808; | |
- | .menu_button_right | + | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | #menu3 d3 a, #menu3 d3 a:visited {background:#f5f5f5; color: #555555; padding:0.5em 0; text-decoration:none; display:block; text-align:left; border:none; font-weight:bolder; padding: 5px;} | ||
+ | #menu3 d3 a:hover {background: #d7f6d6; color:#030659; border: none; font-weight:bolder;} | ||
+ | #menu3 b {display:block; overflow:hidden; height:1px;} | ||
+ | #menu3 ul {list-style-image:none;} | ||
- | + | /* Drop-Down-End */ | |
- | + | ||
- | + | ||
- | + | ||
- | + | #content a#top { | |
- | + | display:none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | ||
- | + | .firstHeading, #contentSub { | |
- | + | display:none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 01:03, 28 October 2010