Team:Grenoble/Design/style

From 2012.igem.org

(Difference between revisions)
m
 
(229 intermediate revisions not shown)
Line 1: Line 1:
 +
/******************************************************************************************/
 +
/* Thanks to iGEM team DTU 2011 for their helpful tutorial, for any information see here :*/
 +
/***********https://2011.igem.org/Team:DTU-Denmark/How_to_customize_an_iGEM_wiki************/
 +
/******************************************************************************************/
 +
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo  
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo  
{
{
Line 12: Line 17:
}  
}  
 +
 +
body
 +
{
 +
width: 100%;
 +
}
#top-section
#top-section
Line 127: Line 137:
{
{
margin-left: 150px;
margin-left: 150px;
-
/*margin-bottom: 150px;*/
 
}
}
Line 133: Line 142:
{
{
position: absolute;
position: absolute;
-
top: 0px;
+
top: 20px;
-
right: 0px;
+
right: 30px;
}
}
Line 167: Line 176:
ul.topnav li a {
ul.topnav li a {
padding: 10px 10px 10px 10px;
padding: 10px 10px 10px 10px;
-
        margin-right: 70px;
 
display: block;
display: block;
text-decoration: none;
text-decoration: none;
-
/*float: left;*/
 
         margin-left: 0px;
         margin-left: 0px;
}
}
Line 176: Line 183:
html ul.topnav li a: hover  
html ul.topnav li a: hover  
{
{
-
opacity: 0.7;
+
/*opacity: 0.7;*/
}
}
Line 198: Line 205:
/**************************************************************/
/**************************************************************/
 +
 +
#project_icon
 +
{
 +
position: absolute;
 +
top: 230px;
 +
left: 330px;
 +
}
 +
 +
#bio_icon
 +
{
 +
position: absolute;
 +
top: 50px;
 +
left: 65px;
 +
}
 +
 +
#model_icon
 +
{
 +
position: absolute;
 +
top: 5px;
 +
left: 380px;
 +
}
 +
 +
#safety_icon
 +
{
 +
position: absolute;
 +
top: 430px;
 +
right: 70px;
 +
}
 +
 +
#HP_icon
 +
{
 +
position: absolute;
 +
top: 120px;
 +
right: 80px;
 +
}
 +
 +
#parts_icon
 +
{
 +
position: absolute;
 +
top: 470px;
 +
left: 50px;
 +
}
 +
 +
#team_icon
 +
{
 +
position: absolute;
 +
top: 520px;
 +
left: 380px;
 +
}
 +
 +
#Gre_icon
 +
{
 +
position: absolute;
 +
top: 300px;
 +
left: 935px;
 +
}
ul.topnav li[id="model_icon"] ul.subnav li:hover
ul.topnav li[id="model_icon"] ul.subnav li:hover
{
{
-
background-color: #e0b11a;
+
background-color: #ffc000;
-
opacity: 0.74;
+
}
}
ul.topnav li[id="project_icon"] ul.subnav li:hover
ul.topnav li[id="project_icon"] ul.subnav li:hover
{
{
-
background-color: #9e2d2a;
+
background-color: #b80100;
-
opacity: 0.74;
+
}
}
ul.topnav li[id="bio_icon"] ul.subnav li:hover
ul.topnav li[id="bio_icon"] ul.subnav li:hover
{
{
-
background-color: #2c95b0;
+
background-color: #30849b;
-
opacity: 0.74;
+
}
}
ul.topnav li[id="safety_icon"] ul.subnav li:hover
ul.topnav li[id="safety_icon"] ul.subnav li:hover
{
{
-
background-color: #d47522;
+
background-color: #e46c0a;
-
opacity: 0.74;
+
}
}
-
ul.topnav ul a:hover
+
ul.topnav li[id="team_icon"] ul.subnav li:hover
{
{
-
text-decoration: none;
+
background-color: #007f00;
}
}
 +
 +
ul.topnav li[id="HP_icon"] ul.subnav li:hover
 +
{
 +
background-color: #1c477b;
 +
}
 +
 +
ul.topnav li[id="Gre_icon"] ul.subnav li:hover
 +
{
 +
background-color: white;
 +
}
 +
 +
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="safety_icon"] ul.subnav li a:hover, ul.topnav li[id="project_icon"] ul.subnav li a:hover
 +
{
 +
font-weight: bold;
 +
color: white;
 +
}
 +
 +
ul.topnav li[id="Gre_icon"] ul.subnav li a:hover
 +
{
 +
font-weight: bold;
 +
}
 +
 +
/*ul.topnav ul a:hover
 +
{
 +
text-decoration: none;
 +
}*/
ul.topnav li
ul.topnav li
Line 244: Line 331:
position: absolute;
position: absolute;
left: 70px;  
left: 70px;  
-
top: 75px;
+
top: 65px;
background: #e6e6e6;
background: #e6e6e6;
display: none;
display: none;
float: left;
float: left;
 +
border-radius: 10px;
 +
}
 +
 +
