CSS möchte nicht laden?

Hallo,

es geht darum, dass ich ein Projekt habe in dem Java, Spring boot, ReactJS, CSS, JS und RestAPI mit inbegriffen sind. Mein Problem liegt lediglich darin, dass die html beim laden der Seite: localhost:8080/login.html den inhalt der html datei anzeigt aber die css datei garnicht übernimmt. Die Pfade zu den einzelnen Dateien stimmen ebenfalls, da sie verlinkt sind, doch das stylen über css funktioniert nicht

login.html: https://codefile.io/f/uD0jP33Wef
style.css: https://codefile.io/f/AGN6ENmt6t
script.js: https://codefile.io/f/unKOx5NUi6

Wäre echt top, wenn mir jemand dabei behilflich sein könnte.

Bild zum Beitrag

Fischkopf289

01.06.2023, 13:30

Bindest du die css datei überhaupt in der html datei ein?

synthax68228

Beitragsersteller

01.06.2023, 13:34

<link href="/static/style.css" rel="stylesheet" type="text/css">

2 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

01.06.2023, 13:34

CSS möchte nicht laden?

Probier's mal mit Cache leeren oder private mode nutzen.

Alex

synthax68228

Beitragsersteller

01.06.2023, 14:15

Sobald ich localhost:8080/static/style.css eingebe gelange ich ebenfalls auf die Whitelable error page. Muss ich es ebenfalls in LoginController.java implementieren? Aber eigentlich müsste es doch login.html übernehmen... Ich verstehe es nicht. Es ist auf jedenfall richtig verlinkt, da es bei strng + klick die datei öffnet.

EinAlexander

01.06.2023, 14:23

@synthax68228

Sobald ich localhost:8080/static/style.css eingebe gelange ich ebenfalls auf die Whitelable error page.

Was sagt das Errorlog?

synthax68228

Beitragsersteller

01.06.2023, 15:38

@EinAlexander

Jetzt komme ich mit localhost:8080/style.css aufrufe aber sobald ich es mit der login.html verknüpfe ist die komplette Seite weiß.

EinAlexander

01.06.2023, 15:40

@synthax68228

Jetzt komme ich mit localhost:8080/style.css aufrufe aber sobald ich es mit der login.html verknüpfe ist die komplette Seite weiß.

Dann nimm diese Einbindung vor

<link href="http://localhost:8080/style.css" rel="stylesheet" type="text/css">

synthax68228

Beitragsersteller

01.06.2023, 15:44

@EinAlexander

Danke dir, wusste garnicht, dass es geht :D

synthax68228

Beitragsersteller

01.06.2023, 13:36

Ich habe es mit einem einfachen CSS code ebenfalls versucht, doch nichts wird davon übernommen aus irgendeinem grund.

synthax68228

Beitragsersteller

01.06.2023, 13:35

Habe ich, hat beides nicht funktioniert :/

Fischkopf289

01.06.2023, 14:31

Es könnte sein, dass wenn du die css datei mit folgendem befehl einbinden willst:

Dass es dann Im gleichen Ordner indem die HTML Dateien sind, nach diesem Static ordner sucht, welcher sich aber nicht dort befindet.

Versuch mal die CSS Datei in den gleichen Ordner wie die HTML Datei zu packen und dann in einer der HTML dateien die CSS datei mit folgendem befehl einzubinden, also einfach den alten link ersetzten:

Wenns geht kannst du es dann einfach in allen html dateie so übernehmen

Achte darauf dass du in jeder Datei den neuen Standort der CSS datei angibst.

Woher ich das weiß:Studium / Ausbildung

regex9

01.06.2023, 14:52

Es könnte sein, (...)

Der Slash am Pfadanfang gibt an, dass ausgehend vom Rootverzeichnis gesucht wird.

Fischkopf289

01.06.2023, 14:54

@regex9

Ich habe es eben ausprobiert und bei mir ging es nicht

regex9

01.06.2023, 15:17

@Fischkopf289

Dann musst du etwas falsch gemacht haben.

Es handelt sich um einen absoluten Pfad. Die Seite muss über eine Domain aufgerufen werden und der static-Ordner muss im Rootverzeichnis liegen.

Fischkopf289

01.06.2023, 15:50

@regex9

Also hat es was mit dem ReactJS zeugs zu tun oder dem Springboot, naja damit hab ich mich noch nicht sehr viel auseinandergesetzt hauptsächlich nur mit html,css und js

regex9

01.06.2023, 15:57

@Fischkopf289

Nein, damit hat es nichts zu tun.

Ähnliche Beiträge

Wordpress Seite als eine HTML, CSS und JS Datei exportieren?

Hallo,

ich möchte eine Wordpress-Website statisch wie sie zu sehen ist als HTML, CSS und JavaScript Dateien exportieren. Leider funktioniert dies nicht wie ich es möchte, da alle JavaScript Funktionen für z.B. ausklappbare Menüs in einzelnen JS Dateien liegen. Auch das CSS ist teilweise in der entsprechenden Datei, teilweise aber auch im HTML Code, das ist aber nebensächlich.

