Beiträge von Sempervivum

Du musst html() statt text() verwenden,

HTML ignoriert Zeilenumbrüche bei der Darstellung bzw. setzt sie in ein Leerzeichen um. Du musst statt dessen <br> verwenden.

Zitat

Beim Attribute type=checkbox wird der Focus mit übernohmen da bleibt das Fenster offen.

Bei mir nicht (Opera). Browserspezifisch?

Zitat

Zitat
wieder mit einem negativen Margin darüber zu positionieren.

da würde ich aber auch den Focus verlieren

Da hast Du wohl Recht, habe ich nicht bis zu Ende gedacht.

Dann bleibt wahrscheinlich nur Javascript.

Wo kommt denn die Fehlermeldung, in der Console? Sieht stark nach JSON aus.

Da der Button vom Typ "submit" ist, und Du keine action im Formular angegeben hast, wird die Seite neu geladen, wenn Du ihn drückst.

Ist da u. U. noch mehr Javascript im Spiel?

PS: Da fehlt ein schließendes </div>. Außerdem sehe ich den Sinn nicht, einschl. der Pseudo-Tabelle.

PPS: Ein (unschöner) Workaround könnte sein, das Input und die Checkbox aus dem Focus-Element herauszunehmen und dann wieder mit einem negativen Margin darüber zu positionieren.

:focus-within wäre eine Lösung, wird aber leider von Microsoft nicht unterstützt:

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

Wenn Du einen Eventlistener inline registrierst, darfst Du nicht, wie bei addEventListener, eine Funktionsreferenz angeben, sondern einen Aufruf der Funktion:

onclick="machwas();"

Ich verwende dafür gern diesen Generator:

http://www.cssportal.com/css-tooltip-generator/

Oder, wenn es flexibler sein soll, Tooltipster:

http://iamceege.github.io/tooltipster/

Bitte Quellcode nicht als Bild sondern als Text. Dritter Button von rechts.

Viel zu kompliziert. So wird es genau so funktionieren:

Code
if (h) {
    // tue dies
} else {
    // tue das
}

Ja, ich mag diese Pseudoelemente auch nicht besonders, weil es ein bisschen undurchsichtig ist.

Der Kern der Sache ist dieses:

#player-play.blink .player__play-inner:before{
  animation: pulse-shadow 2s infinite;
}

@keyframes pulse-shadow {
    0% {
           border-color:  green;
    }
    50% {
           border-color:  white;
    }

    100% {
           border-color:  green;
    }
}

Die Klasse .blink fügst Du ja dem Element #player-play hinzu. Von diesem ausgehend muss man dann zu dem Element .player__play-inner gehen, wo die Pseudoelemente :before und :after die beiden Balken durch border-color darstellen. Für den zweiten Balken musst Du es nur erweitern:

#player-play.blink .player__play-inner:before, #player-play.blink .player__play-inner:after {
  animation: pulse-shadow 2s infinite;
}

Und der Kreis ist border direkt von #player-play.

*smile* ich dachte, wenn ich dir das Prinzip zeige, kannst Du es selber vervollständigen.

Das war ein falscher Link. Sieh mal hier, ob es das ist, was Du dir vorstellst:

https://jsfiddle.net/L183du58/2/

So blinkt es:

https://jsfiddle.net/yg2hnxg1/

Habe mich nach Method 1 in dem Link aus #259 gerichtet.

Das gängige Verfahren ist, dass es ein Topmenü nur einmal auf der Hauptseite gibt und dass dieses auch für die Unterseiten gilt.

Zitat

ertens holt er nicht die ganze seite. es wird nur das spiel angezeigt, der rest nicht .obwohl die seite auch ein topmenü hat.

Doch, er holt die ganze Seite. Das Topmenü von spiel1.html wird nicht angezeigt wegen Zeile 50 in topmenu.css:

#nav ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}

Wenn Du dir die Seite mit dem HTML-Inspektor ansiehst, siehst Du, dass alles eingezogen wird einschl. head und Navigation. Obwohl die Browser diesbezüglich tolerant sind, sollte das nicht sein, sondern nur das "Netto-HTML" ohne head, Navigation und body-Tags eingezogen werden.

Wo hast Du das denn her? Hier:

https://stackoverflow.com/questions/1060…-pseudo-element

steht:

Zitat

There's no way to give an HTML attribute of any kind to a psuedo element.

D. h. ein Pseudoelement kann keine Klasse haben.

Das Styling von Pseudoelementen wird z. B. hier beschrieben:

http://pankajparashar.com/posts/modify-pseudo-elements-css/

Mit margin:auto funktioniert es auch, wenn man display:flex für den umgebenden Container setzt:

https://stackoverflow.com/questions/3255…856609#33856609

(nach "Center a flex item vertically and horizontally" suchen).

Ja, das mit der vertikalen Zentrierung ist so eine Sache. vertical-align funktioniert nur in Tabellenzellen und für Bilder. Aber heute, wo es Flexbox gibt, ist es kein Problem mehr: align-items:center und justiy-content:center und es funktioniert.