Text bei Klick aufklappen

midnight-noob

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):

HTML

<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<meta name="author" content="J&uuml;rgen Asendorf">
<title>Hey, wenns dir nicht gefällt, mach neu. </title>
<meta name="expires" content="20 days">
<meta name="revisit" content="after 21 days">
<meta name="page-type" content="beschreibung, anleitung,private homepage">
<meta name="audience" content="studenten,sch&uuml;ler,anf&auml;nger,alle">
<meta name="robots" content="INDEX,FOLLOW">


<script>
<!--
function BlurLinks(){
lnks=document.getElementsByTagName('a');
for(i=0;i<lnks.length;i++){
lnks[i].onfocus=new Function("if(this.blur)this.blur()");
}
}


onload=BlurLinks;
-->
</script>
<!--Ein Entfernen des Copyright-Vermerks kann rechtliche Schritte nach sich ziehen.-->
<!--(c) Copyright der Vorlage liegt bei http://www.on-mouseover.de/templates/-->
<link rel="stylesheet" type="text/css" href="format.css" >
[B]<script language="javascript" type="text/javascript">
function toggleNode(node)
      {
        var nodeArray = node.childNodes;
        for(i=0; i < nodeArray.length; i++)
        {
          node = nodeArray[i];
          if (node.tagName && node.tagName.toLowerCase() == 'div')
            node.style.display = (node.style.display == 'block') ? 'none' : 'block';
        }
      }
</script>
</head>
<body class="inl" topmargin="10" marginheight="10"  leftmargin="10" marginwidth="10" scroll="yes" style="background-color: #000000; background-image: url('')" >






<table border="0" width="474">
    <tr>
        <td width="258" valign="top">






<div  style="border:0px solid green;width:258px;  text-align:center; height:150px"><p onclick="toggleNode(this.parentNode); return  false;">
    <font color="#815630">Tag 24<img border="0" src="stern.gif" width="7" height="5" align="top"></font></p>
    <div style="display: none;" border="1px">
        <p align="center">






<b><a href="http://images.fringo.de/userfiles/i/G/H/I/H/dmudpALqMG18Rz2r4rbUd0.jpg" target="_blank"><img src="http://www.rauchfrei.x-pressive.com/footer1377371490_5530.png" alt="Rauchfrei-Ticker by X-PRESSIVE.COM" border="0" /></a><br>
<br>
&nbsp;</b> <br>
<font color="#815630">Fick dich, Tabak. Ich (b)rauch dich nicht.</font><br>




</p></div></div>


        <p>&nbsp;</td>
        <td width="206" valign="top">






<div  style="border:0px solid green;width:204px;  text-align:center; height:61px"><p onclick="toggleNode(this.parentNode); return  false;">
    <font color="#815630">Tag 28</font></p>
    <div style="display: none;" border="1px"><font color="#815630">So langsam
        wird's was mit der Homepage. :)</font></div></div>


        <p>&nbsp;</td>
    </tr>
</table>
[/B]
</body>
</html>

Alles anzeigen

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

explanator

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

midnight-noob

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

explanator

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.

resteverwerter

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:

Code

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Ein Klappauf-Mechanismus">
    <meta name="author" content="J&uuml;rgen Asendorf">
    <title>Hey, wenns dir nicht gefällt, mach neu. </title>




<script>
    function BlurLinks(){
        lnks=document.getElementsByTagName('a');

        for(i=0;i<lnks.length;i++){
            lnks[i].onfocus=new Function("if(this.blur)this.blur()");
            }
    }


    onload=BlurLinks;


    function toggleNode(node)
          {
            var nodeArray = node.childNodes;
            for(i=0; i < nodeArray.length; i++)
            {
              node = nodeArray[i];
              if (node.tagName && node.tagName.toLowerCase() == 'div')
                node.style.display = (node.style.display == 'block') ? 'none' : 'block';
            }
      }
</script>


<link rel="stylesheet" type="text/css" href="format.css" >