ul.topnav li[id="Gre_icon"] ul.subnav
 +
{
 +
position: absolute;
 +
left: 0px;
 +
top: 48px;
 +
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
ul.topnav li ul.subnav li
{
{
-
border-top: 1px solid;
 
border-radius: 10px;
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
ul.topnav li ul.subnav li a
Line 262: Line 382:
}
}
-
ul.topnav li ul.subnav li: hover
+
ul.topnav li ul.subnav, ul.topnav li ul.subnav li  
{
{
 +
width: 175px;
}
}
-
ul.topnav li ul.subnav li:last-child
+
/*Placement du lien vers la boite mail*/
 +
#mail
{
{
-
border-bottom: 1px solid;
+
position: absolute;
 +
top: 570px;
 +
right: 30px;
}
}
-
ul.topnav li ul.subnav, ul.topnav li ul.subnav li
+
#igem
{
{
-
width: 160px;
+
position: absolute;
 +
top: 20px;
 +
left: 20px;
 +
}
 +
 
 +
#footer
 +
{
 +
position: absolute;
 +
top: 820px;
 +
left: -100px;
 +
width: 1200px;
 +
height: 210px;
 +
}
 +
 
 +
td
 +
{
 +
padding: 0px 50px 0px 0px;
 +
}
 +
 
 +
#thanks
 +
{
 +
background: white;
 +
position: absolute;
 +
bottom: 10px;
 +
left: 80px;
 +
padding: 10px 10px 10px 10px;
 +
border-radius: 10px;
 +
font-size: 1.2em;
 +
width: 900px;
}
}

Latest revision as of 20:53, 26 September 2012

/******************************************************************************************/ /* Thanks to iGEM team DTU 2011 for their helpful tutorial, for any information see here :*/ /***********https://2011.igem.org/Team:DTU-Denmark/How_to_customize_an_iGEM_wiki************/ /******************************************************************************************/

  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo

{ 

   display:none;
   background-color: none;

}

body, html { 

margin: 0;
padding: 0; 
height: 100%;

}

body { width: 100%; }

  1. top-section

{ 

   border: none;
   height: 0px;

}

  1. content

{ 

   border: none;
   background: none;

}

  1. menubar

{ 

   width: auto;

}

body { 

   margin: 0 0 0 0;
   padding: 0;

}

  1. top-section

{ 

   width: 965px;
   height: 0;
   margin: 0 auto;
   padding: 0;
   border: none;

}

  1. menubar

{ 

   font-size: 65%;
   top: 0px;

}

.left-menu:hover { 

   background-color: transparent;

}

  1. menubar li a

{ 

   background-color: transparent;

}

  1. menubar:hover

{ 

   color: white;

}

  1. menubar li a

{ 

   color: transparent;

}

  1. menubar:hover li a

{ 

   color: white;

}

.letf-menu: hover { background-color: transparent; }

.right-box { width: 0px; }

body { }

  1. page

{ position: absolute; left: -150px; background-image: url('https://static.igem.org/mediawiki/2012/d/da/Fond.png'); width: 1280px; height: 1024px; }

.logo1 { position: absolute; top: 0px; right: 0px; }

section { vertical-align: top; }

article { 

    font-size: 1.1em;
    background-color: white;
    opacity: 0.8;
    width: 790px;
    height: 800px;
    padding-left: 10px;
    margin-top: 150px;
    margin-left: 20px;
    overflow: auto;

}

aside { margin-left: 150px; }

.logo1 { position: absolute; top: 20px; right: 30px; }

article, aside { display: inline-block; }

h1 { border: none; text-align: center; }

h4 { text-align: center; }

  1. title

{ position: absolute; top: 300px; left: 0px; }

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. 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. safety_icon

{ position: absolute; top: 430px; right: 70px; }

  1. HP_icon

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

  1. parts_icon

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

  1. team_icon

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

  1. Gre_icon

{ position: absolute; top: 300px; left: 935px; }

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="safety_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="Gre_icon"] ul.subnav li:hover { background-color: white; }

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="safety_icon"] ul.subnav li a:hover, ul.topnav li[id="project_icon"] ul.subnav li a:hover { font-weight: bold; color: white; }

ul.topnav li[id="Gre_icon"] ul.subnav li a:hover { font-weight: bold; }

/*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="Gre_icon"] ul.subnav { position: absolute; left: 0px; top: 48px; 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; }

/*Placement du lien vers la boite mail*/

  1. mail

{ position: absolute; top: 570px; right: 30px; }

  1. igem

{ position: absolute; top: 20px; left: 20px; }

  1. footer

{ position: absolute; top: 820px; left: -100px; width: 1200px; height: 210px; }

td { padding: 0px 50px 0px 0px; }

  1. thanks

{ background: white; position: absolute; bottom: 10px; left: 80px; padding: 10px 10px 10px 10px; border-radius: 10px; font-size: 1.2em; width: 900px; }

Retrieved from "http://2012.igem.org/Team:Grenoble/Design/style"