Optionen ausblendbar verhält sich unterschiedlich

  • Hallo zusammen,


    ich habe ein kleines Layout-Problem mit einer Datei, finde den Fehler aber leider einfach nicht.

    Ich habe zwei "Flügel" auf jeder Seite des Bildrandes, die mit :hover aufgeklappt werden sollen. Soweit so gut, aus irgendeinem Grund klappt beim linken Flügel die Überschrift aber nicht mit auf, und ich sehe den Fehler einfach nicht, vielleicht auch ein bisschen Betriebsblind gerade.


    Hier der Teil der Seite inklusive dazu gehörigem css Teil:


    Vielen Dank für eure Mühe schon einmal.;)

  • Deine Idee ist kann so nicht funktionieren.

    Deine div's 'MailErgebnisse' und 'OptiErgebnisse' haben keine Breite... belegen damit auch keinen Platz.

    Der rechte Flügel funktioniert nur deswegen, weil dort (standardmäßig) das <p>...</p> sich links anordnet - so wie im linken Flügel auch, nur dass links eben links vom <p> nur ein leerer Container ohne Inhalt ist... na ja, wäre, wenn du die Reihenfolge im Quellcode änderst, so dass zuerst das <div> und dann das <p> kommt.


    Es wird aber trotzdem scheitern, weil in dem Augenblick, indem du deinen beiden Containern Inhalt hinzufügst, das Ganze Layout zerschossen wird... teste das mal, dann siehst du was ich meine.


    Du solltest überlegen, ob du diesen 'Einfliegeeffekt' der Flügel statt mit 'width' nicht besser durch 'margin-left: -xxx; bzw 'margin-right: -xxx; umsetzt.

  • Ok, besten Dank schon einmal für die Hilfe.

    Getreu Zitat Ashleigh Brilliant "Ich habe zwar keine Lösung, aber ich bewundere das Problem." habe ich das Problem zwar verstanden, einen Ansatz finde ich nur gerade nicht. ;)

    Das einzige was mir jetzt auf Anhieb einfällt, wäre, das mit einem script in js zu bewerkstelligen, aber dass kann ja nicht Sinn und Zweck sein. Finde leider auch auf Anhieb keine Seite bei der das so ist wie ich mir das vorgestellt habe, aber das muss doch über css möglich sein, oder ist das so speziell?

    Margin:... bringt im Endeffekt ja dass gleiche Ergebnis, nutzt mir also da leider auch nichts.

  • das mit einem script in js zu bewerkstelligen,

    das wäre möglich, aber damit hättest du die gleichen ungelösten Probleme, wie mit deinem jetzigen Ansatz.

    Außerdem - was man mit CSS erledigen kann, sollte man auch mit CSS machen.

    Und was machen Nutzer, die JavaScript deaktiviert haben?

    Margin:... bringt im Endeffekt ja dass gleiche Ergebnis, nutzt mir also da leider auch nichts.

    Das ist so nicht richtig! Mit dem 'width' Ansatz wird der Inhalt des divs (wenn der Flügel eingeklappt ist) lediglich gestaucht.. als zusammen gequetscht! Hast du das mal mit Inhalt in deinen divs probiert.

    Mit der margin Lösung wird der div (mit Inhalt) nach außen... aus dem Sichtbereich geschoben und kommt beim hover, so wie er angelegt ist, in den Sichtbereich geschwebt.

  • das wäre möglich, aber damit hättest du die gleichen ungelösten Probleme, wie mit deinem jetzigen Ansatz.

    Außerdem - was man mit CSS erledigen kann, sollte man auch mit CSS machen.

    Und was machen Nutzer, die JavaScript deaktiviert haben?

    Das ist so nicht richtig! Mit dem 'width' Ansatz wird der Inhalt des divs (wenn der Flügel eingeklappt ist) lediglich gestaucht.. als zusammen gequetscht! Hast du das mal mit Inhalt in deinen divs probiert.

    Mit der margin Lösung wird der div (mit Inhalt) nach außen... aus dem Sichtbereich geschoben und kommt beim hover, so wie er angelegt ist, in den Sichtbereich geschwebt.

    Jetzt ist der Groschen gefallen!


    Perfekt, so funktioniert es.


    Vielen Dank Sailor, auch für das Beispiel, das werde ich mir jetzt mal noch in Ruhe zu Gemüte führen. ;)