DIV-Container Positionierung

[bauchinj]

Hallo!

hab ein Problem mit Divs:

<div class="anton">Berta</div>
<div class="berta">Anton</div>

Wie kann ich mittels CSS die Reihenfolge der DIVs ändern - Will folgende Ausgabe:

Anton
Berta


Also das zweite DIV im Source soll als erstes (oben) angezeigt werden!

 

[Maik]

Hi,

entweder wird das untere Element mit einem negativen, und das obere mit einem positiven margin-top- bzw. top- Wert (relative Positionierung) verrückt, oder beide Blöcke werden mit einer absoluten Positionierung entsprechend ausgerichtet.

Für diese CSS-Techniken muß die Höhe der Elemente bekannt sein.

Wenn nicht, solltest du der Einfachheit halber ihre Reihenfolge im HTML-Code tauschen.

mfg Maik

 

[bauchinj]

Also wenn div.berta eine variable Größe hat, muss ich die DIVs vertauschen, ich kann die Reihenfolge nicht mittels CSS bearbeiten?

 

[Maik]

Bei variablen Höhen ist das Vertauschen der Blöcke mit den genannten CSS-Techniken nicht möglich.

mfg Maik

 

[bauchinj]

Also ich kenne die Höhe von div.anton. Wie aber weiß ich nun, wie weit ich div.anton nach unten schieben musss?

div.anton{
   margin-top:50px
}
div.berta{
   margin-top:-50px
}

Aber wenn div.berta nun so größer als 50 px wird?

 

[Maik]

Die Höhe von .berta muß ebenso bekannt sein, damit du weißt, wohin nach unten .anton zu verschieben ist.

Wieso tauscht du nicht einfach die Reihenfolge der Elemente im HTML-Code, wenn sie später in der Seitenansicht entgegengesetzt erscheinen sollen?

Ansonsten müsstest du den Umweg über ein Javascript nehmen, das im ersten Arbeitsgang mittels offsetHeight die variablen Elementhöhen ausliest, um anschliessend die Elemente entsprechend in ihrem Anzeigebereich zu positionieren.

mfg Maik

 

[Daniel0108]

Das ist die einzige Möglichkeit wenn du nicht JavaScript oder PHP verwenden willst und den Inhalt der divs dadurch verändern lässt....
LG
Daniel0108