HILFE: Reproduzieren eines Aufklapptextes

  • Hallo liebe Community,


    ich versuche mich nach etlichen Jahren mal wieder daran für eine Bekanntschaft eine Website zu bauen. Soweit funktioniert alles ganz gut. In meiner aktuellen Sitzung8o möchte ich gerne den Content-Bereich mit Klapptexten füllen sodass man nicht sofort mit Text umgehauen wird. Ich habe mir hierfür ein Youtube-Tutorial herausgesucht und dieses entsprechend umgesetzt auf meine Bedürfnisse. Der erste Klapptext funktionierte einwandfrei. Das Scaling stimmt etc... Jedoch wenn ich nun einen zweiten Klapptext Copy&Paste wachsen diese ineinander zusammen, ohne das sie überhaupt aufgeklappt sind. Ich kann das leider nur schwer beschreiben. Ich dachte zuerst an die CLASSes und IDs und habe diese individualisiert sodass jeder sein "eigenes Reich" hat.. mit eher wenig Erfolg.


    Vielleicht kann mir jemand hierbei helfen sodass ich zumind. drei dieser Klapptexte in meinen Content-Bereich integrieren kann oder gar einen neuen Ansatz der von einem *newb*;( wie mir umgesetzt werden kann?


    Vielen Dank für eure Hilfe!





  • Da sehe ich zwei Hauptprobleme:

    1. Ein überflüssiges span-Tag innerhalb des Label. Dadurch überlappen sich die Labels.

    2. Eine ID muss auf der Seite eindeutig sein. Daher wirkt ein Klick auf das zweite Label auf den ersten Inhalt. Du musst für jedes Label-Input-Paar eine eigene ID verwenden.

    Davon abgesehen ist nav und ul für den Inhalt, der aufgeklappt wird, wenig angebracht. Besser z. B. ein section-Tag und den Inhalt darin mit Überschrift und Abschnitten strukturieren.

  • Hallo Sempervivum,


    Vielen Dank für deine Antwort. Punkt eins werde ich mir direkt anschauen. Ich hatte es so verstanden dass dieses Notwendig sei. Danke für den Tipp! Die IDs hatte ich bereits eindeutig gemacht. Heißt ich habe dafür gesorgt das im zweiten Klapptext jede ID ein Unikat ist und somit nirgendwo anders zu finden ist. Leider änderte dies nichts an dem stark verschobenen Bild. Ich werde beides umsetzen und mich mal mit dem section-Tag auseinander setzen. Klingt natürlich deutlich besser so wie ich das jetzt verstehe.


    Ich werde mich melden. Vielen Dank!

  • Erneut Hallo Sempervivum,


    Das <span/> habe ich direkt abgelöst. Ebenfalls habe ich erneut einen Zweiten Klapptext erstellt und mit individuellen ID's versorgt. Und genau an dieser Stelle ist mir mein grober Fehler klar geworden - ich vergaß die style.css entsprechend zu erweitern =O8|:wacko:. Ist wohl den letzten Nächten anzuhängen da ich einfach nicht mehr aufhören konnte ^^.

    Ebenfalls habe ich mir das section-tag angeschaut und baue dieses ebenfalls mit in die Seite ein. Aktuell soll nur das grobe Design ziemlich final sein und der Inhalt, einschließlich Klapptext, Google-Map etc., soll noch als Demo dienen sodass sich entschieden werden kann wie es final aussehen soll.


    Meinen herzlichsten Dank!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!