Template:Team:Groningen/Header

From 2010.igem.org

(Difference between revisions)
Line 46: Line 46:
li {display:inline;}
li {display:inline;}
-
div.MenuBar {
+
/*
-
  font: arial, helvetica, sans-serif;
+
-
  height: 30px;
+
-
  width: 910px;
+
-
  /*width: 100%*/
+
-
  margin: 0;
+
-
  border-top: 0;
+
-
  border-right: 0;
+
-
  border-left: 0;
+
-
  padding: 0;
+
-
  background: black;
+
    
    
-
}
+
  Script-Free 3-Level Menu 1.3.4
-
div.MenuBar ul {
+
  www.CesarDaniel.info/Tech/ScriptFree3LevelMenu.html
-
   font: arial, helvetica, sans-serif;
+
    
-
   text-align: center;
+
   ...............................................................................................
-
   list-style-type: none;
+
 
-
   margin: 0.5em auto;
+
  Sections
 +
 
 +
  * Reset
 +
  * Menu Bar
 +
  * Drop-Down Menus
 +
   * Side Menus
 +
  * Browser Specific
 +
  * Default Colors (Required)
 +
 
 +
*/
 +
/*---------------------------------------------------------------------------------------- Reset */
 +
div.MenuBar,
 +
div.MenuBar ul,
 +
div.MenuBar li,
 +
div.MenuBar a,
 +
div.MenuBar table,
 +
div.MenuBar span {
 +
   margin: 0;
   border: 0;
   border: 0;
   padding: 0;
   padding: 0;
-
   background: black;
+
   z-index: 255;
 +
}
 +
div.MenuBar ul li ul.DropDownMenu {
 +
  display: none; /* Hides all drop-down menus. */
 +
}
 +
/*
 +
li:hover works in IE7 and FF2.
 +
a:hover works in IE6 and FF2.
 +
a:hover breaks li:hover in FF2.
 +
*/
 +
div.MenuBar ul li:hover ul.DropDownMenu li ul.SideMenu,
 +
div.MenuBar ul li a:hover ul.DropDownMenu li a ul.SideMenu {
 +
  display: none; /* Hides all side menus. */
 +
}
 +
/*------------------------------------------------------------------------------------- Menu Bar */
 +
div.MenuBar {
 +
  height: 25px; /* Total height 27px. */
}
}
div.MenuBar ul li {
div.MenuBar ul li {
-
  font: arial, helvetica, sans-serif;
 
-
  display: block;
 
-
  padding: 0;
 
-
  margin: 0;
 
-
  font-size: 1.3em;
 
   float: left;
   float: left;
-
   background: black;
+
   list-style-type: none !important;
-
  text-align: center;
+
   margin: 0 !important;
-
   width: 107px;
+
   position: relative; /* Sets the positioning context for each drop-down menu. */
   position: relative; /* Sets the positioning context for each drop-down menu. */
}
}
-
 
div.MenuBar ul li a {
div.MenuBar ul li a {
-
  font: arial, helvetica, sans-serif;
 
   display: block;
   display: block;
-
  background: black;
+
   height: 17px; /* Keep height + padding-top + padding-bottom sync with the menu bar height. */
-
   height: 22px; /* Keep height + padding-top + padding-bottom sync with the menu bar height. */
+
-
  color: #ffffff;
+
   padding-top: 4px;
   padding-top: 4px;
   padding-bottom: 4px;
   padding-bottom: 4px;
   padding-left: 1em; /* Sets the left space between top-level items. */
   padding-left: 1em; /* Sets the left space between top-level items. */
   padding-right: 1em; /* Sets the right space between top-level items. */
   padding-right: 1em; /* Sets the right space between top-level items. */
-
   text-decoration: none;
+
   text-decoration: none !important;
}
}
-
 
