Team:XMU-China/CSS/SpryMenuBarHorizontal/css

From 2012.igem.org

(Difference between revisions)
 
(144 intermediate revisions not shown)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
+
<html>
 +
<style type="text/css">  
-
<html>
 
-
<div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #fe2b33;">
 
-
<!-- *** <div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;">
 
-
This is a template page. READ THESE INSTRUCTIONS.
 
-
</div>
 
-
<div id="instructions" style="text-align: center; font-weight: normal; font-size: small; color: #f6f6f6; padding: 5px;">
 
-
You are provided with this team page template with whic to start the iGEM season.  You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki.  You can find some examples <a href="https://2009.igem.org/Help:Template/Examples">HERE</a>.
 
-
</div>
 
-
<div id="warning" style="text-align: center; font-weight: bold; font-size: small; color: #f6f6f6; padding: 5px;">
 
-
You <strong>MUST</strong> have all of the pages listed in the menu below with the names specified. PLEASE keep all of your pages within your teams namespace. 
 
-
</div>*** -->
 
-
</div>
+
@charset "UTF-8";
-
</html>
+
 +
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
 +
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
-
<!-- *** End of the alert box *** -->
+
/*******************************************************************************
 +
LAYOUT INFORMATION: describes box model, positioning, z-order
 +
*******************************************************************************/
-
{|align="justify"
+
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
-
||[[Image:XMU-China_logo.png|200px|right|frame]]
+
ul.MenuBarHorizontal
-
|-
+
{
-
|
+
margin: 0;
-
The aim of this study is to construct a fluorescent digital display device of genetic circuits with synthetic logic gates, which can both display and switch numbers. Similar to electronic circuits, logic regulation operation in cells integrates the extracellular and intracellular signals. ''
+
padding: 0;
-
|[[Image:XMU-China_team.png|right|frame|Your team picture]]
+
list-style-type: none;
-
|-
+
font-size: 100%;
-
|
+
cursor: default;
-
|<!-- *** align="center"|[[Team:XMU-China | Team XMU-China]]*** -->
+
width: auto;
 +
}
 +
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
 +
ul.MenuBarActive
 +
{
 +
z-index: 1000;
 +
}
 +
/* Menu item containers, position children relative to this container and are a fixed width */
 +
ul.MenuBarHorizontal li
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
 +
position: relative;
 +
text-align: left;
 +
cursor: pointer;
 +
width: 8em;
 +
float: left;
 +
}
 +
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
 +
ul.MenuBarHorizontal li ul
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
 +
z-index: 1;
 +
cursor: default;
 +
width: 8.2em;
 +
position: absolute;
 +
left: -1000em;
 +
}
 +
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
 +
ul.MenuBarHorizontal li ul.MenuBarSubmenuVisible
 +
{
 +
left: auto;
 +
}
 +
/* Menu item containers are same fixed width as parent */
 +
ul.MenuBarHorizontal li ul li
 +
{
 +
width: 8.2em;
 +
}
 +
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
 +
ul.MenuBarHorizontal li ul ul
 +
{
 +
position: absolute;
 +
margin: -5% 0 0 95%;
 +
}
 +
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
 +
ul.MenuBarHorizontal li ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
 +
{
 +
left: auto;
 +
top: 0;
 +
}
-
|}
+
/*******************************************************************************
-
<!--- The Mission, Experiments --->
+
DESIGN INFORMATION: describes color scheme, borders, fonts
-
<!--- {| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
+
*******************************************************************************/
-
!align="center"|[[Team:XMU-China|Home]]
+
 
-
!align="center"|[[Team:XMU-China/Team|Team]]
+
/* Submenu containers have borders on all sides */
-
!align="center"|[https://igem.org/Team.cgi?year=2012&team_name=XMU-China Official Team Profile]
+
ul.MenuBarHorizontal li ul
-
!align="center"|[[Team:XMU-China/Project|Project]]
+
{
-
!align="center"|[[Team:XMU-China/Parts|Parts Submitted to the Registry]]
+
border: 1px solid #CCC;
-
!align="center"|[[Team:XMU-China/Modeling|Modeling]]
+
}
-
!align="center"|[[Team:XMU-China/Notebook|Notebook]]
+
/* Menu items are a light gray block with padding and no text decoration */
-
!align="center"|[[Team:XMU-China/Safety|Safety]]
+
ul.MenuBarHorizontal a
-
!align="center"|[[Team:XMU-China/Attributions|Attributions]]
+
{
-
|}
+
display: block;
-
--->
+
cursor: pointer;
 +
background-color: #EEE;
 +
padding: 0.5em 0.75em;
 +
color: #333;
 +
text-decoration: none;
 +
}
 +
/* Menu items that have mouse over or focus have a blue background and white text */
 +
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
 +
{
 +
background-color: #33C;
 +
color: #FFF;
 +
}
 +
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
 +
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
 +
{
 +
background-color: #33C;
 +
color: #FFF;
 +
}
 +
 
 +
/*******************************************************************************
 +
 
 +
SUBMENU INDICATION: styles if there is a submenu under a given menu item
 +
 
 +
*******************************************************************************/
 +
 
 +
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
 +
ul.MenuBarHorizontal a.MenuBarItemSubmenu
 +
{
 +
background-image: url(SpryMenuBarDown.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
 +
ul.MenuBarHorizontal li ul a.MenuBarItemSubmenu
 +
{
 +
background-image: url(SpryMenuBarRight.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
 +
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
 +
{
 +
background-image: url(SpryMenuBarDownHover.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
 +
ul.MenuBarHorizontal li ul a.MenuBarItemSubmenuHover
 +
{
 +
background-image: url(SpryMenuBarRightHover.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
 +
 
 +
/*******************************************************************************
 +
 
 +
BROWSER HACKS: the hacks below should not be changed unless you are an expert
 +
 
 +
*******************************************************************************/
 +
 
 +
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
 +
ul.MenuBarHorizontal iframe
 +
{
 +
position: absolute;
 +
z-index: 1010;
 +
filter:alpha(opacity:0.1);
 +
}
 +
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
 +
@media screen, projection
 +
{
 +
ul.MenuBarHorizontal li.MenuBarItemIE
 +
{
 +
display: inline;
 +
f\loat: left;
 +
background: #FFF;
 +
}
 +
}
 +
</style>
 +
</html>

Latest revision as of 04:55, 6 August 2012

Retrieved from "http://2012.igem.org/Team:XMU-China/CSS/SpryMenuBarHorizontal/css"