@@stahlwanne
ich würde mich als guten Anfänger bezeichnen
Wann hast du denn angefangen? Deinem Code nach ist das schon etliche Jahre her.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Verwende <!DOCTYPE html>
, nichts anderes.
<html>
Hier fehlt die notwendige Angabe der Sprache des Seiteninhalts. Für deutschsprachige Seiten: <html lang="de">
.
<head> <meta http-equiv="Content-Type" content="text/html; charset=Cp1252" />
Verwende als Zeichencodierung UTF-8, nichts anderes. Das heißt: die Dateien UTF-8-codiert speichern und das angeben: <meta charset="UTF-8"/>
.
<title>Podcast</title> </head>
Da fehlt dann noch die Viewport-Angabe <meta name="viewport" content="width=device-width, initial-scale=1.0">
für responsive Webseiten. Und du solltest dir Gedanken machen, wie deine Tabelle auf einem Smartphone dargestellt werden soll. Horizontal scrollen?
Das hier hat bei mir nicht funktioniert.
Du hast das auch nicht so wie’s dort steht stand umgesetzt:
thead { position : sticky; position : -webkit-sticky;
Die zweite Angabe überschreibt die erste, d.h. es gilt nicht der richtige Wert sticky
, sondern -webkit-sticky
, den viele Browser gar nicht oder nicht mehr verstehen.
Merke: Angaben mit Vendor-Präfix gehören (wenn man sie überhaupt verwendet) immer vor die richtigen Angaben. Aber eigentlich sollte man die überhaupt nicht verwenden. Im Falle von sticky
ist das auch überhaupt nicht nötig. Ich hab das gleich mal aus dem Wiki geschmissen.
Ebenfalls veraltet ist dor der Hinweis auf den Chromium-Bug, der ist inzwischen gefixt. Chrome und Edge können thead { position: sticky }
. Kann bitte jemand mit den erforderlichen Rechten das Beispiel aktualisieren und dann den Absatz „Beachten Sie“ löschen?
Laut Can I Use verwendet der aktuelle Opera noch eine veraltete Chromium-Version? Das soll aber nicht weiter stören; Opera-Nutzer gibt es so gut wie keine und dann haben die halt nicht das Vergnügen des feststehenden Tabellenkopfes (progressive enhancement).
Deswegen hier meine Frage: Welcher "Codeschnipsel" fehlt noch an welcher Stelle?
Es sind einige Codeschnipsel zu viel: alle weiteren Angaben von position: sticky
außer der für thead
.
p,h1,h2,h3,h4,ul,ol,li,div,td,th,thead,address,blockquote,nobr,b,i { font-family : Verdana, Helvetica, Arial; color : #0404B4; font-size : 9pt; }
Das macht so auch keinen Sinn, die Schriftart und -größe für alle möglichen Elemente zu setzen und sie dann für Überschriften nochmal zu überschreiben. Gib die Basis-Schrift für body
an, die wird dann vererbt.
Verdana war mal angesagt als es noch Röhrenmonitore gab. Auch Helvetica und Arial sind keine besonders guten Schriften zum Lesen. Und dann sollte am Ende auch die generische sans-serif
nicht fehlen, sonst wird auf Systemen, wo weder Verdana noch Helvetica noch Arial installiert ist, die Standardschriftart des Browsers verwendet, und das ist (wenn die Nutzerïn die Einstellung nicht geändert hat) eine Serifenschrift (i.d.R. Times New Roman).
😷 LLAP
„Dann ist ja auch schrecklich, dass wir in einem Land leben, in dem nicht nur Bildungswillige leben, sondern auch hinreichende Zahlen von Bekloppten. Das darf ich so locker formulieren, ich bin ja jetzt Rentner und muss nicht mehr auf jedes Wort achten.“
— Joachim Gauck über Impfgegner