Team:Grenoble-EMSE-LSU/Design/style

From 2013.igem.org

(Difference between revisions)
(Created page with "li.menu1 > a, li.menu1 > span { border-bottom: 1px solid #660066;} li.menu2 > a, li.menu2 > span { border-bottom: 1px solid #990099;} li.menu3 > a, li.menu3 > span { ...")
Line 1: Line 1:
-
li.menu1 > a, li.menu1 > span {
+
ul.topnav li a
-
    border-bottom: 1px solid #660066;}
+
{
-
li.menu2 > a, li.menu2 > span {
+
display: inline-block;
-
    border-bottom: 1px solid #990099;}
+
}
-
li.menu3 > a, li.menu3 > span {
+
-
    border-bottom: 1px solid #3366CC;}
+
-
li.menu4 > a, li.menu4 > span {
+
-
    border-bottom: 1px solid #33CCFF;}
+
-
li.menu5 > a, li.menu5 > span {
+
-
    border-bottom: 1px solid #99CC33;}
+
-
li.menu6 > a, li.menu6 > span {
+
-
    border-bottom: 1px solid #FFCC00;}
+
-
.page-Team_Grenoble-EMSE-LSU li.home a,
+
ul.topnav li a {
 +
padding: 10px 10px 10px 10px;
 +
display: block;
 +
text-decoration: none;
 +
        margin-left: 0px;
 +
}
-
.page-Team_Grenoble-EMSE-LSU_Project li.project a,
+
html ul.topnav li a: hover
-
.page-Team_Grenoble-EMSE-LSU_Project_Idea li.project a,
+
{
-
.page-Team_Grenoble-EMSE-LSU_Project_Results li.project a,
+
/*opacity: 0.7;*/
-
.page-Team_Grenoble-EMSE-LSU_Project_Attributions li.project a,
+
}
-
.page-Team_Grenoble-EMSE-LSU_Biology li.biology a,
+
ul.topnav ul, ul.topnav ul li
-
.page-Team_Grenoble-EMSE-LSU_Biology_Network li.biology a,
+
{
-
.page-Team_Grenoble-EMSE-LSU_Biology_KillerRed li.biology a,
+
list-style: none;
-
.page-Team_Grenoble-EMSE-LSU_Biology_Instrumentation li.biology a,
+
}
-
.page-Team_Grenoble-EMSE-LSU_Biology_Protocols li.biology a,
+
-
.page-Team_Grenoble-EMSE-LSU_Biology_Notebook li.biology a,
+
-
.page-Team_Grenoble-EMSE-LSU_Modeling li.modeling a,
+
ul.topnav ul, ul.topnav ul li:visited
-
.page-Team_Grenoble-EMSE-LSU_Modeling_Network li.modeling a,
+
{
-
.page-Team_Grenoble-EMSE-LSU_Modeling_Network_Promoter li.modeling a,
+
text-decoration: none;
-
.page-Team_Grenoble-EMSE-LSU_Modeling_Network_KillerRed li.modeling a,
+
style-effect: none;
-
.page-Team_Grenoble-EMSE-LSU_Modeling_Arduino li.modeling a,
+
}
-
.page-Team_Grenoble-EMSE-LSU_Modeling_Arduino_Presentation li.modeling a,
+
-
.page-Team_Grenoble-EMSE-LSU_Modeling_Arduino_Device li.modeling a,
+
-
.page-Team_Grenoble-EMSE-LSU_Modeling_Notebook li.modeling a,
+
-
.page-Team_Grenoble-EMSE-LSU_HumanPractice li.humanpractice a,
+
/**************************************************************/
-
.page-Team_Grenoble-EMSE-LSU_HumanPractice_Overview li.humanpractice a,
+
/* À réutiliser pour la barre de menu en haut des autres pages*/
-
.page-Team_Grenoble-EMSE-LSU_HumanPractice_FirstIdea li.humanpractice a,
+
/*ul.topnav ul a
-
.page-Team_Grenoble-EMSE-LSU_HumanPractice_SecondIdea li.humanpractice a,
+
{
 +
opacity: 0.6;
 +
}*/
 +
/**************************************************************/
-
.page-Team_Grenoble-EMSE-LSU_Team li.team a,
 
-
.page-Team_Grenoble-EMSE-LSU_Team_Students li.team a,
 
-
.page-Team_Grenoble-EMSE-LSU_Team_Advisors li.team a,
 
-
.page-Team_Grenoble-EMSE-LSU_Team_Teachers li.team a,
 
-
ul.top_menu > li > a:hover {
+
#home_icon
-
/*modeling: url(https://static.igem.org/mediawiki/2011/f/f5/Topnav_hover.gif) no-repeat center -1px;*/
+
{
-
        padding-bottom: 1px;
+
position: absolute;
-
        border-bottom-width: 5px;}
+
top: 200px;
 +
left: 236px;
 +
}
-
#menu,.menu {
+
#project_icon
-
    height: 35px;}
+
{
-
.menu {
+
position: absolute;
-
    modeling: url("https://static.igem.org/mediawiki/2011/1/1b/Topnav_bg.gif") repeat-x scroll 0 -1px #222222;
+
top: 230px;
-
    z-index: 1;
+
left: 330px;
-
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+
-
    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); /* for the Safari browser */
+
-
    position: relative;
+
-
    border-bottom: 1px solid #000000;}
+
-
.stickToTop {
+
-
    position: fixed;
+
-
    top:0;
+
-
    width:100%;}
+
-
ul.top_menu {
+
-
list-style: none;
+
-
padding: 0;
+
-
margin: 0;
+
-
float: left;
+
-
width: 100%;
+
-
font-size: 15px;
+
}
}
-
ul.top_menu li {
+
 
-
float: left;
+
#bio_icon
-
margin: 0;
+
{
-
padding: 0;
+
position: absolute;
-
position: relative; /*--Declare X and Y axis base for sub menu--*/
+
top: 50px;
 +
left: 65px;
}
}
-
ul.top_menu li a {
+
 
-
padding: 6px 20px 5px 20px;
+
#model_icon
-
color: #fff;
+
{
-
display: block;
+
position: absolute;
-
text-decoration: none;
+
top: 5px;
-
float: left;
+
left: 380px;
}
}
-
ul.top_menu > li > a {
+
 
-
    height: 23px;
+
#HP_icon
-
    overflow: hidden;}
+
{
-
ul.top_menu li:first-child a{
+
position: absolute;
-
padding-left: 0;
+
top: 120px;
 +
right: 80px;
}
}
-
ul.top_menu li span { /*--Drop down trigger styles--*/
+
 
-
/*width: 17px;*/
+
#team_icon
-
/*height: 34px;*/
+
{
-
/*float: left;*/
+
position: absolute;
-
/*modeling: url(https://static.igem.org/mediawiki/2011/4/45/Subnav_btn.gif) no-repeat center top;*/
+
top: 520px;
-
        color: #CCCCCC;
+
left: 380px;
}
}
-
ul.top_menu li span.subhover {modeling-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
+
 
-
ul.top_menu li ul.sub_menu {
+
ul.topnav li[id="model_icon"] ul.subnav li:hover
-
    z-index: 1; //Stay on top of slider
+
{
-
list-style: none;
+
background-color: #ffc000;
-
position: absolute; /*--Important - Keeps sub_menu from affecting main menu flow--*/
+
-
left: 0; top: 35px;
+
-
modeling: #333;
+
-
margin: 0; padding: 0;
+
-
display: none;
+
-
float: left;
+
-
border: 1px solid #111;
+
-
        border-radius: 0 0 5px 5px;
+
}
}
-
ul.top_menu li ul.sub_menu li {
+
 
-
margin: 0; padding: 0;
+
ul.topnav li[id="project_icon"] ul.subnav li:hover
-
border-top: 1px solid #252525; /*--Create bevel effect--*/
+
{
-
border-bottom: 1px solid #444; /*--Create bevel effect--*/
+
background-color: #b80100;
-
clear: both;
+
-
        list-style: none outside none;
+
}
}
-
ul.top_menu li ul.sub_menu, ul.top_menu li ul.sub_menu li {
+
 
-
        width: 160px;
+
ul.topnav li[id="bio_icon"] ul.subnav li:hover
 +
{
 +
background-color: #30849b;
}
}
-
ul.top_menu li ul.sub_menu li:last-child{
+
 
-
        border-radius: 0 0 5px 5px;
+
ul.topnav li[id="home_icon"] ul.subnav li:hover
 +
{
 +
background-color: #e46c0a;
}
}
-
html ul.top_menu li ul.sub_menu li a {
+
 
-
float: left;
+
ul.topnav li[id="team_icon"] ul.subnav li:hover
-
/*modeling: #333 url(https://static.igem.org/mediawiki/2011/4/4b/Dropdown_linkbg.gif) no-repeat 10px center;*/
+
{
-
    padding-left: 10px;
+
background-color: #007f00;
-
    padding-right: 10px;
+
-
    width: 140px;
+
}
}
-
html ul.top_menu li ul.sub_menu li a:last-child{
+
 
-
        border-radius: 0 0 5px 5px;
+
ul.topnav li[id="HP_icon"] ul.subnav li:hover
 +
{
 +
background-color: #1c477b;
}
}
-
html ul.top_menu li ul.sub_menu li a:hover { /*--Hover effect for sub_menu links--*/
+
 
-
modeling: #222 /*url(https://static.igem.org/mediawiki/2011/4/4b/Dropdown_linkbg.gif) no-repeat 10px center*/;
+
 
 +
ul.topnav li[id="HP_icon"] ul.subnav li a:hover, ul.topnav li[id="bio_icon"] ul.subnav li a:hover,
 +
ul.topnav li[id="model_icon"] ul.subnav li a:hover, ul.topnav li[id="team_icon"] ul.subnav li a:hover,
 +
ul.topnav li[id="home_icon"] ul.subnav li a:hover, ul.topnav li[id="project_icon"] ul.subnav li a:hover
 +
{
 +
font-weight: bold;
 +
color: white;
 +
}
 +
 
 +
/*ul.topnav ul a:hover
 +
{
 +
text-decoration: none;
 +
}*/
 +
 
 +
ul.topnav li
 +
{
 +
float: left;
 +
position: relative;
 +
}
 +
 
 +
ul.topnav > li > a
 +
{
 +
height: 28px;
 +
overflow: hidden;
 +
}
 +
 
 +
ul.topnav li ul.subnav
 +
{
 +
position: absolute;
 +
left: 70px;
 +
top: 65px;
 +
background: #e6e6e6;
 +
display: none;
 +
float: left;
 +
border-radius: 10px;
 +
}
 +
 
 +
ul.topnav li[id="project_icon"] ul.subnav
 +
{
 +
position: absolute;
 +
left: 150px;
 +
top: 95px;
 +
background: #e6e6e6;
 +
display: none;
 +
float: left;
 +
border-radius: 10px;
 +
}
 +
 
 +
ul.topnav li ul.subnav li
 +
{
 +
border-radius: 10px;
 +
}
 +
 
 +
/*ul.topnav li ul.subnav li:first-child
 +
{
 +
border-radius: 10px;
 +
}
 +
 
 +
ul.topnav li ul.subnav li:last-child
 +
{
 +
border-radius: 10px;
 +
}*/
 +
 
 +
 
 +
ul.topnav li ul.subnav li a
 +
{
 +
color: black;
 +
/*text-align: justify;*/
 +
}
 +
 
 +
ul.topnav li ul.subnav, ul.topnav li ul.subnav li
 +
{
 +
width: 175px;
}
}

Revision as of 13:19, 13 June 2013

ul.topnav li a { display: inline-block; }

ul.topnav li a { padding: 10px 10px 10px 10px; display: block; text-decoration: none; 

       margin-left: 0px;

}

html ul.topnav li a: hover { /*opacity: 0.7;*/ }

ul.topnav ul, ul.topnav ul li { list-style: none; }

ul.topnav ul, ul.topnav ul li:visited { text-decoration: none; style-effect: none; }

/**************************************************************/ /* À réutiliser pour la barre de menu en haut des autres pages*/ /*ul.topnav ul a { opacity: 0.6; }*/ /**************************************************************/


  1. home_icon

{ position: absolute; top: 200px; left: 236px; }

  1. project_icon

{ position: absolute; top: 230px; left: 330px; }

  1. bio_icon

{ position: absolute; top: 50px; left: 65px; }

  1. model_icon

{ position: absolute; top: 5px; left: 380px; }

  1. HP_icon

{ position: absolute; top: 120px; right: 80px; }

  1. team_icon

{ position: absolute; top: 520px; left: 380px; }

ul.topnav li[id="model_icon"] ul.subnav li:hover { background-color: #ffc000; }

ul.topnav li[id="project_icon"] ul.subnav li:hover { background-color: #b80100; }

ul.topnav li[id="bio_icon"] ul.subnav li:hover { background-color: #30849b; }

ul.topnav li[id="home_icon"] ul.subnav li:hover { background-color: #e46c0a; }

ul.topnav li[id="team_icon"] ul.subnav li:hover { background-color: #007f00; }

ul.topnav li[id="HP_icon"] ul.subnav li:hover { background-color: #1c477b; }


ul.topnav li[id="HP_icon"] ul.subnav li a:hover, ul.topnav li[id="bio_icon"] ul.subnav li a:hover, ul.topnav li[id="model_icon"] ul.subnav li a:hover, ul.topnav li[id="team_icon"] ul.subnav li a:hover, ul.topnav li[id="home_icon"] ul.subnav li a:hover, ul.topnav li[id="project_icon"] ul.subnav li a:hover { font-weight: bold; color: white; }

/*ul.topnav ul a:hover { text-decoration: none; }*/

ul.topnav li { float: left; position: relative; }

ul.topnav > li > a { height: 28px; overflow: hidden; }

ul.topnav li ul.subnav { position: absolute; left: 70px; top: 65px; background: #e6e6e6; display: none; float: left; border-radius: 10px; }

ul.topnav li[id="project_icon"] ul.subnav { position: absolute; left: 150px; top: 95px; background: #e6e6e6; display: none; float: left; border-radius: 10px; }

ul.topnav li ul.subnav li { border-radius: 10px; }

/*ul.topnav li ul.subnav li:first-child { border-radius: 10px; }

ul.topnav li ul.subnav li:last-child { border-radius: 10px; }*/


ul.topnav li ul.subnav li a { color: black; /*text-align: justify;*/ }

ul.topnav li ul.subnav, ul.topnav li ul.subnav li { width: 175px; }

Retrieved from "http://2013.igem.org/Team:Grenoble-EMSE-LSU/Design/style"