Team:Grenoble/Templates/Team:Grenoble Rawhide

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:Grenoble/Templates/Css.css}}
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 +
<head>
 +
<style>
 +
body {
-
<body>
+
margin:0;
-
+
-
  <div id="dolphincontainer">
+
padding:0;
-
    <div id="dolphinnav">
+
-
<ul>
+
width:100%;
-
+
-
<li ><a href="/Team:Grenoble" class="level1">Home</a>
+
-
</li>
+
-
<li ><a href="/Team:Grenoble/The_Team/" class="level1">The Team</a></li>
+
-
<li ><a href="/Team:Grenoble/Grenoble" class="level1">Our Project</a>
+
-
  <ul>
+
-
    <li><a href="/Team:Grenoble/Safety" class="level2">Overview</a><p><span>|</span></p></li>
+
-
    <li><a href="/Team:Grenoble/Safety" class="level2">Genetical Network</a><p><span>|</span></p></li>
+
-
    <li><a href="/Team:Grenoble/Safety" class="level2">Genetical Network 2</a><p><span>|</span></p></li>
+
-
  </ul>
+
-
</li>
+
-
<li ><a href="/Team:Grenoble/Notebook" class="level1">Notebook</a></li>
+
-
<li ><a href="/Team:Grenoble/Safety" class="level1">Safety</a></li>
+
-
<li ><a href="/Team:Grenoble/HumanPractice" class="level1">Human Practice</a></li>
+
-
<li ><a href="/Team:Grenoble/Sponsors" class="level1">Sponsors</a></li>
+
-
</ul>
+
-
    </div>
+
background:#fcf6ee;
-
  </div>
+
 +
}
-
<!-- Au-dessus : le code pour le header et la bannière + menu -->
+
html {
-
<!-- En-dessous : Le sidebar menu, à droite -->
+
padding:0;
-
<div class="body" id="arf" >
+
margin:0;
-
<div class="right">
+
}
-
+
-
<h3><span class="vert">TEAM:</span>Grenoble</h3>
+
-
<ul>
+
-
+
-
<li><a href="/Team:Grenoble">Home</a>
+
-
</li>
+
-
<li><a href="/Team:Grenoble/The_Team/">The Team</a></li>
+
-
<li><a href="/Team:Grenoble/Grenoble">Our Project</a>
+
-
</li>
+
-
<li><a href="/Team:Grenoble/Notebook">Notebook</a></li>
+
-
<li><a href="/Team:Grenoble/Safety">Safety</a></li>
+
-
<li><a href="/Team:Grenoble/HumanPractice">Human Practice</a></li>
+
-
<li><a href="/Team:Grenoble/Sponsors">Sponsors</a></li>
+
-
</ul>
+
 +
/* utilisé dans la banière */
 +
img.blabla  {
-
<h3><span class="vert">Our</span> Sponsors</h3>
+
width:100%;
-
<a href="https://2011.igem.org/Team:Grenoble/Sponsors"><img src="https://static.igem.org/mediawiki/2011/c/c8/Logosright.png"\></a><br/>
+
-
<h3><span class="vert">Event</span> Calendar</h3>
+
-
<p>
+
-
<ul>
+
-
<li>2nd September:</li>
+
-
<a href="http://www.minatec.com/midis">Conference Midi Minatec,</a><br />
+
-
3 parvis Louis Néel<br />
+
-
38 000 GRENOBLE
+
-
</ul>
+
-
</p>
+
-
+
-
<h3><span class="vert">Contact</span> Us</h3>
+
height:auto;
-
<p>geoffrey.bouchage<br />@phelma.grenoble-inp.fr</p>
+
-
</div>
+
}
-
<!-- Le corps du site, ce qui ne fera pas partie du template : -->
 
