améliorer la barre de progression

Inversons la logique actuelle…

Le span passe en absolute et on passe le texte en relative. Ca permet d'avoir la même baseline du texte entre le label et le texte dans la barre (ex: 67% - 8 réponses). Accessoirement ca permet de modifier la taille du texte effet de débord (suppression de la hauteur en px de .progress-bar).

Eclaircir le gris, trop foncé pour y mettre du texte par dessus.

En attendant html5 qui a sa propre balise <progress>

css/formidable_analyse.css.html

@@ -2,7 +2,6 @@
 
 .progress-bar {
 	background-color: #f1f1f1;
-	height: 20px;
 	padding: 1px;
 	margin: 2px 0;
 	-moz-border-radius: 5px;
@@ -20,22 +19,25 @@
 	-webkit-moz-text-shadow: 0 1px 1px #fff;
 	-moz-text-shadow: 0 1px 1px #fff;
 	text-shadow: 0 1px 1px #fff;
-	position:absolute;
-	top:2px;
-	left:0;
+	position:relative;
 }
 .progress-bar strong small {font-size:90%; font-weight:normal;}
 
 .progress-bar span {
-	background-color: #bbb;
-	  background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#777));
-	  background-image: -webkit-linear-gradient(top, #bbb, #777);
-	  background-image: -moz-linear-gradient(top, #bbb, #777);
-	  background-image: -ms-linear-gradient(top, #bbb, #777);
-	  background-image: -o-linear-gradient(top, #bbb, #777);
-	  background-image: linear-gradient(top, #bbb, #777);
-	display: inline-block;
-	height: 100%;
+	background-color: #ddd;
+	  background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#999));
+	  background-image: -webkit-linear-gradient(top, #ddd, #999);
+	  background-image: -moz-linear-gradient(top, #ddd, #999);
+	  background-image: -ms-linear-gradient(top, #ddd, #999);
+	  background-image: -o-linear-gradient(top, #ddd, #999);
+	  background-image: linear-gradient(top, #ddd, #999);
+	display: block;
+	position: absolute;
+	top: 2px;
+	bottom: 2px;
+	left: 2px;
+	height: calc(100% - 4px);
+	max-width: calc(100% - 4px);
 	-moz-border-radius: 3px;
 	-webkit-border-radius: 3px;
 	border-radius: 3px;
@@ -50,13 +52,13 @@
 }
 
 .progress-bar.gray span {
-	background-color: #bbb;
-	  background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#777));
-	  background-image: -webkit-linear-gradient(top, #bbb, #777);
-	  background-image: -moz-linear-gradient(top, #bbb, #777);
-	  background-image: -ms-linear-gradient(top, #bbb, #777);
-	  background-image: -o-linear-gradient(top, #bbb, #777);
-	  background-image: linear-gradient(top, #bbb, #777);
+	background-color: #ddd;
+	  background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#999));
+	  background-image: -webkit-linear-gradient(top, #ddd, #999);
+	  background-image: -moz-linear-gradient(top, #ddd, #999);
+	  background-image: -ms-linear-gradient(top, #ddd, #999);
+	  background-image: -o-linear-gradient(top, #ddd, #999);
+	  background-image: linear-gradient(top, #ddd, #999);
 }
 
 .progress-bar.blue span {
@@ -106,4 +108,4 @@
 .grille_choix td {
 	padding-top: .3462em;
 	padding-bottom: .3462em;
-}
\ No newline at end of file
+}