Schau einmal unter Windows > Preferences > Oomph > Setup Tasks > Preference Recorder, ob du irgendwann versehentlich ein ständiges Zurücksetzen der Einstellung aktiviert hast. Ebenso findest du unter Navigate > Open Setup > User noch einmal die aktuell eingestellten Tasks bezüglich der automatischen Änderung deiner Einstellungen.

...zur Antwort

Gehe in Tools > Options > IntelliCode > General (bzw. Extras > Optionen > IntelliCode > Allgemein). Dort gibt es eine Option Show completions for whole lines of code (bzw. Vervollständigungen ganzer Zeilen anzeigen), die deaktiviert werden muss.

Alternativ kannst du ebenso auf das kleine violette Schraubenschlüssel-Glühbirnen-Symbol klicken, welches sich in der Statusleiste des Texteditors befindet. Im sich daraufhin öffnenden Kontextmenü findest du die Option auch noch einmal.

...zur Antwort

Lade das Bild erst in eine BufferedImage-Instanz. Danach kannst du es mit der drawImage-Methode zeichnen.

Beispiel:

class SomeComponent extends JPanel {
  private BufferedImage image;
  private AffineTransform transform;

  public SomeComponent() {
    try {
      image = ImageIO.read(getClass().getClassLoader().getResourceAsStream("resource path to image"));
    }
    catch (IOException ex) {
      // handle exception ...
    }

    transform = new AffineTransform();
    transform.translate(0, 0); // location where to draw
    // set transformations, if necessary ...
  }

  @Override
  public void paintComponent(Graphics graphics) {
    var graphics2d = (Graphics2D) graphics;

    if (image != null) {
      graphics2d.drawImage(image, transform, null);
    }
  }
}

Falls dir getResourceAsStream noch unbekannt sein sollte, lies diesen Artikel von Mkyong.

...zur Antwort

So wie es sich anhört, brauchst du wohl nur ein Formular mit einem einzigen Textfeld. Wenn der Nutzer das Formular abschickt, wird das aktuelle Datum ermittelt und geprüft, ob es schon in der Excel-Datei existiert. Wenn nicht, wird das neue Wertepaar (Datum und Text) in einer neuen Zeile angehängt.

Den aktuellen Tag bekommst du über die DateTime-Klasse.

Beispiel:

$datetime = new DateTime('today');
echo $datetime->format('d.m.Y');

Mit PhpSpreadsheet kannst du Excel-Dateien schreiben und lesen. Alternativ könntest du auch einfach die Daten mit den Filesystem-Funktionen von PHP im CSV-Format serialisieren und später manuell in Excel importieren.

Diesen ganzen Prozess sehe ich als eine Aufgabe, die gänzlich dem Backend überlassen ist. Schließlich soll die Excel-Datei doch zentral und geschützt vor der Manipulation des Nutzers verwaltet werden.

