28173 sujets

CSS et mise en forme, CSS3

Histogramme en css

salut,

j'ai passé 1/2 après-midi à bidouiller ces quelques lignes de code, pour faire un histogramme xhtml/css avec des dl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>histogramme</title>
<style media="all" type="text/css">
* {
	margin: 0;
	padding: 0;
	border: none;
}

#histogramme {
	display: block;
	width: 200px;
	height: 120px;
	border: 1px solid #333;
	background-color: #eee;
	margin: 200px auto;
}

dl {
	position: relative;
	display: block;
	width: 50px;
	height: 120px;
	float: left;
}

dt {
	position: absolute;
	bottom: 0;
	float: left;
	display: block;
	width: 50px;
	height: 20px;
	text-align: center;
}

dd {
	position: absolute;
	top: 0;
	z-index: 1;
	float: left;
	display: block;
	width: 50px;
	text-align: center;
	border-bottom-style: solid;
	border-bottom-color: #333;
	border-bottom-width: 0px;
}

a {
	position: absolute;
	top: -100px;
	z-index: 10;
	display: block;
	width: 50px;
	padding-top: 125px;
	height: 20px;
	overflow: hidden;
	text-align: center;
}

</style>
</head>
<body>

<div id="histogramme">
<dl>
	<dt><a href="#1" title="Janvier">Janvier</a></dt>
	<dd style="border-bottom-width: 40px; height: 80px;">12</dd>
</dl>
<dl>
	<dt><a href="#2" title="Février">Février</a></dt>
	<dd style="border-bottom-width: 120px; height: 0px;">120</dd>
</dl>
<dl>
	<dt><a href="#3" title="Mars">Mars</a></dt>
	<dd style="border-bottom-width: 60px; height: 60px;">60</dd>
</dl>
<dl>
	<dt><a href="#4" title="Avril">Avril</a></dt>
	<dd style="border-bottom-width: 70px; height: 50px;">70</dd>
</dl>
</div>

</body>
</html>


ça rend qqch sur firefox, je n'ai pas testé sous ie.

donc si ça intéresse qqun...

maiis
a écrit :
je n'ai pas testé sous ie.
Second mois décalé.
Le rendu est intéressant, mais c'est dommage de détourner des balises DL pour ça : des langages comme PHP font ça très bien.
Bonjour,

Le CSS est censé définir la présentation.

Un histogramme me semble relever du contenu. Donc une ou plusieurs images me paraîtraient plus indiquées.
Sujet clos
Aller à