Template:Team:KULeuven/Common2/Submenutest
From 2009.igem.org
(Difference between revisions)
Bart Bosmans (Talk | contribs) |
Bart Bosmans (Talk | contribs) |
||
(158 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<style type="text/css"> | <style type="text/css"> | ||
<!-- | <!-- | ||
- | div# | + | |
- | + | div#header2 { | |
- | + | height: 160px; | |
+ | background-color: none; | ||
+ | background: url(https://static.igem.org/mediawiki/2009/0/02/Header2.3.png) no-repeat; | ||
+ | background-position: top left; | ||
position: relative; | position: relative; | ||
+ | vertical-align: bottom; | ||
+ | margin-bottom: 30px; | ||
+ | } | ||
+ | |||
+ | div#Team { | ||
+ | position: absolute; | ||
+ | top: 30px; | ||
+ | left: 115px; | ||
+ | font-size: 220%; | ||
+ | z-index: 1; | ||
+ | font-family: "Times New Roman"; /*,Georgia,Serif; */ | ||
+ | font-weight: bold; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | div#title2 { | ||
+ | position: absolute; | ||
+ | top: 75px; | ||
+ | left: 200px; | ||
+ | font-size: 300%; | ||
+ | z-index: 1; | ||
+ | font-family: "Times New Roman"; /*,Georgia,Serif; */ | ||
+ | font-weight: bolder; | ||
+ | font-style: oblique; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | div#title2 a, div#title2 a:visited, div#slogan2 a, div#slogan2 a:visited,div#Team a:visited { | ||
+ | text-decoration: none; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | div#slogan2 { | ||
+ | position: absolute; | ||
+ | top: 110px; | ||
+ | left: 220px; | ||
+ | font-size: 180%; | ||
+ | z-index: 1; | ||
+ | font-family: "Times New Roman"; /*,Georgia,Serif; */ | ||
+ | font-style: oblique; | ||
+ | |||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | div#submenu { | ||
+ | width: 147px; | ||
+ | height:100%; | ||
+ | position:absolute; | ||
+ | left:0px; | ||
+ | top: 208px; | ||
+ | left:5px; | ||
float: left; | float: left; | ||
- | background | + | background:url(https://static.igem.org/mediawiki/2009/b/be/Headerver2.png) no-repeat; |
} | } | ||
- | div# | + | div#submenu ul { |
+ | position: relative; | ||
+ | margin-top:50px; | ||
+ | } | ||
+ | div#submenu ul a { | ||
display: block; | display: block; | ||
- | background-color: | + | background-color:none; |
color: white; | color: white; | ||
- | padding: | + | padding: 3px 3px 3px 16px; |
- | margin: 0 | + | margin: 0 20px -2px -19px; |
text-decoration: none; | text-decoration: none; | ||
font-weight: bold; | font-weight: bold; | ||
border: 1px solid white; | border: 1px solid white; | ||
+ | border-left:none; | ||
+ | border-right:none; | ||
} | } | ||
- | div# | + | div#submenu ul a:hover { |
- | color: # | + | color: Black; |
+ | background-color: #C9D5E0; | ||
} | } | ||
- | div# | + | div#submenu ul .selflink { |
display: block; | display: block; | ||
- | background-color: | + | background-color: #C9D5E0; |
- | color: | + | color: Black; |
- | padding: | + | padding: 3px 3px 3px 16px; |
- | margin: 0 | + | margin: 0 20px -3px -19px; |
text-decoration: none; | text-decoration: none; | ||
font-weight:bold; | font-weight:bold; | ||
border: 1px solid white; | border: 1px solid white; | ||
+ | border-left:none; | ||
+ | border-right:none; | ||
} | } | ||
- | div# | + | div#submenu li { |
list-style: none; | list-style: none; | ||
color: #1b1a44; | color: #1b1a44; | ||
+ | } | ||
+ | |||
+ | .ddsmoothmenu{ | ||
+ | font: bold 12px Verdana; | ||
+ | background-color: #275472; | ||
+ | width: 100%; | ||
+ | height:26px; | ||
+ | position: absolute; | ||
+ | top:160px; | ||
+ | bottom: 0px; | ||
+ | left: 0px; | ||
+ | border: 1px solid white; | ||
+ | border-left: none; | ||
+ | border-right: none; | ||
+ | } | ||
+ | |||
+ | .ddsmoothmenu ul{ | ||
+ | z-index:100; | ||
+ | position:relative; | ||
+ | margin:0; | ||
+ | left:147px; | ||
+ | padding: 0; | ||
+ | list-style-type: none; | ||
+ | list-style: none; | ||
+ | } | ||
+ | |||
+ | /*Top level list items*/ | ||
+ | .ddsmoothmenu ul li{ | ||
+ | position:relative; | ||
+ | margin:2px 0 1px 0; | ||
+ | display: inline; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | /*Top level menu link items style*/ | ||
+ | .ddsmoothmenu ul li a, .ddsmoothmenu ul li strong.selflink { | ||
+ | display: block; | ||
+ | background:#275472; / *background of menu items (default state)*/ | ||
+ | color: black; | ||
+ | margin-right:-1px; | ||
+ | padding: 2px 8px 2px 8px; | ||
+ | border: 1px solid white; | ||
+ | border-bottom: none; | ||
+ | border-top:none; | ||
+ | color: black; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .ddsmoothmenu ul li strong.selflink { | ||
+ | Background-color:#C9D5E0; | ||
+ | } | ||
+ | |||
+ | * html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ | ||
+ | display: inline-block; | ||
+ | } | ||
+ | |||
+ | .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{ | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .ddsmoothmenu ul li a.xxxselected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/ | ||
+ | background: black; | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | .ddsmoothmenu ul li a:hover{ | ||
+ | background: #C9D5E0; /*background of menu items during onmouseover (hover state)*/ | ||
+ | color: Black; | ||
+ | } | ||
+ | |||
+ | /*1st sub level menu*/ | ||
+ | .ddsmoothmenu ul li ul{ | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | display: none; /*collapse all sub menus to begin with*/ | ||
+ | visibility: hidden; | ||
+ | } | ||
+ | |||
+ | /*Sub level menu list items (undo style from Top level List Items)*/ | ||
+ | .ddsmoothmenu ul li ul li{ | ||
+ | display: list-item; | ||
+ | float: none; | ||
+ | } | ||
+ | |||
+ | /*All subsequent sub menu levels vertical offset after 1st level sub menu */ | ||
+ | .ddsmoothmenu ul li ul li ul{ | ||
+ | top: 0; | ||
+ | } | ||
+ | |||
+ | /* Sub level menu links style */ | ||
+ | .ddsmoothmenu ul li ul li a{ | ||
+ | font: normal 13px Verdana; | ||
+ | width: 160px; /*width of sub menus*/ | ||
+ | padding: 5px; | ||
+ | margin: 0; | ||
+ | border-top-width: 0; | ||
+ | border-bottom: 1px solid gray; | ||
+ | } | ||
+ | |||
+ | /* Holly Hack for IE \*/ | ||
+ | * html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/ | ||
+ | |||
+ | |||
+ | /* ######### CSS classes applied to down and right arrow images ######### */ | ||
+ | |||
+ | .downarrowclass{ | ||
+ | position: absolute; | ||
+ | top: 12px; | ||
+ | right: 7px; | ||
+ | } | ||
+ | |||
+ | .rightarrowclass{ | ||
+ | position: absolute; | ||
+ | top: 6px; | ||
+ | right: 5px; | ||
+ | } | ||
+ | |||
+ | /* ######### CSS for shadow added to sub menus ######### */ | ||
+ | |||
+ | .ddshadow{ | ||
+ | position: absolute; | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | background: silver; | ||
+ | } | ||
+ | |||
+ | .toplevelshadow{ /*shadow opacity. Doesn't work in IE*/ | ||
+ | opacity: 0.8; | ||
+ | } | ||
+ | |||
+ | div#ContactUs{ | ||
+ | position: relative; | ||
+ | top:-23px; | ||
+ | left:860px ; | ||
+ | float: left; | ||
+ | z-index: 1; | ||
+ | background-color:none; | ||
+ | height:26px; | ||
+ | } | ||
+ | |||
+ | div#ContactUs a { | ||
+ | font: bold 12px Verdana; | ||
+ | color: white; | ||
+ | text-decoration: none; | ||
+ | margin: 2px 0 2px 0; | ||
+ | padding: 3px 20px 3px 3px; | ||
+ | border-left:1px solid white; | ||
+ | } | ||
+ | |||
+ | div#ContactUs a:hover { | ||
+ | color: Black; | ||
+ | background-color: #C9D5E0; | ||
} | } | ||
--> | --> | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 07:48, 10 October 2009