mehrere Relative DIV mit zwei absoluten DIVs

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • mehrere Relative DIV mit zwei absoluten DIVs

    Hallo Leute,

    CSS war noch nie meine größte Stärke, bisher konnte ich mir aber immer irgendwie helfen.


    Also der Aufbau ist so:

    Ich möchte mehrere Bilder nebeneinander positionieren. (generell ja kein Problem)

    Das Bild packe ich in einen relativen DIV. In diesen DIV packe ich zwei Absolute DIV's mit jeweils einen IMG drin.

    Grund ist dieser, dass ich mit jQuery und hover das zweite Bild über dem ersten anzeigen lasse.(Ähnlich wie die Löschfunktion bei Dropbox) Funktioniert auch alles so wie es soll.
    Sobald ich das ganze aber jetzt nach links floate. (float:left), damit die Bilder schön nebeinenader sind und nicht untereinander super viel Platzt verschwenden, verschwindet einfach alles.


    Sieht so aus:


    CSS-Quellcode

    1. <style>
    4. #parent{
    5. position:relative;
    6. }
    9. .child_1, .child_2 {
    10. position: absolute;
    11. }
    14. </style>
    Alles anzeigen


    HTML-Quellcode

    1. <a download="'.$f.'" title="'.$f.'" href="'.$filepa.$f.'" data-dialog>
    2. <div id="parent">
    3. <div class="child_1"><img src="'.$filepa.'thumbnail/'.$f.'"></div>
    4. <div class="child_2" style="display:none"><label for="'.$f.'"><img src="images/error.png" title="'.$f.'"></label></div>
    5. </div>
    6. </a>



    Wo ist mein Denkfehler? Einzel programmiert funktioniert alles. Aber kombiniert nicht mehr.

    Danke für jede Hilfe :)

    Gruß
    Norbert

  • Hey bYemma, sorry wollte schon früher antworten aber es kam immer etwas dazwischen.

    Deine Lösung ist sehr sauber, kompakt, übersichtlich und sogar die ganzen funktionen ohne Javascript. Das ist natürlich sehr nice, vielen Dank,


    Ich habe zur Not noch eine gefunden, nachdem mir jemand von flexboxen erzählt hat die es seit CSS 3.0 gibt.
    Da fallen die lästigen Float geschichten weg. Diese flexbox ist aufjedenfall auch sehr interessant.