CSS Divs nach unten floaten

[Offline]

Hi,

ich habe mithilfe einiger Schleifen aus zwei Arrays ein schönes Diagramm gebastelt.
Nur werden die Boxen (wie sonst üblich) von Oben nach Unten gezeichnet, was unübersichtlich wirkt.
Jeder von euch weiß ja sicher wie ein ganz normales Balkendiagramm aussieht, meins sieht so aus:

Ich möchte aber, dass die Divs(ja, ich habe bewusst Divs gewählt) unten anfangen und sich dann nach
oben hin unterscheiden, allein schon weils übersichtlicher ist.

Hier der CSS-Code:

#baum{
width: 330px;
height: 300px;
border: 1px solid #cacaca;
float: left;
padding: 4px 6px;
margin: 15px 0 0 15px;
}
.tree{
width: 15px;
float:left;
}
.red{
background-color:red;
}
.blue{
background-color:blue;
}
.filler{
width: 5px;
height: 5px;
float:left;
}

Die große Box drumherum ist #baum, dann sind die blauen Divs .tree .blue und die roten Divs .tree .red.
(ich weiß, dass die Farben grässlich sind, nur ist das jetzt nicht relevant)
Zwischen den Div-Paaren gibts nen Abstandhalter -> .filler.

Was ich schon versucht habe war das Ganze mit position: absolute, position:relative und bottom:0 hinzukriegen, nur hat das leider nicht funktioniert.

Wie bekomme ich es hin, dass die Boxen von Unten nach Oben hin gezeichnet werden, damit es wie ein richtiges Diagramm aussieht?

Auf JS/CSS3(Transform,etc.) verzichte ich.

Gruß und Danke.

 

[Fleshgrinder]

Position absolute ist schon der richtige Weg. Lass dir die Abstände einfach ausrechnen wenn du den Array durchgehst.

 

[Offline]

Braucht dann nicht jedes einzelne Div ne ID?

Das wäre natürlich schon irgendwie möglich, wenn ich das höchste Div ermittle und dann die ganzen Delta-Abstände als bottom: Xpx nehme.

Ich würde mich natürlich freuen wenn es ne andere Möglichkeit gäbe oder gibt.

 

[Daaron]

schreib dein Erstell-Script um. Statt die Box, die unten stehen soll, als erstes zu erzeugen, erzeug sie als letztes.

 

[Offline]

Ich versteh nicht ganz was du meinst.

Sie wird bereits als "letztes" erzeugt bzw. der Ausgabe hinzugefügt:

$content .= "<div id='baum'>".$ausgabe[2]."</div>";

Ich habe es jetzt mit CSS3 hinbekommen, würde es aber wenn es geht gerne anders gelöst haben:

-moz-transform: scale(1) rotate(180deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1) rotate(180deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(180deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(180deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(180deg) translate(0px, 0px) skew(0deg, 0deg);

 

[Fleshgrinder]

Ich hätte es direkt als style-Attribut bei jedem div mit PHP hinzugefügt. Also im CSS nur generell das Aussehen definiert, keine genaue Position für die einzelnen Balken, und mit PHP dann eben immer ein style-Attribut dazu.

<div class="balken-blau" style="left:30px"></div>