[CSS] Reihenfolge der Elemente bei float:left

Dieses Thema im Forum "Webdesign" wurde erstellt von fc-volker, 19. Januar 2011 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 19. Januar 2011
    Reihenfolge der Elemente bei float:left

    Als erstes habe ich einen DIV Container erstellt, 600x600 und ihn mit margin:auto zentriert.

    Nun haben in diesem Container 16 Bilder Platz mit je Grösse 150x150, die diesen Container komplett ausfüllen sollen. Daher hat jedes Bild einen DIV-Container mit float:left.
    Sie haben alle Platz, soweit passt es.
    Die Bilder sind nicht mit IMG-Tag sondern als DIV-Tag mit Hintergrundbild erstellt.

    All diese 16 DIV-Tags sind auf position:relative; left:0;top:0; gesetzt. Das scheint aber soweit eh keinen sichtlichen Unterschied zu machen. (Wenn ich die 3 Settings rausnehme, ändert sich nichts).

    Problem ist, dass er die Bilder immer in der Reihenfolge: 1 4 3 2 anzeigt. Und nicht in der Reihenfolge meiner HTML Tags, wie ich sie von oben nach unten einfügte:


    So hatte ich es drin, und Ergebnis zeigt alles vertauscht an:
    HTML:
    <div class="pic" id="pic1"></div>
    <div class="pic" id="pic2"></div>
    <div class="pic" id="pic3"></div>
    <div class="pic" id="pic4"></div>
    ...
    So habe ich meinen Code jetzt, damit er mir die richtige Reihenfolge anzeigt:
    HTML:
    <div class="pic" id="pic1"></div>
    <div class="pic" id="pic4"></div>
    <div class="pic" id="pic3"></div>
    <div class="pic" id="pic2"></div>
    
    <div class="pic" id="pic5"></div>
    <div class="pic" id="pic8"></div>
    <div class="pic" id="pic7"></div>
    <div class="pic" id="pic6"></div>
    
    <div class="pic" id="pic9"></div>
    <div class="pic" id="pic12"></div>
    <div class="pic" id="pic11"></div>
    <div class="pic" id="pic10"></div>
    
    <div class="pic" id="pic13"></div>
    <div class="pic" id="pic16"></div>
    <div class="pic" id="pic15"></div>
    <div class="pic" id="pic14"></div>
    Allerdings ist es jetzt gerade mal horiziontal richtig.
    Um es vertikal richtigzustellen habe ich jetzt noch das selbe Spiel vor mir.
    Aber ich will die Sache richtig machen und das kann kann ja nicht Sinn der Sache sein...

    Was habe ich denn falsch gemacht? Oder wo kann ich die Reihenfolge bestimmen. Mit z-index hat das denke ich nichts zu tun.

    In Firefox und Opera gleiches Ergebnis.
     
  2. 19. Januar 2011
    AW: Reihenfolge der Elemente bei float:left

    Dein Problem kann ich nicht nachvollziehen:
    http://nanobyte-online.de/versuchslabor/rrb-topic-764378.html
     
  3. 19. Januar 2011
    AW: Reihenfolge der Elemente bei float:left

    Ok ich bin schon einen Schritt weiter. Habe die DIV Container nummeriert und sie werden tatsächlich in der richtigen Reihenfolge gezeigt.

    Das Problem lag an background-position: 0px 150px;
    Ich musste alle weiteren Positionsangeben mit einem Minus versehen

    background-position: 0px -150px;

    Daher waren nur diejenigen mit 0-Angaben richtig.
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.