/*------------------------------------------------------------------------------ Drop-Down Menus */
/*------------------------------------------------------------------------------ Drop-Down Menus */
div.MenuBar ul li:hover ul.DropDownMenu,
div.MenuBar ul li:hover ul.DropDownMenu,
div.MenuBar ul li a:hover ul.DropDownMenu {
div.MenuBar ul li a:hover ul.DropDownMenu {
   display: block;
   display: block;
-
   width: 10em; /* Drop-down menu width.
+
   width: 13em; /* Drop-down menu width.
                   Use MenuTailor.css to customize. */
                   Use MenuTailor.css to customize. */
-
  height: 1em;
 
   padding: 1px; /* Sets the drop-down menu "effective border" width. */
   padding: 1px; /* Sets the drop-down menu "effective border" width. */
-
   position: absolute;  
+
   position: absolute;
-
   top: 23px; /* Places the drop-down menu under the menu bar.
+
   top: 25px; /* Places the drop-down menu under the menu bar.
                 Keep it sync with the menu bar height. */
                 Keep it sync with the menu bar height. */
   left: 0; /* Aligns the drop-down menu to its top-level item. */
   left: 0; /* Aligns the drop-down menu to its top-level item. */
-
  background-color: black; /* Selected item. */
 
-
  color: #FFFFFF;
 
-
 
}
}
div.MenuBar ul li:hover ul.DropDownMenu li a,
div.MenuBar ul li:hover ul.DropDownMenu li a,
div.MenuBar ul li a:hover ul.DropDownMenu li a {
div.MenuBar ul li a:hover ul.DropDownMenu li a {
-
   width: 10em; /* Keep it sync with the drop-down menu width.
+
   width: 13em; /* Keep it sync with the drop-down menu width.
-
                            Use MenuTailor.css to customize. */
+
                  Use MenuTailor.css to customize. */
-
  height: 1em;
+
   padding-left: 0;
   padding-left: 0;
   padding-right: 0;
   padding-right: 0;
-
  background-color: black; /* Selected item. */
 
-
  color: #FFFFFF;
 
}
}
ul.DropDownMenu li a span {
ul.DropDownMenu li a span {
Line 128: Line 133:
ul.DropDownMenu li a span span {
ul.DropDownMenu li a span span {
   float: left; /* Aligns the text (back) to the left. */
   float: left; /* Aligns the text (back) to the left. */
-
  font: 12px arial, helvetica, sans-serif; /* Required for IE55. */
 
-
  height: 20px;
 
-
  color: #FFFFFF;
 
}
}
/*----------------------------------------------------------------------------------- Side Menus */
/*----------------------------------------------------------------------------------- Side Menus */
Line 143: Line 145:
                 Keep it sync with the side menu "effective border" width. */
                 Keep it sync with the side menu "effective border" width. */
   left: 13em; /* Places the side menu to the right of the drop-down menu.
   left: 13em; /* Places the side menu to the right of the drop-down menu.
-
                            Keep it sync with the drop-down menu width.
+
                Keep it sync with the drop-down menu width.
-
                            Use MenuTailor.css to customize. */
+
                Use MenuTailor.css to customize. */
}
}
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a,
div.MenuBar ul li:hover ul.DropDownMenu li:hover ul.SideMenu li a,
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a {
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a {
   width: 11em; /* Keep it sync with the side menu width.
   width: 11em; /* Keep it sync with the side menu width.
-
                            Use MenuTailor.css to customize. */
+
                  Use MenuTailor.css to customize. */
-
  font: 12px arial, helvetica, sans-serif; /* Required for IE55. */
+
-
  left: 13em; /* Places the side menu to the right of the drop-down menu.
+
-
                            Keep it sync with the drop-down menu width.
+
-
                            Use MenuTailor.css to customize. */
+
}
}
div.MenuBar ul li ul.DropDownMenu li ul.SideMenu li a span {
div.MenuBar ul li ul.DropDownMenu li ul.SideMenu li a span {
Line 159: Line 157:
   padding-right: 0.5em; /* Sets the right space of each side menu item. */
   padding-right: 0.5em; /* Sets the right space of each side menu item. */
   text-align: left;
   text-align: left;
-
  font: 12px arial, helvetica, sans-serif; /* Required for IE55. */
 
-
  left: 13em; /* Places the side menu to the right of the drop-down menu.
 
-
                            Keep it sync with the drop-down menu width.
 
-
                            Use MenuTailor.css to customize. */
 
}
}
/*----------------------------------------------------------------------------- Browser Specific */
/*----------------------------------------------------------------------------- Browser Specific */
 +
