Text bei Klick aufklappen

  • Hey. Also ich hab ein kleines Problem. Und zwar habe ich einen Code im Netz gefunden, der es ermöglicht, dass, wenn man auf ein Wort klickt, sich ein Text direkt unter dem Wort sozusagen "aufklappt". Der HTML-Code meiner Seite sieht folgendermaßen aus (Code bzgl. 'Aufklappen' ist fett markiert):



    Jetzt möchte ich aber gerne, dass die Links (die mit dem Code versehen werden) direkt nebeneinander und auch untereinander dargestellt werden. Sodass sich der aufklappbare Text quasi selbst den Weg freiräumt. Ich hoffe, ihr könnt mit meinen Ausführungen etwas anfangen.^^


    Ich komme da jetzt leider nicht weiter und wäre sehr dankbar, wenn ihr mir da helfen könntet. :)


    lg
    midnight

  • Bevor du dich an solche Dinge wagst, solltest du erst mal HTML und CSS Stand 2013 lernen, da dein Code auf den Stand von vor ca. 15 Jahren ist.


    Als TIPP verwende erst mal den http://validator.w3.org/#validate_by_input mit dem Doctype html5, der dir alle Fehler anzeigt.
    Mit Tabellen stellt man tabellarische Daten dar, kein Layout.


    Lesetipps:
    http://www.peterkropff.de/site/html/html.htm
    http://css-technik.de/css-examples/219_9/
    http://wiki.selfhtml.org/wiki/Startseite

  • Vielen Dank für die Lesetipps. Aber ehrlich gesagt bin ich in diesem Betätigungsfeld garnicht soo ehrgeizig, soll heissen: Ich habe nur eine kleine, private Website die ich mit Frontpage gebastelt habe. HTML kann ich so gut wie garnicht und suche im Prinzip nur nach einem geeigneten Code, um ihn in meine Website einzubauen.


    Das soll jetzt garnicht schnippisch o.ä. klingen, ich danke dir für deinen Beitrag! Aber wie gesagt, ich suche eigentlich nur einen fertigen Code, den ich verwenden kann.^^


    Liebe Grüße
    midnight

  • Fertigen Code gibt es hier nicht, den musst du dir schon selber schreiben, wir helfen nur bei Problemen. Ohne Eigeninnitiative wirst du dir wohl jemanden suchen müssen, der dir deine Seite erstellt. Frontpage ist ein denkbar ungünstiges Hilfsmittel. Nicht umsonst ist es vom Markt genommen worden.

  • Hallo midnight,
    explanator hat schon recht, es ist total schwierig durch Deinen Code durchzublicken, da html, css (Stil + Forrmatierung) und JavaScript (Interaktivität) wirld durcheinander gewürfelt waren.


    Ich habe Deinen Code einfach mal sortiert:


    1. Die erste Zeile muss <!doctype html> lauten


    2. Den Stil findest Du im (um unwichtige Einträge gekürzten) <head>
    Besser wäre eine eigene css-Datei, die Du mit format.css ja wohl schon hast.


    3. Im <body> steht nur noch der reine Inhalt, in wenige html-Tags semantisch (nach der Bedeutung) sortiert.
    Die Tabelle habe ich gelöscht, da sie hier wirklich keine Funktion hatte.


    Dadurch dass <div class="box_1"> (im css, bzw. style div.box_1) eine feste Höhe hatte, verschob sich auf der zweite div nicht nach unten. Wenn Du die feste Höhe rausnimmst, ist es so wie du wolltest.


    LG Matthias

  • Wow, das ist perfekt, vielen vielen Dank resteverwerter !!!!! Noch eine Frage habe ich: Wie kriege ich es hin, dass ich die Links auch nebeneinander setzen kann? Und irgendwie schaff ich es nicht, den Code zu erweitern. Ich habe mit folgendem Code versucht, einen weiteren Tag dadrunter zu setzen, aber das funktioniert irgendwie nicht:



    Dann sieht es folgendermaßen aus:


    [Blockierte Grafik: http://s7.directupload.net/images/130830/temp/x8gwqnuc.png]


    Was hab ich das falsch gemacht?

  • Mit versuchen und probieren wird das nichts.
    Wie wäre es denn, wenn du dich mal mit der Materie auseinandersetzt, will heissen lesen und lernen. Wenn du Anleitungen brauchst oder Seiten wo du nachlesen kannst sag Bescheid.
    Und du solltest die Seite mit einem normalen Texteditor erstellen, das lehrt am meisten. Notepad++ oder PSpad bieten sich da an, beide kostenlos.

  • Versuch und Irrtum ist gerade bei html und css noch möglich, wenn man die einzelnen Fachbegriffe noch nicht so darauf hat.


    Ich würde in der suche "div nebeneinader anzeigen" suchen.


    Die Lösung:


    Wenn Du einen Text mit mehreren Absätzen <p> hast, sollen die <p> ja untereinander dargestellt werden. So ist das auch mit deinen <div class="box_1"> und so weiter.
    Damit sie nebeneinanderstehen, gibst Du ihnen im css die Eigenschaft float:left;.


    eine Anmerkung:
    Wenn sie nebeneinander stehen sollen, wäre es ideal wenn sie die gleiche Breite und Höhe haben. Du kannst sie im html-Code mit <div class="box"> und im css mit


    div.box { /* (oder nur: .box) */
    position:relative;
    float:left;
    width: 250px;
    background:white; /* oder irgendeine hellere Farbe, da es jetzt nicht grad gut lesbar ist. */
    .....
    }


    gemeinsam stylen. Das wäre eleganter und übersichtlicher.


    LG Matthias

  • resteverwerter, vielen vielen Dank! Jetzt habe ich es genau so, wie ich es haben wollte. Großen Dank für deine Hilfe. :) Mach weiter so.


    Liebe Grüße
    midnight