Template:Http://2014.igem.org/Team:ULB-Brussels/Template

From 2014.igem.org

(Difference between revisions)
Line 3: Line 3:
<head>
<head>
<!--init and scripts -->
<!--init and scripts -->
-
<style type="text/css">
+
     <script>
-
        #monmenu {font-family: trebuchet ms, arial, tahoma, verdana, sans-serif; font-size: 90%; font-weight:bold;}
+
-
        #monmenu ul ul {display: none; left: 144px; top: -1px; position: absolute; margin:0px; padding: 0px; border: 1px solid #B0B0B0;}
+
-
        #monmenu li {list-style-type: none; position: relative; width: 140px; background-color: #E0E0E0; padding: 2px; margin: 0px}
+
-
        #monmenu li:hover, #monmenu li.sfhover {background-color: #FFFF70;}
+
-
        #monmenu li a {text-decoration:none;}
+
-
        #monmenu li:hover ul.niveau2, #monmenu li li:hover ul.niveau3, #monmenu li.sfhover ul.niveau2, #monmenu li li.sfhover ul.niveau3 {display: block}
+
-
        #monmenu li.plus {background-position:right; background-image: url(illustrations/ fdroite.gif); background-repeat: no-repeat; border-bottom: 1px solid #B0B0B0;}
+
-
      </style>
+
-
      <!--[if lt IE 7]>
+
-
        <script type="text/javascript">
+
-
            // Fonction destinée à remplacer le "LI:hover" pour IE 6
+
-
            sfHover = function() {
+
-
                var sfEls = document.getElementById("monmenu").getElementsByTagName("li");
+
-
                for (var i=0; i<sfEls.length; i++) {
+
-
                    sfEls[i].onmouseover = function() {
+
-
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
+
-
                        this.className += " sfhover";
+
-
                    }
+
-
                    sfEls[i].onmouseout = function() {
+
-
                        this.className = this.className.replace(new RegExp(" sfhover"), "");
+
-
                    }
+
-
                }
+
-
            }
+
-
            if (window.attachEvent) window.attachEvent("onload", sfHover);
+
-
        </script>
+
-
        <style type="text/css">
+
-
            #monmenu li {width: 144px;}
+
-
        </style>
+
-
    <![endif]-->
+
-
    <meta name="keywords"
+
-
content="CSS, cascading style sheets, mise en page, design, site, web, techniques, sites, webmaster, page">
+
-
    <meta name="description"
+
-
content="Voici un exemple de code de menu hiérarchique déroulant réalisé à l'aide de CSS.">
+
-
    <title>Exemple de menu hiérarchique en CSS</title>
+
-
     <script type="text/javascript" src="https://static.igem.org/mediawiki/2014/7/7f/Slider.jpg"></script>
+
-
        <script>
+
         jssor_slider1_starter = function (containerId) {
         jssor_slider1_starter = function (containerId) {
 +
             var options = {
             var options = {
-
                 $DragOrientation: 3,
+
                 $AutoPlay: false,
-
                 $ArrowNavigatorOptions: {
+
                 $SlideDuration: 800,
-
                     $Class: $JssorArrowNavigator$,
+
                $BulletNavigatorOptions: {
 +
                     $Class: $JssorBulletNavigator$,
                     $ChanceToShow: 2,
                     $ChanceToShow: 2,
-
                     $AutoCenter: 0,
+
                     $AutoCenter: 1,
-
                     $Steps: 1
+
                     $Steps: 1,
 +
                    $Lanes: 1,
 +
                    $SpacingX: 10,
 +
                    $SpacingY: 10,
 +
                    $Orientation: 1
                 }
                 }
             };
             };
             var jssor_slider1 = new $JssorSlider$(containerId, options);
             var jssor_slider1 = new $JssorSlider$(containerId, options);
-
         };
+
         }
     </script>
     </script>
<style type="text/css">
<style type="text/css">
 +
#menu-demo2, #menu-demo2 ul{
 +
width=100%;
 +
padding:0px;
 +
