S
sysop
Guest
Ich möchte ein Säulendiagramm mit css generieren. Dazu habe ich mir eine Diagrammfläche als Container erstellt und möchte dort die Balken positionieren. Dazu verwende ich eine Funktion, die mir mit php die Höhe der Balken errechnet. Klappt alles wunderbar, bis auf die Positionierung, die Balken werden immer OBEN bündig positioniert (Die Container verlaufen also immer von Oben nach Unten, Oben Bündig: (Siehe Screenshot 1). Ich bekomme die Balken nicht unten Bündig ausgerichtet, wo liegt mein Fehler.
Hier mal der HTML-Code für 3 Diagrammbalken:
CSS-Code
Es scheinen sich float und position nicht zu vertragen und float schaltet die css Angabe position einfach aus.
Das Ganze wird über eine Funktion zusammengebastelt und es sind natürlich mehrere Säulen. Ich helfe mir, indem ich zuerst einen Container in 100% Höhe erstelle und darüber dann einen weiteren Container mit Höhe = Differenz 100% - Balkenhöhe). Das liefert mir dann Grafik 2. Aber Container über Container kann ja nicht dir Lösung sein.
Falsch Anhang anzeigen 2286 Richtig Anhang anzeigen 2287
Der Vollständigkeit halber hier noch die ganze PHP-Funktion, die das Diagramm derzeit richtig erstellt.
Hier mal der HTML-Code für 3 Diagrammbalken:
HTML:
<div class="diagfl">
<div class="diagbalk" title="14.11.2011 [11:32] von Ich" style="height:90%; background-color: #f1c1d2;"><strong>9</strong></div>
<div class="diagbalk" title="14.11.2011 [11:32] von Ich" style="height:70%; background-color: #80e38c;"><strong>7</strong></div>
<div class="diagbalk" title="14.11.2011 [11:32] von Ich" style="height:60%; background-color: #aea7e7;"><strong>6</strong></div>
</div>
Code:
.diagfl
{
margin-top:4em;
margin-bottom:1em;
width:48em;
height:30em;
background-color: #999999;
padding:2em;
}
.diagbalk
{
float:left;
text-align:center;
font-size:8px;
width:18px;
height:100%;
margin-left:5px;
margin-top:5px;
position:relative; bottom:0;
}
.diagbg
{
background-color: #999999;
}Es scheinen sich float und position nicht zu vertragen und float schaltet die css Angabe position einfach aus.
Das Ganze wird über eine Funktion zusammengebastelt und es sind natürlich mehrere Säulen. Ich helfe mir, indem ich zuerst einen Container in 100% Höhe erstelle und darüber dann einen weiteren Container mit Höhe = Differenz 100% - Balkenhöhe). Das liefert mir dann Grafik 2. Aber Container über Container kann ja nicht dir Lösung sein.
Falsch Anhang anzeigen 2286 Richtig Anhang anzeigen 2287
Der Vollständigkeit halber hier noch die ganze PHP-Funktion, die das Diagramm derzeit richtig erstellt.
PHP:
function diagramm($werte)
{
global $config,$lng;
$cnt = 0;
echo "<div class=\"diagfl\">\n";
for($i = (count($werte) - 1); $i >= 1; $i--)
{
$minus = 10 - $werte[$i][2];
if($minus >= 5) $color = 'FFFFFF';
elseif($minus == 4) $color = 'aea7e7';
elseif($minus == 3) $color = '80e38c';
elseif($minus == 2) $color = 'def4e1';
elseif($minus == 1) $color = 'f1c1d2';
else $color = 'ffaaaa';
echo '<div class="diagbalk" title="'.date($config['date_format'],$werte[$i][3])." ".$lng['by']." ".get_user($werte[$i][4]).'" style="background-color: #'.$color.';'.$config['bewertung_border'].'">'."\n";
echo '<div style="height:'.($minus * 10).'%; background-color:#999999; position:relative; bottom:0;"></div>'."\n";
echo '<div style="height:1%; position:relative; bottom:15px;">'.$i.'</div>';
if($minus < 10)
{
echo '<strong>'.$werte[$i][2].'</strong></div>'."\n";
}
else
{
echo '</div>'."\n";
}
$cnt ++;
if($cnt == 22) break; // nur die letzten 22 Werte anzeigen
}
echo "</div>\n";
}