* html div.MenuBar {
 +
  position: relative; /* For IE55 and IE6.
 +
                        Hidden (* html) from non-IE browsers. */
 +
}
* html div.MenuBar ul li a {
* html div.MenuBar ul li a {
-
   float: left; /* Required for IE55 and IE6.
+
   float: left; /* For IE55 and IE6.
-
                            Breaks O9.
+
                  Breaks O9.
-
                            Hidden (* html) from non-IE browsers. */
+
                  Hidden (* html) from non-IE browsers. */
}
}
* html ul.DropDownMenu li a:hover {
* html ul.DropDownMenu li a:hover {
-
   cursor: hand; /* Required for IE55.
+
   cursor: hand; /* For IE55.
                   Hidden (* html) from non-IE browsers. */
                   Hidden (* html) from non-IE browsers. */
}
}
ul.DropDownMenu li a:hover {
ul.DropDownMenu li a:hover {
-
   cursor: pointer; /* Required for IE6 and IE7.
+
   cursor: pointer; /* For IE6 and IE7.
-
                       Hidding it (* html) from non-IE browsers breaks IE7!  
+
                       Hidding it (* html) from non-IE browsers breaks IE7! */
}
}
* html div.MenuBar a:hover {
* html div.MenuBar a:hover {
-
   text-decoration: none; /* Required for IE55 and IE6.
+
   text-decoration: none; /* For IE55 and IE6.
                             Hidden (* html) from non-IE browsers. */
                             Hidden (* html) from non-IE browsers. */
}
}
* html div.MenuBar ul li table,
* html div.MenuBar ul li table,
* html div.MenuBar ul li table td {
* html div.MenuBar ul li table td {
-
   border: 0; /* Required for IE55 and IE6.
+
   border: 0; /* For IE55 and IE6.
                 Hidden (* html) from non-IE browsers. */
                 Hidden (* html) from non-IE browsers. */
}
}
Line 190: Line 188:
div.MenuBar {
div.MenuBar {
   background-color: Menu;
   background-color: Menu;
-
   border-bottom: 1px solid ButtonShadow;
+
   border-color: ButtonShadow;
}
}
div.MenuBar a {
div.MenuBar a {
Line 198: Line 196:
div.MenuBar ul li:hover a,
div.MenuBar ul li:hover a,
div.MenuBar ul li a:hover {
div.MenuBar ul li a:hover {
-
  color: #ea7f16;
 
   background-color: Highlight; /* Top-level selected item. */
   background-color: Highlight; /* Top-level selected item. */
   color: HighlightText;
   color: HighlightText;
Line 209: Line 206:
div.MenuBar ul li:hover ul.DropDownMenu li a,
div.MenuBar ul li:hover ul.DropDownMenu li a,
div.MenuBar ul li a:hover ul.DropDownMenu li a {
div.MenuBar ul li a:hover ul.DropDownMenu li a {
-
   background-color: Menu; Drop-down menu unselected items.
+
   background-color: Menu; /* Drop-down menu unselected items.
                             Sets the drop-down menu "effective background" color. */
                             Sets the drop-down menu "effective background" color. */
   color: MenuText;
   color: MenuText;
Line 232: Line 229:
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a:hover {
div.MenuBar ul li a:hover ul.DropDownMenu li a:hover ul.SideMenu li a:hover {
   background-color: Highlight; /* Side menu selected item. */
   background-color: Highlight; /* Side menu selected item. */
-
   color: HighlightText;  
+
   color: HighlightText;
-
 
+
}
 +
/*-----------------------------------------------------------------------------------------------*/
</style>
</style>

Revision as of 07:06, 13 June 2010