-
<!-- Javascript pour le menu dlphin et modifier l'image du haut -->
+
h1 {
-
<script type="text/javascript">
+
margin:0;
-
var s = document.getElementById('arf');
+
-
var w = screen.width;
+
-
//alert(screen.width);
+
-
//alert(s);
+
-
var r = (w/3097)*452 + 192;
+
-
//alert(r);
+
-
var str = String(r)+"px";
+
-
//alert(str);
+
-
s.style.top = str;
+
-
+
-
</script>
+
-
<script type="text/javascript">
+
-
var hones = document.getElementsByTagName('h1');
+
padding:30px 0 30px 32px;
-
hones[0].innerHTML = '<span>Team:</span>Grenoble v0.2<br/><small>In Tartiflette we trust</small>';
+
-
</script>
+
color:#5c5c5c;
-
<script type="text/javascript">
+
-
document.getElementById('p-logo').innerHTML = '<a href=\"/Main_Page\" title=\"Main Page\">  <img class=\"blabla\" src=\'http://farm4.static.flickr.com/3067/3084131521_36c059f6f0_b.jpg\'> </a>'
+
font:bold 45px/1.1em Arial, Helvetica, sans-serif;
 +
text-transform:uppercase;
-
</script>
+
letter-spacing:-3px;
-
<script type="text/javascript">
+
}
-
sfHover = function() {
+
-
var sfEls = document.getElementById("dolphinnav").getElementsByTagName("li");
+
-
for (var i=0; i<sfEls.length; i++) {
+
h1 a, h1 a:hover {
-
sfEls[i].onmouseover=function() {
+
 
-
  for (var j=0; j<sfEls.length; j++) {
+
color:#5c5c5c;
-
sfEls[j].className=this.className.replace(new RegExp(" sfhover\\b"), "");
+
 
-
}
+
text-decoration:none;
-
  this.className+=" sfhover";
+
 
-
  //Did i mention that i hate javascript ?
+
}
-
}
+
 
-
}
+
h1 span {
 +
 
 +
font-weight:bold;
 +
 
 +
color:#8fc400;
 +
 
 +
}
 +
 
 +
/* in tartiflette we trust */
 +
h1 small {
 +
 
 +
font:normal 13px/1.2em Arial, Helvetica, sans-serif;
 +
 
 +
color:#888;
 +
 
 +
letter-spacing:normal;
 +
 
 +
}
 +
/* ---------------------- Dolphin nav ---------------------- */
 +
#dolphincontainer{
 +
    position:relative;
 +
    height:60px;
 +
    color:#000000;
 +
    background:#006c05;
 +
    width:100%;
 +
    font-family:Helvetica,Arial,Verdana,sans-serif;
 +
}
 +
 
 +
#dolphinnav{
 +
    position:relative;
 +
    height:33px;
 +
    font-size:12px;
 +
    text-transform:uppercase;
 +
    font-weight:bold;
 +
    background:#fff url(https://static.igem.org/mediawiki/2011/b/b7/Dolphin_bg.png) repeat-x bottom left;
 +
    padding:0 0 0 20px;
 +
}
 +
   
 +
#dolphinnav ul{
 +
    margin:0;
 +
    padding:0;
 +
    list-style:none;
 +
    width:auto;
 +
    float:left;
 +
}
 +
 
 +
#dolphinnav ul li{
 +
    display:block;
 +
    float:left;
 +
    margin:0 1px;
 +
}
 +
 
 +
#dolphinnav ul li span{
 +
 
 +
    color:#eaf8ea;
 +
    /*margin: 5px 10px 15px 5px;*/
 +
    height:33px;
 +
    font-style: bold;
 +
 
 +
}
 +
 
 +
#dolphinnav ul li a{
 +
    display:block;
 +
    float:left;
 +
    color:#eaf8ea;
 +
    text-decoration:none;
 +
    /*padding:12px 20px 0 20px;*/
 +
    height:33px;
 +
}
 +
 
 +
#dolphinnav ul li a.level1{
 +
 
 +
    padding:12px 20px 0 20px;
 +
   
 +
}
 +
 
 +
#dolphinnav ul li.sfhover ul li a.level2{
 +
   
 +
color:#eaf8ea;
 +
    margin: 5px 5px 15px 5px;
 +
 
 +
}
 +
 
 +
#dolphinnav ul li ul{
 +
    position: absolute;
 +
    left: -999em;
 +
}
 +
 
 +
 
 +
 
 +