margin:3px;
 +
list-style:none;
 +
text-align:center;
 +
}
 +
#menu-demo2 li{
 +
display:inline-block;
 +
position:relative
 +
border-radius:0;
 +
}
 +
#menu-demo2 ul li{
 +
display:inherit;
 +
border-radius:0;
 +
}
 +
#menu-demo2 ul li:hover{
 +
border-radius:0;
 +
}
 +
#menu-demo2 ul li:last-child{
 +
border-radius:0 0 0px 0px;
 +
}
 +
#menu-demo2 ul{
 +
position:absolute;
 +
max-height:0px;
 +
width:100%;
 +
overflow:hidden;
 +
-moz-transition: .8s all .3s;
 +
-webkit-transition: .8s all .3s;
 +
transition: .8s all .3s;
 +
}
 +
#menu-demo2 li:hover ul{
 +
max-height:150px;
 +
}
 +
/* background des liens menus */
 +
#menu-demo2 li:first-child{margin: 20px 0px 1px 0px;
 +
background-color: #8b8b8b;
 +
background-image:-webkit-linear-gradient(top, #a9a9a9, #7a7a7a);
 +
background-image:linear-gradient(to bottom, #a9a9a9, #7a7a7a);
 +
}
 +
#menu-demo2 li:nth-child(2){
 +
background-color: #8b8b8b;
 +
background-image: -webkit-linear-gradient(top, #a9a9a9, #7a7a7a);
 +
background-image:linear-gradient(to bottom, #a9a9a9, #7a7a7a);
 +
}
 +
#menu-demo2 li:nth-child(3){
 +
background-color: #8b8b8b;
 +
background-image:-webkit-linear-gradient(top, #a9a9a9,  #7a7a7a);
 +
background-image:linear-gradient(to bottom, #a9a9a9,  #7a7a7a);
 +
}
 +
#menu-demo2 li:last-child{
 +
background-color: #8b8b8b;
 +
background-image:-webkit-linear-gradient(top, #a9a9a9, #8b8b8b);
 +
background-image:linear-gradient(to bottom, #a9a9a9,  #7a7a7a);
 +
}
 +
/* background des liens sous menus */
 +
#menu-demo2 li:first-child li{
 +
background:#B0C4DE;
 +
}
 +
#menu-demo2 li:nth-child(2) li{
 +
background:#B0C4DE;
 +
}
 +
#menu-demo2 li:nth-child(3) li{
 +
background:#B0C4DE;
 +
}
 +
#menu-demo2 li:last-child li{
 +
background:#B0C4DE;
 +
}
 +
/* background des liens menus et sous menus au survol */
 +
#menu-demo2 li:first-child:hover, #menu-demo2 li:first-child li:hover{
 +
background:#B0C4DE;
 +
}
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo,.printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo,.printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/
Line 283: Line 325:
         <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1106px; height: 300px;
         <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1106px; height: 300px;
             overflow: hidden;">
             overflow: hidden;">
-
            <div><img u="image" src="https://static.igem.org/mediawiki/2014/8/82/ULB2014PLACEHOLDER2.png" /></div>
 
             <div><img u="image" src="https://static.igem.org/mediawiki/2014/8/87/ULB2014PLACEHOLDER1.png" /></div>
             <div><img u="image" src="https://static.igem.org/mediawiki/2014/8/87/ULB2014PLACEHOLDER1.png" /></div>
 +
            <div><img u="image" src="https://static.igem.org/mediawiki/2014/8/82/ULB2014PLACEHOLDER2.png" /></div>
         </div>
         </div>
-
         <!-- Arrow Navigator Skin Begin -->
+
 
 +
         <!-- Bullet Navigator Skin Begin -->
         <style>
         <style>
-
             /* jssor slider arrow navigator skin 03 css */