...zur Antwort
(...) und kenne auch die Grundlagen(z.B. bis hin (...) Interfaces (...)

Einfach da du sie explizit aufzählst: Wenn dir andere OOP-Konzepte (Abstraktion, Kapselung, Polymorphie, Vererbung) noch nicht geläufig sind, wäre das etwas, was du direkt auf deinen nächsten Lehrplan setzen könntest.

Zwei Features, die mir in dem Zusammenhang noch einfallen, sind Threading und Reflection.

Wie Java Kenntnisse vertiefen?

Befasse dich mit Entwurfs- und Architekturmustern. Direkt dazu wäre es praktisch, sich Projekte zu suchen, die ruhig auf typischen Java-Technologien (JavaFX, Swing, Spring, Jakarta EE, Struts, ...) aufbauen, in die du dich somit folglich auch weiter einarbeiten kannst.

Ein paar Ideen hatte ich in diesem Beitrag schon einmal aufgeführt.

Da es damit schon mehr in Richtung tatsächlicher Softwareentwicklung geht, würde ich dir zusätzlich empfehlen, Test Driven Development (TDD) einfließen zu lassen. Tools wie z.B. JUnit, Mockito oder AssertJ sind hierbei recht nützlich.

Drumherum gibt es natürlich noch weitere Tools, mit denen man sich einmal genauer auseinandergesetzt haben sollte. Sei es das Modulsystem von Java, UML, Buildtools wie Maven und Gradle, Versionsverwaltungssoftware wie Git oder Datenbankdesign und -management.

Du könntest dir im Übrigen auch ein spezifisches Themenfeld heraussuchen (z.B. Entwicklung von Android Apps, Spieleentwicklung, ...) und dich darin vertiefen.

...zur Antwort

Nein, als explizit schwer würde ich es nicht bezeichnen.

Es setzt bezogen auf das Skripting allerdings voraus, dass du mit den C#-Grundlagen (wozu auch die OOP gehört) wenigstens schon halbwegs sicher zugange bist.

Des Weiteren sind Englischkenntnisse von Vorteil, da die meisten empfehlenswerten Lernquellen englischsprachig sind.

Je nachdem, was du dir später als Projekt vornimmst, ist es außerdem günstig, wenn man schon ein paar Algorithmen oder Datenstrukturen kennt (z.B. verschiedene Tree-Arten, Binary Heap, Hashtables, Suchalgorithmen wie A*, Alpha-Beta-Suche; Dijkstra, ...).

Bezüglich eines Einstiegs in Unity sollte die offizielle Webseite die erste Anlaufstelle sein. Im Hauptmenü findest du unter anderem Verweise auf die Dokumentation und Lernplattform.

Auf YouTube kannst du zudem auf die Kanäle von Brackeys, Code Monkey und Dapper Dino schauen.

Ist Unity (...) für (...) software mit GUI (...)

Unity ist eine Game Engine, also auch explizit für die Spieleentwicklung konzipiert. Wenn du eine Anwendung mit grafischer Oberfläche, aber kein Spiel entwickeln möchtest, wäre es auch ratsam, stattdessen ein dafür passendes GUI-Toolkit zu verwenden. Zum einen erspart es dem späteren Produkt an Overhead, der durch die Engine kommt und zum anderen hast du es in der Entwicklung leichter, wenn das Tool, mit dem du arbeitest, für deinen Anwendungsfall besser ausgerichtet ist.

Seitens C#/.NET könntest du mit WPF, MAUI oder Avalonia UI arbeiten.

...zur Antwort

Zu allen drei Sprachen gibt es gute Literatur:

  • C: Programmieren von Anfang an - H. Erlenkötter (das Buch ist zwar schon recht alt, aber dafür sehr gut für Einsteiger geschrieben)
  • C++: Schau nach Büchern von Breymann, Theis oder Will, die mindestens Version 17 behandelt und bestenfalls eine neuere (die letzte Version ist die 23)
  • C#: Schau nach Büchern von Kühnel oder Theis. Empfehlenswert ist auch Schrödinger programmiert C# von Wurm oder Head First C# von Stellman & Greene.

Online kannst du

  • für C++ auf Learn C++ schauen.
  • für C# gibt es Microsoft Learn.
  • Lernkurse auf Codecademy oder Hyperskill finden. Videokurse gibt es bei PluralSight oder Udemy. Auf dem YouTube-Account von Microsoft Developer ist außerdem noch ein Tutorial von Bob Tabor (C# Fundamentals for Beginners).

Entscheide dich für eine von den drei Sprachen und richte dir frühzeitig eine Entwicklungsumgebung ein, mit der du das, was du dir anliest, direkt ausprobieren kannst.

  • Für C/C++ würde ich dir den QtCreator empfehlen. Andernfalls eignen sich ebenso CLion, Visual Studio (vorrangig für C++) oder Eclipse CDT.
  • Für C# ist Visual Studio die beste Wahl oder Rider.

Nimm dir bei alldem Zeit und hetze nicht durch Themen. Generell wird allein das Lernen der ersten Grundlagen (Kontrollstrukturen, Arrays, ...) mehr als nur ein paar Wochen beanspruchen. Suche dir dementsprechend einfache Übungen für die Konsole heraus und plane nicht sofort große Projekte. Auf Seiten wie Edabit, Exercism oder w3resource sind ziemlich viele Übungsideen kategorisch aufgeführt.

...zur Antwort

Das ist ein bekanntes Problem, welches ab Version 2024.1.5 behoben sein sollte.

Andernfalls gibt es den Workaround, die asiatischen Sprachpakete zu deaktivieren. Öffne dafür erst die Einstellungen (Ctrl + Alt + S oder CMD + , bei macOS), suche nach plugins, wechsel dann oben auf den zweiten Tab (es gibt Marketplace und Installed) und schau dann in der Liste nach den Plugins für Chinesisch, Japanisch und Koreanisch. Sobald die Plugins deaktiviert sind, sollte die Anwendung einmal neugestartet werden.

...zur Antwort

Rechne dir doch erst einmal die tatsächliche Arbeitszeit in Minuten um:

$totalMinutesDiff = $differenz->h * 60 + $differenz->i;

Und anschließend kannst du diesen Wert mit 450 (7 * 60 + 30) subtrahieren.

$totalMinutesDiff - 450;

Dann hast du die Anzahl an Minuten, die entweder fehlen oder zusätzlich geleistet wurden.

...zur Antwort

Du setzt bei Hover keine Hintergrundfarbe. Du setzt einfach nur die Textfarbe auf Weiß.

Eine Lösung könnte so aussehen, dass du ein Pseudoelement mit einer Hintergrundfarbe ausstattest und bei Hover über die Fläche seines Containers ziehst. Der Buttontext selbst sollte in einem eigenen Element liegen, welches relativ zu seinem Container positioniert wird.

HTML:

<div class="btn" role="button" tabindex="0">
  <span>Hover Me</span>
</div>

Um die Box als Schaltfläche auszuzeichnen, gebe ich ihr eine entsprechende Rolle und mache sie zugänglich für die Bedienung via Tastatur (tabindex).

CSS:

.btn {
  background: white;
  color: white;
  display: inline-block;
  position: relative;
}

.btn::before {
  background: linear-gradient(to right, #ff758c, #ff7eb3);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: width 0.5s ease-in-out;
  width: 0;
}

.btn:hover::before,
.btn:focus::before /* for keyboard control */ {
  width: 100%;
}

.btn span {
  position: relative;
}
...zur Antwort

Du brauchst eine Programmiersprache, mit der du die Backendanwendung schreiben kannst, die die Daten aus der Datenbank holt und dann in deine Webseite einsetzt. Da du PHP in den Tags hinzugefügt hast, gehe ich davon aus, dass du dich bereits für PHP entschieden hast. Es wäre andernfalls auch eine einfache Wahl, für die man zudem leicht einen passenden Webhoster findet. Ein erstes einfaches Tutorial findest du im Manual.

PHP bietet mehrere Schnittstellen für verschiedene DBMS (siehe hier). Für die Kommunikation mit einer MySQL-Datenbank kannst du beispielsweise die MySQLi-Schnittstelle von PHP nutzen. Sofern du dich noch nicht mit SQL befasst hast, findest du auf W3Schools ein Tutorial.

Bezüglich Webhosting-Dienstleistern kannst du bei lima-city oder freehostia schauen. Andernfalls gibt es verschiedene Provider, die eine kostenlose Probezeit bieten, was für dich wohl ebenso ausreichen dürfte.

...zur Antwort
(...) dass professionelle Webdesigner (...)

Ein Webdesigner ist in der Regel dafür zuständig, ein Design bzw. die grafische Oberfläche einer Webseite zu planen. Auch wenn es nicht mehr unüblich ist, dass er sich etwas mit Webtechnologien wie HTML und CSS auskennt, sind normalerweise Webentwickler für die konkrete Umsetzung (Programmierung) zuständig.

Sollte ein Webdesigner dennoch das Erstellen einer Webseite als Dienstleistung anbieten, wäre es nur vernünftig, auf ein Baukastensystem oder ein einfaches CMS wie WordPress zurückzugreifen, da das dann meist nur rudimentäre technische Kenntnisse für eine Anpassung erfordert.

Aber auch wenn man den folgenden Teil auf Webentwickler bezieht:

(...) bei der Erstellung von Webseiten auf Baukastensysteme oder Programme wie Wordpress verzichten und Seiten von Null selbst programmieren (...)

ist diese These so nicht richtig.

Du musst bedenken, dass viele Webseiten (gerade größere Unternehmen) ziemlich viele Inhalte anbieten, die sich außerdem immer wieder ändern. Öfter sind eigene Teams oder Agenturen für die Verwaltung der Inhalte zuständig. Nimm hier nur einmal die Onlinepräsenz einer Wochenzeitung als Beispiel oder eines Unternehmens, welches seine Produkte weltweit präsentieren möchte.

Für die ist es nur schlau, ein CMS einzusetzen, über das die Inhalte von weniger technikaffinen Personen verwaltet werden können. Und um das an der Stelle klarzustellen: Das muss deswegen nicht unbedingt WordPress sein. Es gibt auch CMS, die viel flexibler oder prinzipiell auf bestimmte Anwendungsfälle (z.B. E-Commerce) besser ausgelegt sind.

Eigenlösungen (vor allem bei Beginn von Null) sind für beide Seiten eher nachteilig. Sie erfordern einen größeren Aufwand und bilden für den Kunden eine Abhängigkeit zum Dienstleister, die er womöglich gar nicht eingehen möchte.

Was hingegen oft neu erstellt wird, sind Templates, Views/Themes, benutzerdefinierte Module, u.ä., die sich im CMS einfügen.

Selbst in den Fällen, in denen man auf ein CMS verzichtet (vllt. weil keine direkte Inhaltspflege notwendig ist), kommen häufig zumindest Webframeworks zum Einsatz, da sie die Aufwände wesentlich verringern. Einen Start von Null kann ich mir höchstens bei statischen One-Pagers eines Kleinkunden vorstellen.

(...) Wordpress kann meiner Meinung nach jeder Laie relativ schnell selbst erlernen und ist nicht kompliziert. (...)

Ja, bis zu einem bestimmten Punkt. Für einige ist der bereits dann erreicht, wenn sie ein gewähltes Theme anpassen wollen oder für eine bestimmte Anforderung kein passendes Plugin finden. Sich in webbezogene Stichworte wie SEO einzulesen, erfordert zudem Zeit (und Interesse), die nicht jeder Kunde/WordPress-Nutzer hat.

Dein Bekannter hat in seinem Punkt Recht, dass beispielsweise die Wartung anspruchsvoll sein kann und technischer Support hierbei nützlich ist. Ein Nutzer kann sich zwar mit etlichen Plugins für Funktion X und Y eindecken, aber sich damit auch ziemlich schnell etwas verbauen. Es ist im Grunde wie bei vielen Themenbereichen: Ich kann mir mit einem Rasierer auch selbst die Haare frisieren und umso mehr Aufwand ich investiere, umso besser werde ich sicherlich. Ein ausgebildeter Friseur jedoch kennt mehr Kniffe und Hintergründe, um Fallstricke zu vermeiden und schneller an ein ordentliches Endprodukt zu kommen.

...zur Antwort

In den auf Informatik bezogenen Studiengängen, die es so gibt, ist Programmierung nur ein Teilaspekt. Um Software professionell entwickeln zu können, ist etwas mehr notwendig, als nur eine Programmiersprache zu lernen.

Prinzipiell lohnt es sich, wenn dich dieser Themenbereich tatsächlich interessiert und dir Spaß macht. Sollte dem nicht so sein, würde ich dir definitiv davon abraten, denn es bringt nichts, sich dann dennoch durch ein Studium zu quälen. Egal, ob du später die Chance auf einen Beruf mit gutem Gehalt hast oder nicht. Da gibt es in anderen Themenfeldern bzw. mit anderen Berufen ebenso Gelegenheiten.

Konkret auf den Aspekt bezogen, ob Studium oder nicht, würde ich gerade in dieser Branche eher zu einem Studium raten. Zum einen erhältst du (bei erfolgreichen Abschluss eines akkreditierten Studiengang) ein staatlich anerkanntes Zertifikat und zum anderen kannst du während des Studiums nützliche Kontakte knüpfen und hast die Möglichkeiten, dich ziemlich frei in verschiedenen Bereichen der Informatik auszuprobieren.

Und bezüglich ChatGPT: Es mag ein gutes Hilfstool sein, doch ein Ersatz für einen guten Softwareentwickler ist es nicht.

...zur Antwort

Du kannst dich an das input-Event hängen.

Beispiel:

<input id="textfield">
<p id="current-input"></p>
<script>
  const outputElement = document.getElementById("current-input");
  document.getElementById("textfield").addEventListener("input", evt => {
    outputElement.textContent = evt.currentTarget.value;
  });
</script>

Sobald sich der Wert des Eingabefeldes ändert, wird auch der Textknoten unter dem Paragraph aktualisiert.

...zur Antwort

In der Struktur würde ich dem Spieler die verschiedenen Modi (PC/Build) als Ansichten zuordnen. Sprich, der Spielmodus wird wie auch der Baumodus als untergeordnete Komponente des Spielers verstanden. Ein Moduswechsel findet über den Spieler statt. Egal in welchem Modus man sich befindet, der Spielerkontext ändert sich nicht (man bleibt immer Spieler XY).

Wenn es ein Builder-Objekt gibt, über welches das Bauen gesteuert wird, dann hat das Spieler-Objekt (oder sein Build-View-Objekt, wenn man die Views nochmal als eigene Objekte entkoppeln möchte) auch eine Referenz auf diesen Builder.

...zur Antwort
(...) und zwar möchte ich ein eigenes game entwickeln zb wie octopath traveler 2 (...)

Mein Rat wäre, dass du dir erst einmal einen genaueren Plan (schriftlich) anlegst, in dem du deine Spielidee näher beschreibst und Kernanforderungen herausstellst. Sprich, du erstellst ein Game Concept.

Das hilft dir dabei, dich zu ordnen und notwendige Ressourcen oder To-Do's zu ermitteln. Wenn dein Spiel beispielsweise Soundeffekte oder Musik beinhalten soll, weißt du schon einmal, dass du dich in Richtung Audiobearbeitung etwas schlauer machen solltest.

An der Stelle wäre es allerdings ebenfalls klug, die Anforderungsliste für das Erste klein und einfach zu halten. Umso mehr du hinzunimmst (sei es Audio, eine große Spielwelt, viele verschiedene Spielmechaniken, o.ä.), umso komplexer wird das Projekt und es besteht ein erhöhtes Risiko, dass du den Fokus auf das Wesentliche verlierst, dich überforderst und irgendwann frustiert aufgibst. Greife dir daher auch nur einzelne Aspekte aus deinem genannten Referenzspiel heraus, die dich besonders faszinieren (vielleicht ist es der Grafikstil, vielleicht sind es bestimmte Mechaniken), aber versuche nicht direkt, ein ähnlich komplexes Projekt aufzubauen.

Noch mehr zu Game Concepts habe ich in diesem Beitrag geschrieben.

(...) welche software könnt ihr mir empfehlen (...)

Ich habe mir jetzt nur kurz Bilder und Clips zu Octopath Traveler 2 angeschaut. Da es sich wohl um ein 3D-Spiel handelt (ganz konkret wird der Effekt, 2D-Sprites in eine 3D-Welt zu setzen und dann je Kamerawinkel entsprechend zu drehen, sprite billboarding genannt), wäre eine 3D-Game Engine, wohl auch angebracht. Es sei denn, du reduzierst dein Projekt bereits an dieser Stelle und machst ein 2D-Pixelspiel daraus.

Naheliegend für Annahme 1 wären Godot, Unity oder die Unreal Engine. Sie gehören zu den populärsten, frei nutzbaren Engines und mit ihrer Hilfe wurden auch schon Spiele mit dem oben erwähnten Effekt erstellt (z.B. Cassette Beasts mit Godot, Full Circle oder The Deer God mit Unity, Octopath Traveler mit Unreal).

Für das Erstellen/Zeichnen der Sprites kannst du auf Asesprite, GrafX2 oder Gimp zurückgreifen.

(...) und gibts es gute videos um programmier sprachen zu lernen (...)

Schau auf Lernplattformen wie PluralSight oder Udemy. Konkrete Kursempfehlungen habe ich allerdings nicht.

Für Godot solltest du dich mit GDScript auseinandersetzen, Unity nutzt C# und die Unreal Engine C++.

Definitiv anzuraten wäre, dass du dich zuerst in die Programmiersprache deiner Wahl einarbeitest (was für sich schon einige Zeit in Anspruch nehmen wird) und erst mit sicheren Grundlagenkenntnissen beginnst, ebenso in der dazugehörigen Engine Fuß zu fassen. Bei GDScript mag eine solche Entkopplung etwas schwerer fallen, da diese Sprache explizit für Godot entwickelt wurde. Seitens Godot gibt es dafür aber ein empfehlenswertes, interaktives Tutorial (lies hier) und im direkten Vergleich zu C# und C++ ist GDScript meines Erachtens wesentlich einfacher erlernbar.

...zur Antwort
Elemente in css linksbündig?

Hey, also ich habe ein project in der dynamisch html Seiten generiert werden. Eine Seite sieht folgendermaßen aus:


<body tabindex="0" class=" jspsych-display-element" style="margin: 0px; height: 100%; width: 100%;">
    <div id="jspsych-progressbar-container"><span>Completion Progress</span>
        <div id="jspsych-progressbar-outer">
            <div id="jspsych-progressbar-inner" style="width: 12.5%;"></div>
        </div>
    </div>
    <div class="jspsych-content-wrapper">
        <div id="jspsych-content" class="jspsych-content">
            <style id="jspsych-survey-multi-choice-css">
                .jspsych-survey-multi-choice-question {
                    margin-top: 3em;
                    margin-bottom: 2em;
                    text-align: left;
                    height: 75vh
                }

                .jspsych-survey-multi-choice-text span.required {
                    color: darkred;
                }

                .jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text {
                    text-align: center;
                }

                .jspsych-survey-multi-choice-option {
                    line-height: 2;
                }

                .jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-option {
                    display: inline-block;
                    margin-left: 1em;
                    margin-right: 1em;
                    vertical-align: top;
                }

                label.jspsych-survey-multi-choice-text input[type='radio'] {
                    margin-right: 1em;
                }

                html {
                    scroll-behavior: smooth;
                }

                #jspsych-progressbar-container {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    z-index: 1000;
                }

                .bottom-spacer {
                    height: 10vh
                }
            </style>
            <form id="jspsych-survey-multi-choice-form">
                <div id="jspsych-survey-multi-choice_container_0" class="question-container"></div>
                <div id="jspsych-survey-multi-choice-0" class="jspsych-survey-multi-choice-question">
                    <p class="jspsych-survey-multi-choice-text survey-multi-choice"><b>Gender: Please select your
                            gender<b></b></b><span class="required">*</span></p>
                    <div id="jspsych-survey-multi-choice-option-0-0" class="jspsych-survey-multi-choice-option"><input
                            type="radio" name="jspsych-survey-multi-choice-response-0"
                            id="jspsych-survey-multi-choice-response-0-0" value=" Male" required=""><label
                            class="jspsych-survey-multi-choice-text" for="jspsych-survey-multi-choice-response-0-0">
                            Male</label></div>
                    <div id="jspsych-survey-multi-choice-option-0-1" class="jspsych-survey-multi-choice-option"><input
                            type="radio" name="jspsych-survey-multi-choice-response-0"
                            id="jspsych-survey-multi-choice-response-0-1" value=" Female"><label
                            class="jspsych-survey-multi-choice-text" for="jspsych-survey-multi-choice-response-0-1">
                            Female</label></div>
                    <div id="jspsych-survey-multi-choice-option-0-2" class="jspsych-survey-multi-choice-option"><input
                            type="radio" name="jspsych-survey-multi-choice-response-0"
                            id="jspsych-survey-multi-choice-response-0-2" value=" Diverse"><label
                            class="jspsych-survey-multi-choice-text" for="jspsych-survey-multi-choice-response-0-2">
                            Diverse</label></div>
                </div><input type="submit" class="jspsych-survey-multi-choice jspsych-btn" value="Continue">
                <div class="bottom-spacer"></div>
            </form>
        </div>
    </div>
</body>

Jetzt versuche ich sobald ein solches form in der html Seite ist, alles linksbündig ist. Aber nur dann. Ich bekomme es leider nicht hin. Habe es mit javascipt und text-align gemacht, funktioniert aber nicht.

...zum Beitrag

Die Texte für sich sind linksbündig. Nun ist es nur noch der Wrapper selbst, der zentriert ist.

a) Entferne max-width und margin von .jspsych-content. Wenn du einen Abstand nach links setzen möchtest, kannst du padding (bzw. padding-left) nutzen.

b) Ersetze max-width gegen width.

Des Weiteren hast du in deinem Markup noch einen Fehler. Das style-Element gehört in den head-Bereich, nicht in den body.

...zur Antwort