NeoGriever: Nicht feste Anzahl an Elementen separat "absolute" positionieren

Kurz und Knapp: ich habe eine Liste, welche verschieden viele Elemente aufnimmt. (Variiert ständig. Zwischen 0 Elementen und über 400 ... oder mehr)

Ich möchte diese absolut positioniert haben mittels CSS: PS: Ich habe NUR Css zur verfügung. Am HTML-Code kann ich nichts ändern und Javascript kann/möchte ich nicht nutzen.

Die Schwierigkeit darin besteht, dass es sich um Tabellen-Zellen handelt. Ich kriege diese schon an die richtige Stelle geschoben mittels CSS. Aber sie überlagern sich. Ist es möglich, zwischen jeder Zelle quasi einen Abstand zu erzeugen, der eben dynamisch dazugepackt wird?

Beispiel-Codeauschnitt:

<tr>  
    <td colspan="3" align="center">Zeile 1</td>  
</tr>  
<tr>  
    <td colspan="3" align="center">Zeile 2</td>  
</tr>  
<tr>  
    <td colspan="3" align="center">Zeile 3</td>  
</tr>  
<tr>  
    <td colspan="3" align="center">Zeile 4</td>  
</tr>  
<tr>  
    <td colspan="3" align="center">Zeile 5</td>  
</tr>

Ein weiteres Problem ist, dass die Spalten davon nicht die ersten oder letzten wären. Diese sind quasi mittendrin. Daher ist eine Verschiebung der gesamten Tabelle nicht möglich, da sich sonst Elemente mitverschieben, die aber an ihrem Platz bleiben sollen. Die Auswahl dieser Elemente habe ich bereits mit :nth-child(n+7) gelöst.

Wie kriege ich jetzt effektiv zwischen jedem Element quais eine Versetzung hin. Dass diese untereinander angeordnet werden? Mach ich nämlich position:absolute;, überlagern diese sich komplett. Mach ich relative passiert nix (was ja eigentlich am effektivsten wär, wenns funktioniert). Fixed ist quasi das selbe wie absolute, nur dass es eben mitscrollt.

Wer hat ne Lösung?

  1. Hi,

    Kurz und Knapp: ich habe eine Liste, welche verschieden viele Elemente aufnimmt. (Variiert ständig. Zwischen 0 Elementen und über 400 ... oder mehr)

    Ich möchte diese absolut positioniert haben mittels CSS

    Welchen Sinn und Zweck verfolgst du damit …?

    Die Schwierigkeit darin besteht, dass es sich um Tabellen-Zellen handelt. Ich kriege diese schon an die richtige Stelle geschoben mittels CSS. Aber sie überlagern sich. Ist es möglich, zwischen jeder Zelle quasi einen Abstand zu erzeugen, der eben dynamisch dazugepackt wird?

    Entweder top oder margin-top mit jeweils steigenden Werten setzen, würde ich sagen. (Oder vielleicht auch translate.)

    Die Auswahl dieser Elemente habe ich bereits mit :nth-child(n+7) gelöst.

    Darauf wird’s dann auch für eben genanntes hinauslaufen – entweder basierend auf Nummer der Zelle in der Zeile, oder Zeile in der Tabelle (je nachdem, was genau du wie „verschieben“ willst). Wenn du das für alle 400+ mit unterschiedlichen Werten brauchst, wird es aber eine ganz schön lange Reihe an nth-child Selektoren …

    MfG ChrisB

    --
    Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
    1. Ich habe es nun gelöst. War doch einfacher als erwartet.

      position:relative;
      display:block;
      top:-...;
      left:-...;

      Und schon konnte ich alles so verschieben, wie ich es wollte. Und die Reihenfolge bleibt :P