/*#dolphinnav ul li a:hover{
 +
    color:#fff;
 +
    background:transparent url(images/dolphin_bg-OVER.png) repeat-x bottom left;
 +
}
 +
#dolphinnav ul li a:hover span{
 +
  display:block;
 +
  width:auto;
 +
  cursor:pointer;
 +
}*/
 +
#dolphinnav ul li.sfhover a.level1{
 +
    color:#fff;
 +
    padding:0 20px 0 20px;
 +
    background:#006c05 url(https://static.igem.org/mediawiki/2011/d/d4/Dolphin_left-ON.png) no-repeat top left;
 +
    line-height:275%;
 +
}
 +
 
 +
#dolphinnav ul li.sfhover a.level1 span{
 +
    display:block;
 +
    padding:0 20px 0 20px;
 +
    width:auto;
 +
    background:#006c05 url(https://static.igem.org/mediawiki/2011/b/b5/Dolphin_right-ON.png) no-repeat top right;
 +
    height:33px;
 +
}
 +
 
 +
#dolphinnav ul li.sfhover ul{
 +
 
 +
        left: 0;
 +
        min-height: 0;
 +
height: 23px;
 +
background:#006c05;
 +
background-image:none;
 +
margin: 33px 0 0 0 ;
 +
overflow: hidden;
 +
 
 +
}
 +
 
 +
 
 +
/* ---------------------- END Dolphin nav ---------------------- */
 +
/*en cas d'emmerde avec image flottante*/
 +
.clearboth {
 +
clear:both;
 +
}
 +
 
 +
.body {
 +
 
 +
margin:0;
 +
 
 +
padding:0;
 +
 
 +
}
 +
 
 +
.body h2 {
 +
 
 +
font:bold 24px Arial, Helvetica, sans-serif;
 +
 
 +
color:#323a3f;
 +
 
 +
padding:10px 5px;
 +
 
 +
margin:5px 2px 12px 0;
 +
 
 +
}
 +
 
 +
.body h1 {
 +
 
 +
font:bold 34px Arial, Helvetica, sans-serif;
 +
 
 +
color:#323a3f;
 +
 
 +
padding:10px 5px;
 +
 
 +
margin:5px 2px 12px 0;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
.body h3 {
 +
 
 +
font:bold 24px Arial, Helvetica, sans-serif;
 +
 
 +
color:#323a3f;
 +
 
 +
padding:10px 5px;
 +
 
 +
margin:5px 0 10px 0;
 +
 
 +
}
 +
 
 +
.body h3 span.vert{
 +
 
 +
color:#8fc400;
 +
 
 +
}
 +
 
 +
 
 +
 
 +
.body h2 span {
 +
 
 +
float:right;
 +
 
 +
color:#959595;
 +
 
 +
font:normal 12px Arial, Helvetica, sans-serif;
 +
 
 +
}
 +
 
 +
.body p {
 +
 
 +
font:normal 12px Arial, Helvetica, sans-serif;
 +
 
 +
color:#5f5f5f;
 +
 
 +
padding:5px;
 +
 
 +
margin:0;
 +
 
 +
line-height:1.8em;
 +
text-indent: 30px;
 +
}
}
-
if (window.addEventListener)
 
-
{
 
-
// Firefox/Chrome/Opera/Safari
 
-
window.addEventListener('load', sfHover, false);
 
 +
 +
 +
 +
 +
.body img {
 +
 +
clear:both;
 +
 +
padding:0;
 +
 +
}
}
-
else if (window.attachEvent)
+
 
-
{
+
/*exemple: photo memnbre équipe, c'est un flottant, utiliser .clearboth en cas de besoin*/
-
// IE
+
 
-
window.attachEvent('onload', sfHover);
+
.body img.icon {
 +
 
 +
 
 +
float:left;
 +
 
 +
margin: 15px 5px 2px 0;
 +
 
 +
width:80px;
 +
 
 +
height:auto;
}
}
-
</script>
+
/*
-
</body>
+
pour renbdre flottant une image qui n'est pas flottante si elle n'est pas un icon car .body img luiu met le clearboth du coup elle est plus flottante*/
 +
 
 +
