Team:Grenoble/Design/style

From 2012.igem.org

(Difference between revisions)
 
(444 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 5: Line 10:
}
}
-
#column-one
+
body, html {
 +
 
 +
margin: 0;
 +
padding: 0;
 +
height: 100%;
 +
 
 +
}
 +
 
 +
body
{
{
-
padding: 0 0 0 0;
+
width: 100%;
}
}
Line 29: Line 42:
body  
body  
{
{
-
     margin: 10px 0 0 0;
+
     margin: 0 0 0 0;
     padding: 0;
     padding: 0;
}
}
Line 80: Line 93:
.right-box
.right-box
{
{
-
width: 20px;
+
width: 0px;
}
}
body
body
{
{
-
/*background-image: url("https://static.igem.org/mediawiki/2012/d/da/Fond.png");*/
+
}
 +
 
 +
#page
 +
{
 +
position: absolute;
 +
left: -150px;
 +
background-image: url('https://static.igem.org/mediawiki/2012/d/da/Fond.png');
 +
width: 1280px;
 +
height: 1024px;
}
}
Line 95: Line 116:
}
}
-
.logo2
+
section
{
{
-
position: absolute;
+
vertical-align: top;
-
top: -130px;
+
-
left: 160px;
+
}
}
article
article
{
{
 +
    font-size: 1.1em;
     background-color: white;
     background-color: white;
-
     opacity: 0.6;
+
     opacity: 0.8;
     width: 790px;
     width: 790px;
-
     height: 650px;
+
     height: 800px;
     padding-left: 10px;
     padding-left: 10px;
-
     margin-top: 50px;
+
     margin-top: 150px;
-
     margin-left: 0px;
+
     margin-left: 20px;
     overflow: auto;
     overflow: auto;
}
}
Line 116: Line 136:
aside
aside
{
{
-
margin-bottom: 5px;
+
margin-left: 150px;
-
margin-left: 300px;
+
}
 +
 
 +
.logo1
 +
{
 +
position: absolute;
 +
top: 20px;
 +
right: 30px;
 +
}
 +
 
 +
article, aside
 +
{
 +
display: inline-block;
 +
}
 +
 
 +
h1
 +
{
 +
border: none;
 +
text-align: center;
 +
}
 +
 
 +
h4
 +
{
 +
text-align: center;
 +
}
 +
 
 +
#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;
 +
}*/
 +
/**************************************************************/
 +
 
 +
 
 +
#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
 +
{
 +
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*/
 +
#mail
 +
{
 +
position: absolute;
 +
top: 570px;
 +
right: 30px;
 +
}
 +
 
 +
#igem
 +
{
 +
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"