<style>
body{
    background-color: #000000;
}
div.box_1{
    position:relative;
    border:0px solid green;
    width:258px;  


    text-align:center; 
}
div.box_2{
    position:relative;
    border:0px solid green;
    width:204px;  
    height:61px;
    text-align:center; 
}
div.versteckt {
    postion:relative;
    display: none;
    border:1px #815630;
}


p{
    color:#815630;
}


</style>


</head>
<body>


<div class="box_1">
    <p onclick="toggleNode(this.parentNode); return  false;">
        Tag 24<img border="0" src="stern.gif" width="7" height="5" align="top">
    </p>
    <div class="versteckt">
    <p>
            <a href="http://images.fringo.de/userfiles/i/G/H/I/H/dmudpALqMG18Rz2r4rbUd0.jpg">
                <img src="http://www.rauchfrei.x-pressive.com/footer1377371490_5530.png" alt="Rauchfrei-Ticker by X-PRESSIVE.COM" border="0" />
            </a>

            Fick dich, Tabak. Ich (b)rauch dich nicht.
        </p>
    </div>
</div>


<div class="box_2"> 
    <p onclick="toggleNode(this.parentNode); return  false;">
    Tag 28
    </p>
    <div class="versteckt">
        <p>
            So langsam wird's was mit der Homepage. :)
        </p>
    </div>
</div>


</body>
</html>

Alles anzeigen

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

midnight-noob

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:

Code

<!doctype html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Ein Klappauf-Mechanismus">
    <meta name="author" content="J&uuml;rgen Asendorf">
    <title>Hey, wenns dir nicht gefällt, mach neu. </title>




<script>
    function BlurLinks(){
        lnks=document.getElementsByTagName('a');

        for(i=0;i<lnks.length;i++){
            lnks[i].onfocus=new Function("if(this.blur)this.blur()");
            }
    }


    onload=BlurLinks;


    function toggleNode(node)
          {
            var nodeArray = node.childNodes;
            for(i=0; i < nodeArray.length; i++)
            {
              node = nodeArray[i];
              if (node.tagName && node.tagName.toLowerCase() == 'div')
                node.style.display = (node.style.display == 'block') ? 'none' : 'block';
            }
      }
</script>


<link rel="stylesheet" type="text/css" href="format.css" >




<style>
body{
    background-color: #000000;
}
div.box_1{
    position:relative;
    border:0px solid green;
    width:258px;  


    text-align:center; 
}
div.box_2{
    position:relative;
    border:0px solid green;
    width:204px;  
    height:61px;
    text-align:center; 
}
div.box_3{
    position:relative;
    border:0px solid green;
    width:204px;  
    height:61px;
    text-align:center; 
}
div.versteckt {
    postion:relative;
    display: none;
    border:1px #815630;
}


p{
    color:#815630;
}


</style>


</head>
<body>


<div class="box_1">
    <p onclick="toggleNode(this.parentNode); return  false;">
        Tag 24</p>
    <div class="versteckt">
    <p>
            <a href="http://images.fringo.de/userfiles/i/G/H/I/H/dmudpALqMG18Rz2r4rbUd0.jpg">
                <img src="footer1377371490_5530.png" alt="Rauchfrei-Ticker by X-PRESSIVE.COM" border="0" />
            </a>

            Fick dich, Tabak. Ich (b)rauch dich nicht.
        </p>
    </div>
</div>


<div class="box_2"> 
    <p onclick="toggleNode(this.parentNode); return  false;">
    Tag 28</p>
    <div class="versteckt">
        <p>
            So langsam wird's was mit der Homepage. :)
        </p>
    </div>
</div>


<div class="box_3" style="width: 204px; height: 22px"> 
    <p onclick="toggleNode(this.parentNode); return  false;">
    Tag 29</p>
    <div class="versteckt">
        <p>
            So langsam wird's was mit der Homepage. :)
        </p>
    </div>
</div>


</body>
</html>

Alles anzeigen

Dann sieht es folgendermaßen aus:

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

Was hab ich das falsch gemacht?

explanator

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.

resteverwerter

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

explanator

Wobei position:relative hier überflüssig ist, da es nichts zu positionieren gibt bei float.

midnight-noob

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