Ergebnis 1 bis 10 von 10

Thema: Text bei Klick aufklappen

  1. #1
    midnight-noob
    Gast

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

    Code:
    <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" >
    <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>
    
    </body>
    </html>
    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Text bei Klick aufklappen

    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

  3. #3
    midnight-noob
    Gast

    Standard AW: Text bei Klick aufklappen

    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

  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Text bei Klick aufklappen

    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.

  5. #5
    Teeny
    Registriert seit
    11.08.2010
    Ort
    91217 Hersbruck
    Beiträge
    41
    Danke
    0
    Bekam 13 mal "Danke" in 13 Postings

    Standard AW: Text bei Klick aufklappen

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

  6. Folgende User finden die Antwort von resteverwerter gut:


  7. #6
    midnight-noob
    Gast

    Standard AW: Text bei Klick aufklappen

    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>
    Dann sieht es folgendermaßen aus:



    Was hab ich das falsch gemacht?

  8. #7
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Text bei Klick aufklappen

    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.

  9. #8
    Teeny
    Registriert seit
    11.08.2010
    Ort
    91217 Hersbruck
    Beiträge
    41
    Danke
    0
    Bekam 13 mal "Danke" in 13 Postings

    Standard AW: Text bei Klick aufklappen

    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
    Geändert von resteverwerter (31.08.2013 um 02:00 Uhr)

  10. Folgende User finden die Antwort von resteverwerter gut:


  11. #9
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Text bei Klick aufklappen

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

  12. #10
    midnight-noob
    Gast

    Standard AW: Text bei Klick aufklappen

    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

Ähnliche Themen

  1. Text per Klick öffnen
    Von Roland Rafael Repczuk im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 10.05.2009, 17:47
  2. Kann das funktionieren ? Bei Klick Text senden
    Von Arno112 im Forum HTML & CSS Forum
    Antworten: 18
    Letzter Beitrag: 06.08.2008, 17:45
  3. method POST mittels Klick auf Text
    Von felixstoessel im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 12
    Letzter Beitrag: 21.01.2008, 19:23
  4. Script "Klick auf Text und langer Text öffnet sich"
    Von enidan24 im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 21.05.2007, 02:23
  5. Nach Klick auf link text markieren
    Von RedMan im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 09.05.2007, 18:09

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •