http://www.csssnippets.be Snippets for you, snippets for me Wed, 23 Jun 2010 09:35:12 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 http://www.csssnippets.be/2009/03/css-bar-graph-vertikaal/ http://www.csssnippets.be/2009/03/css-bar-graph-vertikaal/#comments Tue, 24 Mar 2009 08:23:45 +0000 Mark http://www.csssnippets.be/?p=143 Grafieken weergeven in pure HTML en CSS vergt véél denkwerk, horizontaal, vertikaal, kleuren en de naderhandse onderhoudbaarheid.
Dit een uiterst complexe uitwerking, meerder vertikale bar graphs naast elkaar.

HTML

<div id="vertgraph">
	<ul>
	<li class="critical" style="height: 150px;">22</li>
	<li class="high" style="height: 80px;">7</li>
	<li class="medium" style="height: 50px;">3</li>
	<li class="low" style="height: 90px;">8</li>
	<li class="info" style="height: 40px;">2</li>
	</ul>
</div>

CSS

#vertgraph {
width: 378px;
height: 207px;
position: relative;
border: 1px solid #ab977c;
background-color: #eee;
}
#vertgraph ul {
width: 378px;
height: 207px;
margin: 0;
padding: 0;
}
#vertgraph ul li {
position: absolute;
width: 28px;
height: 160px;
bottom: 34px;
padding: 0;
margin: 0;
list-style: none;
border: 1px solid #ab977c;
background-color: #c2b39c;
text-align: center;
font-weight: bold;
color: #fff;
line-height: 2.5em;
}
#vertgraph li.critical {
left: 24px;
}
#vertgraph li.high {
left: 101px;
}
#vertgraph li.medium {
left: 176px;
}
#vertgraph li.low {
left: 251px;
}
#vertgraph li.info {
left: 327px;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2009/03/css-bar-graph-vertikaal/feed/ 0 http://www.csssnippets.be/2009/03/css-bar-graph-complex/ http://www.csssnippets.be/2009/03/css-bar-graph-complex/#comments Sat, 21 Mar 2009 14:15:26 +0000 Mark http://www.csssnippets.be/?p=139 sterk overeen met de vorige versie.]]> Grafieken weergeven in pure HTML en CSS vergt véél denkwerk, horizontaal, vertikaal, kleuren en de naderhandse onderhoudbaarheid.
Dit is een meer complexe vizualisatie, maar komt sterk overeen met de vorige versie.

HTML

<dl>
<dt>Love Life</dt>
<dd>
	<div style="width:25%;">
		<strong>25%</strong>
	</div>
</dd>
<dt>Education</dt>
<dd>
	<div style="width:55%;">
		<strong>55%</strong>
	</div>
</dd>
<dt>War Craft 3 Rank</dt>
<dd>
	<div style="width:75%;">
		<strong>75%</strong>
	</div>
</dd>
</dl>

CSS

dl {
margin: 0;
padding: 0;
}
dt {
position: relative; /* IE is dumb */
clear: both;
display: block;
float: left;
width: 104px;
height: 20px;
line-height: 20px;
margin-right: 17px;
font-size: .75em;
text-align: right;
}
dd {
position: relative; /* IE is dumb */
display: block;
float: left;
width: 197px;
height: 20px;
margin: 0 0 15px;
background-color: #acc6ee;
}
*:first-child+html dd { float: none; } /* hack for ie7 */
* html dd { float: none; } /* hack for ie6 */
dd div {
position: relative;
background-color: #b3eeac;
height: 20px;
width: 75%;
text-align:right;
}
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background-color: #000;
height: 24px;
width: 5px;
text-align: left;
text-indent: -9999px;
overflow: hidden;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2009/03/css-bar-graph-complex/feed/ 1 http://www.csssnippets.be/2009/03/css-bar-graph-basis/ http://www.csssnippets.be/2009/03/css-bar-graph-basis/#comments Wed, 18 Mar 2009 21:07:38 +0000 Mark http://www.csssnippets.be/?p=136 Grafieken weergeven in pure HTML en CSS vergt véél denkwerk, horizontaal, vertikaal, kleuren en de naderhandse onderhoudbaarheid.
Dit is een eenvoudige basis horizontale grafiek.

HTML

<div class="graph">
<strong class="bar" style="width: 24%;">24%</strong>
</div>

CSS

.graph {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span {
position: absolute;
left: 1em;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

]]> http://www.csssnippets.be/2009/03/css-bar-graph-basis/feed/ 1