Team:XMU-China/CSS/SpryMenuBarHorizontal/css

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
-
https://2012.igem.org/Team:XMU-China/Team/Team members
+
@charset "UTF-8";
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
-
<head>
+
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
-
<title>无标题文档</title>
+
-
<style type="text/css">
+
-
#leftbar {
+
-
position:absolute;
+
-
width:181px;
+
-
height:115px;
+
-
z-index:1;
+
-
left: 100px;
+
-
top: 55px;
+
-
}
+
-
#navigbar {
+
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
-
position:absolute;
+
-
width:531px;
+
-
height:21px;
+
-
z-index:2;
+
-
left: 245px;
+
-
top: 55px;
+
 +
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 +
 +
/*******************************************************************************
 +
 +
LAYOUT INFORMATION: describes box model, positioning, z-order
 +
 +
*******************************************************************************/
 +
 +
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
 +
ul.MenuBarHorizontal
 +
{
 +
margin: 0;
 +
padding: 0;
 +
list-style-type: none;
 +
font-size: 100%;
 +
cursor: default;
 +
width: auto;
}
}
-
#photo {
+
/* 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 */
-
position:absolute;
+
ul.MenuBarActive
-
width:531px;
+
{
-
height:100px;
+
z-index: 1000;
-
z-index:3;
+
-
left:245px;
+
-
top:80px;
+
}
}
-
#description {
+
/* Menu item containers, position children relative to this container and are a fixed width */
-
position:absolute;
+
ul.MenuBarHorizontal li
-
width:471px;
+
{
-
height:400px;
+
margin: 0;
-
z-index:3;
+
padding: 0;
-
left:245px;
+
list-style-type: none;
-
top:180px;
+
font-size: 100%;
-
color:#567788;
+
position: relative;
-
padding:30px;
+
text-align: left;
-
padding-top:0;
+
cursor: pointer;
-
margin:auto;
+
width: 8em;
-
    text-align:justify;
+
float: left;
-
    overflow:scroll;
+
}
}
-
#schoolbadge {
+
/* 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) */
-
position:absolute;
+
ul.MenuBarHorizontal ul
-
width:250px;
+
{
-
height:52px;
+
margin: 0;
-
z-index:4;
+
padding: 0;
-
left:70px;
+
list-style-type: none;
-
top:3px;
+
font-size: 100%;
-
padding-left:20px;
+
z-index: 1;
-
font-size:30px;
+
cursor: default;
-
color: #006dab;
+
width: 8.2em;
-
font-family:Tahoma, Geneva, sans-serif;
+
position: absolute;
-
text-align:center;
+
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 ul.MenuBarSubmenuVisible
 +
{
 +
left: auto;
 +
}
 +
/* Menu item containers are same fixed width as parent */
 +
ul.MenuBarHorizontal ul li
 +
{
 +
width: 8.2em;
 +
}
 +
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
 +
ul.MenuBarHorizontal 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 ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
 +
{
 +
left: auto;
 +
top: 0;
 +
}
 +
 
 +
/*******************************************************************************
 +
 
 +
DESIGN INFORMATION: describes color scheme, borders, fonts
 +
 
 +
*******************************************************************************/
 +
/* Submenu containers have borders on all sides */
 +
ul.MenuBarHorizontal ul
 +
{
 +
border: 1px solid #CCC;
}
}
-
#leftbar table {
+
/* Menu items are a light gray block with padding and no text decoration */
-
color: #000;
+
ul.MenuBarHorizontal a
 +
{
 +
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;
}
}
-
</style>
 
-
</head>
 