+
             /* jssor slider bullet navigator skin 05 css */
             /*
             /*
-
             .jssora03l              (normal)
+
             .jssorb05 div          (normal)
-
             .jssora03r              (normal)
+
             .jssorb05 div:hover    (normal mouseover)
-
             .jssora03l:hover        (normal mouseover)
+
             .jssorb05 .av          (active)
-
             .jssora03r:hover       (normal mouseover)
+
             .jssorb05 .av:hover     (active mouseover)
-
             .jssora03ldn            (mousedown)
+
             .jssorb05 .dn          (mousedown)
-
            .jssora03rdn            (mousedown)
+
             */
             */
-
             .jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn
+
             .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av
             {
             {
-
            position: absolute;
+
                 background: url(https://static.igem.org/mediawiki/2014/c/c2/ULB2014BULLETS2.png) no-repeat;
-
            cursor: pointer;
+
-
            display: block;
+
-
                 background: url(https://static.igem.org/mediawiki/2014/d/d3/ULB2014ARROWS.png) no-repeat;
+
                 overflow:hidden;
                 overflow:hidden;
 +
                cursor: pointer;
             }
             }
-
             .jssora03l { background-position: -3px -33px; }
+
             .jssorb05 div { background-position: -7px -7px; }
-
             .jssora03r { background-position: -63px -33px; }
+
             .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
-
            .jssora03l:hover { background-position: -123px -33px; }
+
             .jssorb05 .av { background-position: -67px -7px; }
-
             .jssora03r:hover { background-position: -183px -33px; }
+
             .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
-
             .jssora03ldn { background-position: -243px -33px; }
+
-
            .jssora03rdn { background-position: -303px -33px; }
+
         </style>
         </style>
-
         <!-- Arrow Left -->
+
         <!-- bullet navigator container -->
-
         <span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
+
         <div u="navigator" class="jssorb05" style="position: absolute; bottom: 16px; right: 6px;">
-
        </span>
+
            <!-- bullet navigator item prototype -->
-
        <!-- Arrow Right -->
+
            <div u="prototype" style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
-
        <span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 123px; right: 8px">
+
         </div>
-
         </span>
+
         <!-- Bullet Navigator Skin End -->
-
         <!-- Arrow Navigator Skin End -->
+
 
-
         <a style="display: none" href="http://www.jssor.com">carousel slider</a>
+
         <a style="display: none" href="http://www.jssor.com">carousel slider</a>  
-
         <!-- Trigger -->
+
         <!-- Trigger -->  
         <script>
         <script>
             jssor_slider1_starter('slider1_container');
             jssor_slider1_starter('slider1_container');
-
         </script>
+
         </script>  
-
     </div>
+
     </div>  
-
     <!-- Jssor Slider End -->
+
     <!-- Jssor Slider End -->  
<!--navigation menu -->
<!--navigation menu -->
  <td align="center" colspan="3">
  <td align="center" colspan="3">
Line 343: Line 381:
     margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >   
     margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >   
<a href="https://2014.igem.org/Team:ULB-Brussels"style="color:#000000">Home </a> </td>
<a href="https://2014.igem.org/Team:ULB-Brussels"style="color:#000000">Home </a> </td>
 +
 +
<td style= "
<td style= "
Line 356: Line 396:
<td style= "
<td style= "
-
     background :#8b8b8b
+
     background :#8b8b8b;
-
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a')
+
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a');
     background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
     background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
     background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
     background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
Line 363: Line 403:
     position: relative;
     position: relative;
     margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >   
     margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >   
-
<a href="https://igem.org/Team.cgi?year=2014&team_name=ULB-Brussels"style="color:#000000"> Official Team Profile </a></td>
+
<a href="https://2014.igem.org/Team:ULB-Brussels"style="color:#000000">Sponsors </a> </td>
-
<td style= "
+
<td colspan="3" style= "
-
     background :#8b8b8b
+
     background :#8b8b8b;
-
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a')
+
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a');
     background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
     background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
     background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
     background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
Line 374: Line 414:
     margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >   
     margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >   
-
<a href="https://2014.igem.org/Team:ULB-Brussels/Project"style="color:#000000"> Project</a></td>
+
<a href="https://2014.igem.org/Team:ULB-Brussels/Project"style="color:#000000"> <div id="monmenu">
-
 
+
        <ul height="100%" id="menu-demo2">
-
<td style= "
+
<li style= "
     background :#8b8b8b
     background :#8b8b8b
-
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a')
+
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='rgb(152,152,152)', endColorstr='rgb(141,141,141)')
-
     background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
+
     background : -webkit-gradient(linear, left top, left bottom, rgb(152,152,152)to(rgb(141,141,141)));
-
     background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
+
     background : -moz-linear-gradient(top, rgb(152,152,152), rgb(141,141,141));" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b ><a href="#" style="color:#000000">Project <img src="https://static.igem.org/mediawiki/2014/4/47/Bouton.PNG" ></a>
-
    border-top: 2px solid #939393;
+
<ul >
-
    position: relative;
+
<li><a href="https://2014.igem.org/Team:ULB-Brussels/Project"style="color:#000000">Introduction</a></li>
-
    margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >
+
<li><a href="#">Dayly News</a></li>
 +
<li><a href="https://2014.igem.org/Team:ULB-Brussels/Modeling"style="color:#000000">Modeling</a></li>
 +
<li><a href="https://2014.igem.org/Team:ULB-Brussels/Parts"style="color:#000000">Parts</a></li>
 +
<li><a href="https://2014.igem.org/Team:ULB-Brussels/Safety"style="color:#000000">Safety</a></li>
 +
</ul></td>
-
<a href="https://2014.igem.org/Team:ULB-Brussels/Parts"style="color:#000000"> Parts</a></td>
+
<td style= "border-radius: 0px 15px 15px 0px; behavior: url(border-radius.htc);
-
 
+
     background :#8b8b8b;
-
<td style= "
+
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a');
-
     background :#8b8b8b
+
-
     filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a')
+
     background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
     background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
     background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
     background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
Line 395: Line 437:
     position: relative;
     position: relative;
     margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >   
     margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b >   
 +
<a href="https://igem.org/Team.cgi?year=2014&team_name=ULB-Brussels"style="color:#000000"> Official Team Profile </a></td>
 +
           
-
<a href="https://2014.igem.org/Team:ULB-Brussels/Modeling"style="color:#000000"> Modeling</a></td>
 
-
<td style= "
 
-
    background :#8b8b8b
 
-
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a')
 
-
    background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
 
-
    background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
 
-
    border-top: 2px solid #939393;
 
-
    position: relative;
 
-
    margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b > 
 
-
<td style= "
 
-
    background :#8b8b8b
 
-
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a')
 
-
    background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
 
-
    background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
 
-
    border-top: 2px solid #939393;
 
-
    position: relative;
 
-
    margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b > 
 
-
<a href="https://2014.igem.org/Team:ULB-Brussels/Safety"style=" color:#000000"> Safety </a></td>
 
-
<td style= "border-radius: 0px 15px 15px 0px; behavior: url(border-radius.htc);
 
-
    background :#8b8b8b
 
-
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a')
 
-
    background : -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a));
 
-
    background : -moz-linear-gradient(top, #a9a9a9, #7a7a7a);
 
-
    border-top: 2px solid #939393;
 
-
    position: relative;
 
-
    margin-bottom: 30px;" align="center" height ="45px" onMouseOver="this.bgColor='#B0C4DE'" onMouseOut="this.bgColor='#8b8b8b'" bgColor=#8b8b8b > 
 
-
<a href="https://2014.igem.org/Team:ULB-Brussels/Attributions"style="color:#000000"> Attributions </a></td>
 
<td style= " border-radius: 15px 0px 0px 15px; behavior: url(border-radius.htc); position: relative;
<td style= " border-radius: 15px 0px 0px 15px; behavior: url(border-radius.htc); position: relative;

Revision as of 21:57, 8 July 2014

carousel slider
Home Team Sponsors Official Team Profile Français Dutch

Retrieved from "http://2014.igem.org/Template:Http://2014.igem.org/Team:ULB-Brussels/Template"