Web-tutoriel

Tutoriels javascript css php java jquery

Graphique de pourcentage en CSS et HTML 7 octobre , 2009



Voici un petit bout de code pour afficher un graphique de pourcentage en HTML et CSS :

Firefox
75%
Internet Explorer
15%
Chrome
4%
Safari
2%

On a donc 2 parties de code, le tableau en HTML et la mise en forme en CSS

Le tableau HTML:

<div id="tableau">
	<dl id="pcts_75">	<dt>Firefox</dt>			<dd>80%</dd></dl>
	<dl id="pcts_15">	<dt>Internet Explorer</dt> 		<dd>30%</dd></dl>
	<dl id="pcts_4">		<dt>Chrome</dt>			<dd>20%</dd></dl>
	<dl id="pcts_2">		<dt>Safari</dt>			<dd>20%</dd></dl>
</div>

Le code CSS :

	#tableau dl {
		width:500px;
		left:150px;
		border:1px solid #000;
		font-weight:bold;
		position:relative;
		margin:5px;
	}
	#tableau dt {
		border:1px solid #000;
		left:-155px;
		width:150px;
		background-color:#EEEEEE;
		position:absolute;
		color:#0D5CAB;
		margin-top:-1px;
	}
	#tableau dd {
		text-align:right;
		margin:0;
		color:#0D5CAB;
	}
	#pcts_75 dd {
		width:75%;
		background-color:#FE3210;
	}
	#pcts_15 dd {
		width:15%;
		background-color:#FE801E;
	}
	#pcts_4 dd {
		width:4%;
		background-color:#FFC32A;
	}
	#pcts_2 dd {
		width:2%;
		background-color:#FFE856;
	}

Laissez une réponse

Nom (requis)

Email (requis)

Site Web

Haut