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

From 2014.igem.org

(Difference between revisions)
Line 282: Line 282:
<tr><th><table style="background-color:#ebebeb;" width="100%"  align="center">
<tr><th><table style="background-color:#ebebeb;" width="100%"  align="center">
<!-- Jssor Slider Begin -->
<!-- Jssor Slider Begin -->
-
     <!-- You can move inline styles to css file or css block. -->  
+
     <!-- You can move inline styles to css file or css block. -->
-
     <div id="slider1_container" style="position: relative; width: 1106px;
+
     <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 1024px;
-
         height: 300px; overflow: hidden; margin-left: auto; margin-right: auto">
+
         height: 300px; ">
-
+
 
-
         <!-- Slides Container -->  
+
         <!-- Slides Container -->
-
         <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: 1024px; 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>
-
 
+
       
-
         <!-- Bullet Navigator Skin Begin -->
+
         <!-- Arrow Navigator Skin Begin -->
         <style>
         <style>
-
             /* jssor slider bullet navigator skin 05 css */
+
             /* jssor slider arrow navigator skin 03 css */
             /*
             /*
-
             .jssorb05 div          (normal)
+
             .jssora03l              (normal)
-
             .jssorb05 div:hover    (normal mouseover)
+
             .jssora03r              (normal)
-
             .jssorb05 .av          (active)
+
             .jssora03l:hover        (normal mouseover)
-
             .jssorb05 .av:hover     (active mouseover)
+
             .jssora03r:hover       (normal mouseover)
-
             .jssorb05 .dn          (mousedown)
+
             .jssora03ldn            (mousedown)
 +
            .jssora03rdn            (mousedown)
             */
             */
-
             .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av
+
             .jssora03l, .jssora03r, .jssora03ldn, .jssora03rdn
             {
             {
-
                 background: url(https://static.igem.org/mediawiki/2014/c/c2/ULB2014BULLETS2.png) no-repeat;
+
            position: absolute;
 +
            cursor: pointer;
 +
            display: block;
 +
                 background: url(https://static.igem.org/mediawiki/2014/d/d3/ULB2014ARROWS.png) no-repeat;
                 overflow:hidden;
                 overflow:hidden;
-
                cursor: pointer;
 
             }
             }
-
             .jssorb05 div { background-position: -7px -7px; }
+
             .jssora03l { background-position: -3px -33px; }
-
             .jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
+
             .jssora03r { background-position: -63px -33px; }
-
             .jssorb05 .av { background-position: -67px -7px; }
+
            .jssora03l:hover { background-position: -123px -33px; }
-
             .jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }
+
             .jssora03r:hover { background-position: -183px -33px; }
 +
             .jssora03ldn { background-position: -243px -33px; }
 +
            .jssora03rdn { background-position: -303px -33px; }
         </style>
         </style>
-
         <!-- bullet navigator container -->
+
         <!-- Arrow Left -->
-
         <div u="navigator" class="jssorb05" style="position: absolute; bottom: 16px; right: 6px;">
+
         <span u="arrowleft" class="jssora03l" style="width: 55px; height: 55px; top: 123px; left: 8px;">
-
            <!-- bullet navigator item prototype -->
+
        </span>
-
            <div u="prototype" style="POSITION: absolute; WIDTH: 16px; HEIGHT: 16px;"></div>
+
        <!-- Arrow Right -->
-
         </div>
+
        <span u="arrowright" class="jssora03r" style="width: 55px; height: 55px; top: 123px; right: 8px">
-
         <!-- Bullet Navigator Skin End -->
+
         </span>
-
 
+
         <!-- 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">

Revision as of 21:13, 8 July 2014

Exemple de menu hiérarchique en CSS

carousel slider
Home Team Official Team Profile Project Parts Modeling Safety Attributions Français Dutch