Gibt es irgendein Tool - egal ob Online mit GUI oder als Shell Anwendung, dass es mir ermöglicht, die Seite wie von mir beschrieben als Einzeldateien herunterzuladen?
Die Seite läuft nicht über meinen eigenen WP Account, ich kann also keine WP Plugins installieren...

LG und vielen Dank

Andy

...zum Beitrag

localhost css laden?

Ich kann bei keine css dateien mit dem link tag laden. Ich habe mehrere Möglichkeiten ausprobiert:

<link type="text/css" rel="stylesheet" href="stylesheets/style.css">

<link type="text/css" rel="stylesheet" hrefhttp://localhost/stylesheets/style.cssss">

<link type="text/css" rel="stylesheet" href="./stylesheets/style.css">

nur fürs Verständnis:

htdocs

|- index.php

|- stylesheets

|- style.css

keine dieser möglichkeiten funktioniert.

Weiß jemand wie das geht? Oder hab ich einen Fehler gemacht?

Danke im Voraus :)

...zum Beitrag

Audio-Datei automatisch mit HTML, CSS und JS abspielen?

Wie kann ich eine Audio-Datei einbetten, dass sie beim Starten der Website direkt abgespielt wird?

Bzw. das automatisch im Hintergrund abgespielt wird. Grundgerüst ist hier wie immer HTML.

...zum Beitrag

Karussell für Kleidungsstücke?

Hey, ich will eine Webseite programmieren und ein Kleidungskarussell erstellen.

Im Grunde so wie in diesem Video

Wie kann ich so etwas programmieren mit php, css, js & html? Brauche ich dafür libs?

Die Bilder hätte ich bereits

...zum Beitrag

Kann ich nach 10.000 Stunden ein guter Programmierer werden?

Ich habe bereits ca. 50-60 Stunden gelernt. Ich habe komplett bei Null angefangen (HTML, CSS, JS) und habe mein erstes kleines Programm geschrieben (einen einfachen Taschenrechner).

Glaubt ihr, dass ich nach 10.000 Stunden ein guter Programmier werden kann?

...zum Beitrag

Wie am günstigsten Website Hosten?

Hallo, ich habe mit Html css und JS eine Website erstellt. Jetzt müsste ich eine Domain kaufen. Jedoch ist die Website nur für einen Geburtstag, spätestens nach einem Monat würde ich sie eh wieder offline nehmen. Wie mache ich das am kostengünstigsten? Was brauche ich sonst noch damit die Website steht?

...zum Beitrag

Wieso funktioniert meine "Browser Extension" nicht auf dieser Seite?

Mir ist unter Linux aufgefallen das ich gar nicht den Auto-Scroll von Windows habe in zb. Google Chrome wenn man auf das Mauspad klickt, nutze ich gerne und dachte mir als Challenge ohne Chat Gpt dass ich mal schnell probieren könnte ein eigenes zu programmieren.

Ich weiß da gibt es fertige Software und Extension's, die laufen ohne Probleme und Ressourcen sparender wahrscheinlich.

Hab das erst in einer Html Datei (Extension in "") gemacht zum testen dann in anderen Websites den JS Code in eine Konsole eingefügt und es funktioniert eigentlich ganz gut.

Das Problem ist das ich nicht verstehe wieso er nicht hier funktioniert https://www.tennon.io/ , mir fällt beim inspizieren nichts auf und es scheint mit Next JS umgesetzt zu sein.

<!DOCTYPE html>
<html lang="de">


<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auto Scroll Extension</title>
    <style>
        html {
            min-width: 100%;
        }
    </style>
</head>


<body>
    <script>
        /* Render Dummy Content, cursor change wont work with min-height */
        for (let i = 0; i < 1000; i++) {
            document.body.innerHTML += "Lorem Ipsum ";
        }
        const scrollSpeed_Up = -1;
        const scrollSpeed_Down = 1;
        const middlehalf = window.innerHeight / 2;
        let AutoScroll_Interval; /* Global acess */
        let isScrolling = false;
        let isScrollingUp = false; /* Default Scrolling Down, Prevent Errors */


        const ToggleScrolling = Enable => {
            if (Enable) {
                console.log("Auto Scroll Active");
                document.body.style.cursor = "all-scroll";
                AutoScroll_Interval = setInterval(AutoScroll, 1);
                isScrolling = true; /* Prevent Multiple Interval's */
            } else if (!Enable && isScrolling) {
                /* Stop Interval , Reset Cursor and Variables */
                console.log("Auto Scroll Stopped");
                document.body.style.cursor = "auto";
                clearInterval(AutoScroll_Interval);
                isScrolling = false;
            }
        }


        const AutoScroll = () => {
            /* Get Current Vertical Scroll Position : console.log(window.scrollY); */
            isScrollingUp ? window.scrollBy(0, scrollSpeed_Up) : window.scrollBy(0, scrollSpeed_Down);
        }


        window.addEventListener("mousemove", e => {
            e.clientY > middlehalf ? isScrollingUp = false : isScrollingUp = true;
        });


        /* Check if Scroll Button is Pressed */
        window.addEventListener("mousedown", e => {
            e.button === 1 && !isScrolling ? ToggleScrolling(true) : ToggleScrolling(false);
        });


        /* ############## IGNORE ##############
        Check if Client has reached Bottom
        const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
        if (window.scrollY >= scrollableHeight) { 
            // Reached Bottom Code ... 
        } else {
            // Code ...
        }
        */
    </script>
