CSS und HTML Code trennen

  • Hallo,

    ich bin Neuling im Bereich HTML und CSS. Für eine Webseite habe ich folgenden Code, den ich gerne in ein Style Sheet und in ein HTML Dokument trennen möchte. Bei diesem Versuch entsteht folgendes: Lokal (ich erstelle die Dateien im NVU) funktioniert dies einwandfrei. Sobald ich mein HTML und CSS auf den Server lade, funktioniert es nicht mehr (der gesamte Text wird eingeblendet, das aufklappen funktioniert nicht mehr).
    Lade ich aber den Code wie oben abgebildet als ein File hoch, funktioniert dies. Das heisst für mich, dass ich irgendwelche Fehler in der Trennung des Codes habe.
    Kann mir jemand weiterhelfen?

    Hier der Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>xxxx</title>

    <style type="text/css" media="screen,projection" title="Druckvorschau-semantic-Test">
    /*<![CDATA[*/

    * {
    margin: 0;
    padding: 0;
    }

    html, body {
    color: #000000;
    background-color: #FF9922;
    line-height: 1.45;
    }

    body {
    padding: 3em 1em;

    font-size: 100.01%;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    }

    div {
    border: 1px solid #000000;
    padding: 1em .5em;

    background-color: #FFFFFF;

    font-size: .8em;
    }

    p {
    margin: .5em;

    background-color: #EEEEEE;
    }


    a {
    color: #000000;
    }

    a:focus,
    a:active {
    background-color: #99CCFF;
    }


    a span {
    display: none;
    }

    a:focus span,
    a:active span
    {
    display: block;

    border: 0 none;
    padding: 1em;

    text-decoration: none;

    background-color: #99CCFF;
    }


    /*]]>*/
    </style>

    </head>
    <body>

    <div>



    blablabla
    <a href="#">aufklappen
    <span>rest vom text</span>
    </a>
    </p>


    blablabla
    <a href="#">aufklappen
    <span>rest vom text
    rest vom text</span>
    </a>
    </p>


    blablabla
    <a href="#">aufklappen
    <span>rest vom text</span>
    </a>
    </p>

    </div>

    </body>
    </html>

  • Ein Link wäre nicht schlecht, dann könnte man sich das mal genauer ansehen.

  • Und was funktioniert da nicht? Ich sehe da kein Problem? Das sind auch zwei unterschiedliche Seiten.

  • Also, beim ersten Link (mein Test) sieht man ja drei Zeilen, klickt man auf das Wort "aufklappen" erscheint der Text zu der dazugehörigen Zeile.
    So soll es sein.

    Beim zweiten Link habe ich den Code des ersten Links versucht in die entsprechende Seite einzubauen. Dort erscheint (zumindest bei mir) der gesamte Text, ohne dass ein Klick zum "aufklappen" notwendig ist.

    Dabei entsprechen die Überschriften in "bold" dem "blablabla" auf der Test Seite (erster Link).

    Sieht das bei Ihnen anders aus?

  • Also bei mir klappt das auf der eigentlichen Seite super.
    Nur das die Textfelder zugehen wenn man wo anders hinklickt. Instinktiv klicke ich aber immer erstmal auf die stelle wo ich sie aufgemacht habe. Auf das Feld "klick mich".

    Ansonsten Super im FF

  • Hmmm...merkwürdig. Welchen Browser benutzen Sie denn?
    Bei mir im IE 8.0.601 gehts nicht. Hat jemand eine Idee woran es liegen kann und wie man dem Abhilfe schaffen kann?
    Danke vorab.

  • Hmmm...merkwürdig. Welchen Browser benutzen Sie denn?
    Bei mir im IE 8.0.601 gehts nicht. Hat jemand eine Idee woran es liegen kann und wie man dem Abhilfe schaffen kann?
    Danke vorab.

    Nachtrag: jetzt stand ich auf der Leitung....im Firefox funktionierts, richtig? das ist echt seltsam, ich habs jetzt nochmal im IE, im Mozialla und im Safari ausprobiert, da funktioniert das auf- und zuklappen überall nicht....

    Ich bin dankbar für jeden Tipp, irgendwo ist da was unsauber und ich kann es nciht mehr erkennen.