modification style list-video qui supportera l'ascenseur
authorAnthony Ly <anthonyly.com@gmail.com>
Wed, 24 Oct 2012 17:21:34 +0200
changeset 9 5aa441ef098c
parent 8 523828fb7c78
child 10 d2bda8277688
child 14 2754a76e2787
modification style list-video qui supportera l'ascenseur
integration/css/edition.css
integration/edition.html
integration/img/how-to-sprite.png
--- a/integration/css/edition.css	Wed Oct 24 16:30:55 2012 +0200
+++ b/integration/css/edition.css	Wed Oct 24 17:21:34 2012 +0200
@@ -358,7 +358,7 @@
 }
 .col-left .list-video li a:hover,
 .col-left  .list-video li a.active{
-	background: url(../img/arrow-item-video-sprite.png) -250px 0 no-repeat;
+	background: url(../img/arrow-item-video-sprite.png) right top no-repeat;
 }
 /* col-right */
 .col-right{
@@ -395,7 +395,7 @@
 }
 .col-right .list-video > li > a:hover,
 .col-right  .list-video > li > a.active{
-	background: url(../img/arrow-item-video-sprite.png) 0 0 no-repeat;
+	background: url(../img/arrow-item-video-sprite.png) left top no-repeat;
 }
 .col-right .list-video > li .tools{
 	position: absolute;
@@ -488,18 +488,23 @@
 	background-position: -61px -16px;
 }
 /* list-video */
+.list-video{
+	overflow: hidden;
+	overflow-y: auto;
+	max-height: 680px;
+}
 .list-video > li{
 	margin-bottom: 1px;
 }
 .list-video > li > a{
-	padding: 5px 0 5px 10px;
+	padding: 5px 10px 5px 10px;
 	position: relative;
 	clear: both;
-	width: 240px;
-	height: 62px;
+	width: auto;
+	min-height: 62px;
+	display: block;
 }
-.list-video li a img, 
-.list-video li a span.video-info{
+.list-video li a img{
 	float: left;
 }
 .list-video li a img{
@@ -507,7 +512,7 @@
 }
 .list-video li a span.video-info{
 	display: block;
-	width: 150px;
+    margin-left: 88px;
 }
 .list-video li a .video-info .title-video{
 	font-size: 13px;
@@ -556,4 +561,6 @@
 	font-size: 12px;
 	font-weight: 600;
 	display: block;
-}
\ No newline at end of file
+}
+
+
--- a/integration/edition.html	Wed Oct 24 16:30:55 2012 +0200
+++ b/integration/edition.html	Wed Oct 24 17:21:34 2012 +0200
@@ -133,6 +133,39 @@
                                 <span class="number">12</span>
                                 <img src="img/apercu-video.jpg" alt="aperçu" />
                                 <span class="video-info">
+                                    <span class="title-video">Le a LuneLe a LuneLe a LuneLe a LuneLe a Lune</span>
+                                    <span class="author">Par : Mozilla Foundation</span>
+                                    <span class="time-lenght">Durée : <span>12:33</span></span>
+                                </span>
+                            </a>
+                        </li><!-- item-video -->
+                        <li class="item-video">
+                            <a class="clearfix active" href="#">
+                                <span class="number">12</span>
+                                <img src="img/apercu-video.jpg" alt="aperçu" />
+                                <span class="video-info">
+                                    <span class="title-video">Le a Lune</span>
+                                    <span class="author">Par : Mozilla Foundation</span>
+                                    <span class="time-lenght">Durée : <span>12:33</span></span>
+                                </span>
+                            </a>
+                        </li><!-- item-video -->
+                        <li class="item-video">
+                            <a class="clearfix" href="#">
+                                <span class="number">12</span>
+                                <img src="img/apercu-video.jpg" alt="aperçu" />
+                                <span class="video-info">
+                                    <span class="title-video">Le a Lune</span>
+                                    <span class="author">Par : Mozilla Foundation</span>
+                                    <span class="time-lenght">Durée : <span>12:33</span></span>
+                                </span>
+                            </a>
+                        </li><!-- item-video -->
+                        <li class="item-video">
+                            <a class="clearfix" href="#">
+                                <span class="number">12</span>
+                                <img src="img/apercu-video.jpg" alt="aperçu" />
+                                <span class="video-info">
                                     <span class="title-video">Le a Lune</span>
                                     <span class="author">Par : Mozilla Foundation</span>
                                     <span class="time-lenght">Durée : <span>12:33</span></span>
@@ -140,7 +173,62 @@
                             </a>
                         </li><!-- item-video -->
                         <li class="item-video">
-                            <a class="clearfix active" href="#">
+                            <a class="clearfix" href="#">
+                                <span class="number">12</span>
+                                <img src="img/apercu-video.jpg" alt="aperçu" />
+                                <span class="video-info">
+                                    <span class="title-video">Le a Lune</span>
+                                    <span class="author">Par : Mozilla Foundation</span>
+                                    <span class="time-lenght">Durée : <span>12:33</span></span>
+                                </span>
+                            </a>
+                        </li><!-- item-video -->
+                        <li class="item-video">
+                            <a class="clearfix" href="#">
+                                <span class="number">12</span>
+                                <img src="img/apercu-video.jpg" alt="aperçu" />
+                                <span class="video-info">
+                                    <span class="title-video">Le a Lune</span>
+                                    <span class="author">Par : Mozilla Foundation</span>
+                                    <span class="time-lenght">Durée : <span>12:33</span></span>
+                                </span>
+                            </a>
+                        </li><!-- item-video -->
+                        <li class="item-video">
+                            <a class="clearfix" href="#">
+                                <span class="number">12</span>
+                                <img src="img/apercu-video.jpg" alt="aperçu" />
+                                <span class="video-info">
+                                    <span class="title-video">Le a Lune</span>
+                                    <span class="author">Par : Mozilla Foundation</span>
+                                    <span class="time-lenght">Durée : <span>12:33</span></span>
+                                </span>
+                            </a>
+                        </li><!-- item-video -->
+                        <li class="item-video">
+                            <a class="clearfix" href="#">
+                                <span class="number">12</span>
+                                <img src="img/apercu-video.jpg" alt="aperçu" />
+                                <span class="video-info">
+                                    <span class="title-video">Le a Lune</span>
+                                    <span class="author">Par : Mozilla Foundation</span>
+                                    <span class="time-lenght">Durée : <span>12:33</span></span>
+                                </span>
+                            </a>
+                        </li><!-- item-video -->
+                        <li class="item-video">
+                            <a class="clearfix" href="#">
+                                <span class="number">12</span>
+                                <img src="img/apercu-video.jpg" alt="aperçu" />
+                                <span class="video-info">
+                                    <span class="title-video">Le a Lune</span>
+                                    <span class="author">Par : Mozilla Foundation</span>
+                                    <span class="time-lenght">Durée : <span>12:33</span></span>
+                                </span>
+                            </a>
+                        </li><!-- item-video -->
+                        <li class="item-video">
+                            <a class="clearfix" href="#">
                                 <span class="number">12</span>
                                 <img src="img/apercu-video.jpg" alt="aperçu" />
                                 <span class="video-info">
Binary file integration/img/how-to-sprite.png has changed