-
<body>
+
/*******************************************************************************
-
<div id="leftbar" >
+
-
  <table border="0" cellspacing="0" cellpadding="0" background="https://static.igem.org/mediawiki/2012/a/a2/Left-navigbar.png" >
+
-
    <tr>
+
-
      <td height="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Project description</td>
+
-
    </tr>
+
-
    <tr>
+
-
      <td height="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Main results</td>
+
-
    </tr>
+
-
    <tr>
+
-
      <td height="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Data</td>
+
-
    </tr>
+
-
    <tr>
+
-
      <td height="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Protocals</td>
+
-
    </tr>
+
-
    <tr>
+
-
      <td height="22">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Team members</td>
+
-
    </tr>
+
-
    <tr>
+
-
      <td><img src="https://static.igem.org/mediawiki/2012/a/a5/Leftbar.png" width="145" /></td>
+
-
    </tr>
+
-
  </table>
+
-
</div>
+
 +
SUBMENU INDICATION: styles if there is a submenu under a given menu item
-
<div id="schoolbadge"><img src="
+
*******************************************************************************/
-
https://static.igem.org/mediawiki/2012/6/67/Schoolbadge.gif" width="50" height="50" /> XMU-China</div>
+
-
<p>&nbsp;</p>
+
/* 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%) */
-
<div id="navigbar"><img src="
+
ul.MenuBarHorizontal a.MenuBarItemSubmenu
-
https://static.igem.org/mediawiki/2012/b/b0/Navigbar.png" width=100% /></div>
+
{
 +
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 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 ul a.MenuBarItemSubmenuHover
 +
{
 +
background-image: url(SpryMenuBarRightHover.gif);
 +
background-repeat: no-repeat;
 +
background-position: 95% 50%;
 +
}
-
<div id="photo"><img src="https://static.igem.org/mediawiki/2012/1/14/Photo.png" width="458" height="74" hspace="35" vspace="10"/></div>
+
/*******************************************************************************
-
<div id="description">
+
-
  <p>&nbsp;&nbsp;Description </p>
+
-
<p><img src="
+
-
https://static.igem.org/mediawiki/2012/5/5b/Line.png" width=100%  /></p>
+
-
<table width=100% border="0" cellspacing="0" cellpadding="0">
+
-
  <tr>
+
-
    <td valign="top"><img src="https://static.igem.org/mediawiki/2012/c/cd/Fig2.png" width="108" height="168" /></td>
+
-
    <td ><p>&nbsp;&nbsp;&nbsp;&nbsp;The aim of this study is to construct a fluorescent digital display device of genetic circuits with synthetic logic gates. The finished device will display and switch numbers. Similar to electronic circuits, logic regulation operation in cells integrates the extracellular and intracellular signals. We assemble several pairs of promoters and their activators (or repressors) into computing building block of the circuit: <I>P<font size="1px">BAD</font></I>-Arabinose,<I>P<font size="1px">cI</font></I>-CI, and <I>P<font size="1px">tetR</font></I>-TetR. These computation units act as genetic logic gates perform AND, OR and NOT gates function. In order to light up our digital numbers, we put Green Fluorescent Protein (GFP) in the downstream expression, which is ubiquitous in the field of biological signal protein. Considering that the common types of GFP usually tend to be very stable and hard to "quench", we choose unstable GFP to make our device reusable and convert in a fast speed. This unstable GFP is tagged with a C-terminal extension, which will be recognized and degraded by tail-specific proteases, leading to a short half-life and fast degradation of the protein. Degradation rate should be confined at a suitable range, otherwise the device would either have no light or take a long time to change numbers. </p>
+
-
 
+
-
  &nbsp;&nbsp;&nbsp;&nbsp;Moreover, we intend to develop a unique display device in such a way that each unit lights up one after another. To meet the challenge, we set out to engineer a series of cells with variable time-delayed expression characters under the inspiration of Feed Forward Loops (FFLs) in transcription network. As shown in Figure 1, both X and Y are transcriptional activators of coherent type 1 FFL with "AND-gate" function. When signal Sx appears, X becomes active and stimulates the downstream promoters, which are capable of inducing the production of Y and Z. Due to the "AND gate" function, Z starts to accumulate only when Y yields at a threshold. By controlling the Y production and the activation threshold for the <I>Z</I> promoter, we can alter the duration of time-delay in the expression of GFP. Lux system will still play an important role based on our project last year. Promoter <I>luxpR</I> with various modifications in threshold will be created by site-directed mutagenesis.
+
-
  </p></td>
+
-
  </tr>
+
-
</table>
+
-
</div>
+
BROWSER HACKS: the hacks below should not be changed unless you are an expert
-
</body>
+
 
-
</html>
+
*******************************************************************************/
 +
 
 +
/* 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;
 +
}
 +
}

Revision as of 18:03, 31 July 2012

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/******************************************************************************* 

LAYOUT INFORMATION: describes box model, positioning, z-order

*******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */ ul.MenuBarHorizontal { margin: 0; padding: 0; list-style-type: none; font-size: 100%; cursor: default; 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 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 ul.MenuBarSubmenuVisible { left: auto; } /* Menu item containers are same fixed width as parent */ ul.MenuBarHorizontal ul li { width: 8.2em; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */ ul.MenuBarHorizontal 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 ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible { left: auto; top: 0; }

/******************************************************************************* 

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Submenu containers have borders on all sides */ ul.MenuBarHorizontal ul { border: 1px solid #CCC; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarHorizontal a { 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 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 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; } }

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