</body>


</html>

...zum Beitrag

Mit HTML CSS und JS Dateien auf dem Computer öffnen?

Ich möchte mit HTML CSS und JS eine Store App programmieren, die dann Installationsdateien für Apps automatisch herunterlädt und ausführt. So weit bin ich auch fast gekommen aber jetzt bleibt mir die Frage übrig: Kann ich mit HTML CSS und JS programmieren das das Setup automatisch geöffnet wird? Gibt es einen Weg Dateien auf dem Computer zu öffnen?

...zum Beitrag

Script funktioniert nur intern?

Mein Javascript-Code funktioniert einwandfrei, aber nur, wenn es in der Html-Datei eingebettet ist. Wenn ich es in die externe Js-Datei packe funktioniert es nicht, obwohl alles andere wie zB Dropdown-Menu und so weiter funktionieren. Weswegen könnte das sein?

...zum Beitrag

Wie kann man eine Webseite (HTML/CSS/JS) in WordPress einbinden (unverändert dort einsetzen)?

Kurze Frage,

Ich habe eine Webseite mit HTML/CSS und JS erstellt und möchte diese jetzt bei WordPress einfügen, damit andere, die keine Ahnung von HTML haben diese auch gut bearbeiten können. Funktioniert es vielleicht, einfach die Dateien die man hat hochzuladen? Ich beschäftige mich jetzt schon seit Tagen und komme nicht voran... Ich bin am verzweifeln. Ich würde mich über jede Hilfe freuen.

...zum Beitrag

Gute KI um HTML-, CSS- und JS-Code für eine Webseite zu erstellen?

Hallo kennt jemand eine gute KI, um HTML-, CSS- und JavaScript-Code für eine Webseite zu erstellen?

...zum Beitrag

Mit Input Element rechnen (JavaScript)?

Ich fange gerade an, programmieren zu lernen (HTML, Js, CSS) und bin gerade dabei eine Website zu coden, die Meilen in Kilometer umrechnet. Man gibt beim Input Feld die Meilen ein und wenn man den Button Convert drückt sollen diese in Kilometern angegeben werden. Bei der Js Funktion mit dem Button kommt allerdings immer NaN (Not a Number) heraus, wenn ich mit dem Eingegeben weiterrechnen möchte. Wisst ihr wie man den String von der Eingabe zu einem Zahlenwert machen kann, sodass die Funktion damit weiterrechnen kann? Danke

...zum Beitrag

Welches CSS Framework und welches Planungstool sollte ich nutzen?

Hallo,

bisher habe ich jede Idee und jedes Projekt von Null an selbst programmiert und CSS geschrieben.

Um mich zukünftig mehr auf JS und React konzentrieren zu können und auch Ideen schneller umsetzen zu können, möchte ich vorgefertigte HTML/CSS Komponenten verwenden.

Zudem möchte ich dieses Framework auch in Figma nutzen können, um die Idee besser planen zu können.

Welches CSS Framework würdet ihr empfehlen und warum? Es sollte ein modernes Design haben (Bootstrap fällt daher für mich raus). Eine große Auswahl an Komponenten haben, welche man einfach kombinieren und anpassen kann. Die Lizenz sollte auch für kommerzielle Projekte gelten und möglichst kostenlos sein. Tailwind ist kostenpflichtig oder?
Welches Tool könnt ihr noch empfehlen, um eine App/PWA zu skizzieren und zu planen?

Gruß ebody

...zum Beitrag

HTML, CSS, Javascript EventHandler und .innerText?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test DOM Manipulation</title>
    <script src="inner.Text.js" defer></script>
</head>
<body>

<div>
    <button id="button">click me</button>
    <input type="submit" id="Einreichen" name="Einreichen" value="Testen">
</div>

</body>
</html>
const meinBody = document.body;
const e1 = document.createElement('div');

const innerText1 = "Programmieren ";
const innerText2 = document.createElement("b");
innerText2.innerText = "3";
const innerText3 = " FTW!";

e1.append(innerText1, innerText2, innerText3);
meinBody.append(e1);

const button = document.getElementById('button');

button.addEventListener('click', () =>  {
button.innerText = "Klicken";}

Wenn ich den button klicken, warum wird dann das click me nicht durch Klicken ersetzt?
Warum wird das meinBody.append(e1); nicht ausgeführt?

MFG

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen