CSS-Klasse einbauen funktioniert nicht

  • Hallo,

    auf meiner alten Page hatte ich eine INFO eingebaut, bei der ein Fenster mit einem Text aufgeht, wenn man mit der Maus auf die farblich abgehobene Textfläche INFO zeigt.

    Das funktionierte wunderbar, nur hier in Zeta nicht...

    Hat jemand eine Ahnung, wo der Hase im Pfeffer liegt?

    Vielen Dank für einen Tipp und viele Grüße

    Norbert

    HTML:

    <a class="info" href="#">Info<span> TEXTTEXTTEXT <br /></span></a>
    <span style="font-style: italic;">(Bitte mit der Maus auf diese hell unterlegte Fläche zeigen!)</span><br />


    CSS (eingebunden auf der entsprechenden Seite unter Attribute - Standard - mobile_script):

    <style>
    a.info
    {
    position:relative;
    z-index:1;
    background-color:#C6B292;
    color:#000000;
    text-decoration:none;
    }
    a.info:hover
    {
    z-index:2;
    background-color:#C3B59F;
    }
    a.info span
    {
    display: none;
    }
    a.info:hover span
    {
    display:block;
    position:absolute;
    top:2em;
    left:-4em;
    width:25em;
    border:1px solid #12127D;
    background-color:#C3B59F;
    color:#000;
    text-align: left;
    padding: 5px;
    font-size: 0.8em;
    }
    </style>

  • Hallo Norbert,

    habe eben deinen 2 Codes 1zu1 übernommen und in ein Testprojekt eingebaut.
    Siehe hier: https://hosting.zeta-producer.com/4407981463/index.html (Info unter der Kopfgrafik).
    Ist das der gewünschte Effekt?

    Wenn ja, dann passt dein Code.
    Beschreibe dann mal bitte, wie du genau der "HTML-Teil" eingefügt hast.
    Ich vermute das dort evtl. der Fehler liegen könnte.

    Tipp am Rande dazu: Wenn du das auf mehreren Seiten haben möchtest, dann kannst du den CSS-Teil, auch so einbauen: https://docs.zeta-producer.com/eigenes-css-einfuegen.html

    Gruß
    Jochen

  • YESS, JOCHEN!

    So soll es aussehen! Bei mir wird aber nur der komplette Text angezeigt, ohne die CSS-Formatierung.
    Tja, was habe ich gemacht? Mal nachvollziehen...

    Okay: Seite im HTML-Modus geöffnet und den Code so eingeben, wie du hier siehst: shot info2. Hier siehst du auch das Ergebnis. Allerdings in anderem Design, ich habe die Vorlage komplett umgebaut, war nicht mein Ding... :)

    Jetzt schon herzlichen Dank für deine Mühe!

  • Widget HTML-Quelltext nutzen, nicht Text

    Dieser Code kann problemlos im Text-Widget eingesetzt werden.
    Hab ich in meinem funktionierenden Beispiel auch so gemacht, und in den Screenshots von Norbert ist ersichtlich, das die "HTML-Quelltext-Anzeige" aktiv ist > Also das stimmt schon so.

    Norbert: Poste mal bitte den gesamten Teil hier, so das man das selber nachbauen kann.
    Der "Abschnitt" bei dir sieht ein bisschen anders aus, wie bei mir (vermutlich liegt darin der Fehler).

    Bzw. kann man das schon irgendwo "online" sehen?

    Ich bin aber erst wieder morgen hier :)

    Gute Nacht.

    Gruß
    Jochen

  • Hallo Norbert,

    kopier dir mal bitte folgenden Code (ohne Zeilennummern) in die HTML-Quelltext-Ansicht des Artikels bei dir rein, und überprüfe ob es damit bei dir dann auch geht?

    Code
    <p><a class="info" href="#">Info<span>Hier den Text reinschreiben, der dargestellt werden soll, wenn auf "Info" mit der Maus gefahren wird.<br></a></p><span style="FONT-STYLE: italic">(Bitte mit der Maus auf diese hell unterlegte Fläche 
    zeigen!)</span><br>

    Gruß
    Jochen

  • Hallo Jochen,

    es funktioniert tatsächlich!!! :thumbup:

    Es liegt wirklich nur am <p> </p> !!! Und warum hat es dann früher funktioniert?

    Super jedenfalls; auf diese Idee wäre ich nicht gekommen... Ganz herzlichen Dank! Jetzt weiß ich, wie ich künftig vorgehen muss.
    Das Ergebnis seht Ihr hier: http://museumsgarten.donnerhuf.de/was-ist-dieser-museumsgarten.html

    Ach ja, sehr seltsam: sobald ich etwas ändere, auch wenn es nur ein einziges Zeichen ist (selbst im Text!), habe ich das Dilemma wie vorher. Ich muss den Code im Editor ändern und dann wieder drüberkopieren.

    Viele Grüße

    Norbert

Jetzt mitmachen!

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