.body img.floated {
 +
 
 +
float:right;
 +
 
 +
margin:5px 10px 5px 0;
 +
 
 +
padding:0;
 +
 
 +
width:auto;
 +
 
 +
height:auto;
 +
 
 +
}
 +
 
 +
.body a {
 +
 
 +
color:#97c950;
 +
 
 +
text-decoration:underline;
 +
 
 +
}
 +
 
 +
.body a:hover {
 +
 
 +
color:#90c950;
 +
 
 +
text-decoration:underline;
 +
 
 +
}
 +
 
 +
/*marge à vérif*/
 +
 
 +
.body h2.lien:hover{
 +
 
 +
margin: 0px 80px 0 0 ;
 +
 
 +
background-color: #D8FFC8;
 +
 
 +
}
 +
/*
 +
limite taille de l'intérieur de la page pour pas dépasser sur le menu/colonne de droite*/
 +
 
 +
.left {
 +
 
 +
float:left;
 +
 
 +
width:65%;
 +
 
 +
margin:40px 0px 10px 25px;
 +
 
 +
padding: 0 25px;
 +
 
 +
background:url(images/l_bg.gif) top left no-repeat;
 +
 
 +
}
 +
/*
 +
width: alloue une certaine portion de la pge, un cadre possiblement rempli (calculé à partir de la gauche probablement du au float lefgt) les marges réduise l'occupation dans ce cadre*/
 +
 
 +
.right {
 +
 
 +
 
 +
 
 +
float:right;
 +
 
 +
width:20%;
 +
 
 +
margin:40px 10px 0 0;
 +
 
 +
padding:0 25px;
 +
 
 +
background:url(images/r_bg.gif) top center no-repeat;
 +
 
 +
}
 +
 
 +
.right ul {
 +
 
 +
list-style:none;
 +
 
 +
margin:5px 0;
 +
 
 +
padding:0;
 +
 
 +
}
 +
 
 +
.right li {
 +
 
 +
background:10px 10px no-repeat;
 +
 
 +
font:normal 14px Arial, Helvetica, sans-serif;
 +
 
 +
color:#464646;
 +
 
 +
padding:5px 0;
 +
 
 +
margin:3px 0;
 +
 
 +
}
 +
 
 +
.right li a {
 +
 
 +
padding:0 0 0 5px;
 +
 
 +
margin:0;
 +
 
 +
font:bold 17px Arial, Helvetica, sans-serif;
 +
 
 +
color:#5f5f5f;
 +
 
 +
text-decoration:none;
 +
 
 +
}
 +
 
 +
.right li a:hover {
 +
 
 +
color:#97c950;
 +
 
 +
margin:5px;
 +
 
 +
/*background-color:#a2cd9a;*/
 +
 
 +
text-decoration:none;
 +
 
 +
}
 +
/*
 +
.right ul.sponsors {
 +
 
 +
list-style:none;
 +
 
 +
margin:5px 0;
 +
 
 +
padding:0;
 +
 
 +
}
 +
 
 +
.right li.sponsors {
 +
 
 +
background:none;
 +
 
 +
font:normal 12px Arial, Helvetica, sans-serif;
 +
 
 +
color:#5f5f5f;
 +
 
 +
padding:8px 0;
 +
 
 +
}
 +
 
 +
.right li.sponsors a {
 +
 
 +
padding:0 0 0 0px;
 +
 
 +
margin:0;
 +
 
 +
font:normal 13px Arial, Helvetica, sans-serif;
 +
 
 +
color:#97c950;
 +
 
 +
text-decoration:none;
 +
 
 +
}
 +
 
 +
.right li.sponsors strong {
 +
 
 +
color:#97c950q;
 +
 
 +
}*/
 +
 
 +
 
 +
</style>
 +
</head>
</html>
</html>

Revision as of 11:08, 4 August 2011

Retrieved from "http://2011.igem.org/Team:Grenoble/Templates/Team:Grenoble_Rawhide"