Website wird im Browser nicht richtig angezeigt?
Hallo. Ich bin mal so verrückt und erhoffe mir hier auf meine komplexe Frage eine Antwort, auch wenn erfahrungsgemäß in diesem Forum ich selbst immer meine Probleme lösen muss. Also..... Ich habe meinen Frontend Development Kurs verkackt, weil:
Egal was ich mache, wenn ich mein HTML-Dokument im Browser öffne, und wirklich egal in welchem Browser, werden die Sachen die ich in meinem CSS-Dokument festgelegt habe nicht übernommen. Und die Website sieht demnach besch.... aus.
Zur Anmerkung: Bei meinem Mentor auf seinem Rechner hat alles einwandfrei funktioniert. Mit exakt dem gleichen Code. Wir haben es gemeinsam ausprobiert. Er meinte, es könnte bei mir ein Cache-Problem sein, aber ich habe keine Ahnung was das genau bedeutet. Ich kann gerne mit euch meinen kompletten Projekt-Code via GitHub teilen usw. falls das helfen sollte, aber zunächst meine Frage:
Woran liegt das? Himmel Orsch und Wolkenbruch, wie soll ich eine Website erstellen, wenn ich im Browser nicht mal mir ansehen kann wie das was ich fabriziere hinterher aussieht?
Hier ist mein GitHub- Link:
https://github.com/TIJEY-BEG/Portfolio-Website-BEG.git
Damit habt ihr Zugriff auf meinen gesamten Code zum Projekt. Ich weiß wirklich nicht woran es liegen kann. Auch den Browser Cache zu leeren hat nichts gebracht. Hilft es vielleicht wenn ich mir einfach ein neues Notebook kaufe?
9 Antworten
Ist der Pfad in der .html-Datei zu der .css-Datei korrekt?
Zu dem Cache Problem: Der Browser speichert das CSS zwischen, um das nächste Laden der Webseite zu beschleunigen. Das kann dazu führen, dass Änderungen nicht sofort sichtbar sind. Mit STRG + F5 lädt der Browser die Webseite komplett neu und ignoriert den Cache.
Ansonsten kannst du mal in der Konsole des Devtools deines Browsers nachschauen, ob du dort eine Fehlermeldung findest. Bei Chrome ist dies STRG + SHIFT + i
Ich danke dir Bro. Probiere ich später mal aus. Jetzt muss ich leider dringend zur Arbeit.
also - nur Verständnisfrage....wenn du zB im CSS schreibst body: { background:red } - als Bsp - ändert sich rein gar nix in der Vorschau? - rufst du die Seite über nen Offline Server auf oder stinknormal über doppelklick auf die html Datei?
Hi, Paaauleee. :) Ich mache einfach nur einen Doppelklick auf eines meiner HTML-Dokumente. Also z.B. auf Index.html, was meine Homepage ist. Dann öffnet es sich automatisch in Google Chrome. Den Link in Chrome habe ich dann kopiert um es in anderen Browsern zu probieren, oder bin auf ,,Öffnen mit Browser XY" gegangen. Habe es auch mit Edge, Opera und Firefox probiert, gleiches Ergebnis. Wenn ich irgendwelche Sachen ändere im CSS, sei es Padding, Farbe, was auch immer, kommt keine Änderung. Ich schaue mal ob es sich etwas tut wenn ich die Änderungen im Web-Inspektor vornehme, aber da war bisher auch nichts möglich.
Hey,
welchen Browser benutzt du ?
Wegen dem Cache: einfach mal in die Einstellungen deines Browsers gehen und diesen leeren. Ich hatte schon oft das Problem das dann die CSS Änderungen richtig angezeigt werden.
Optional kannst du mit XAMP deinen eigenen lokalen Webserver einrichten und testen ob du das Problem immer noch hast.
Ich habe noch gelesen, dass du ja deine Dateien normal öffnest umd dann schaust, was das Ergebnis ist. Wenn du XAMP installierst hast du sozusagen deine kleine lokale Domain, vllt löst das sogar dein Problem. Wegen dem öffnen mit dem Handy: du kannst in Browsern wie Opera Erweiterungen installieren, die dir zeigen, wie deine Seite auf welchem Gerät (egal ob auf smartphone, pc, Tablet) aussieht, ist sehr praktisch, besonders wenn du deine Seite responsive machen möchtest.
Hast du deinen Stylesheet bzw deine Style Datei auf der Website eingebunden?
Falls nicht probiere Folgendes ins <head> Element einzubauen:
<link rel="stylesheet" href="dateiname.css">
Ist die CSS Datei im selben Ordner wie die HTML Datei?
Ich hoffe ich konnte dir einigermaßen weiterhelfen
Hi, "Dieser Eine Stern". :) Hui, langer Name. Also: Ja, ich habe die CSS-Datei in die Website eingebunden. Also genau in der Syntax wie du es beschrieben hast, mit korrektem Dateinamen. Und, es befinden sich auch alle Dateien der Website im gleichen Ordner. Und, was mir außerdem noch mehr Sorgen macht, ich habe den Browser Cache geleert wie es mir empfohlen wurde, aber..... es funktioniert immer noch nicht. O_O
Hmm, welchen Browser benutzte denn?
Vielleicht ist die Version nicht die aktuellste?
Schonmal geprüft, ob die Datei auf dem Handy vernünftig angezeigt wird?
Ansonsten poste den Code vielleicht mal, ich werde versuchen dir bestmöglich zu helfen :)
LG, der weirde Stern aus deinem Keller
Google Chrome benutze ich. Aber, ich habe es auch mit Opera, Firefox und Edge probiert. Also wie in der Frage beschrieben. Chrome müsste eigentlich aktuell sein. Aber es gibt Neuigkeiten:
Wenn ich die Stylesheets inline einfüge, also direkt in die HTML-Dokumente, dann funktioniert es komischerweise. :O
Tja...... was soll ich nur tun? Am besten wohl auf eine Weise codieren die heute eigentlich nicht mehr üblich ist. Es geht also, aber warum auch immer funktioniert es nicht mit einem separaten CSS-Dokument.
Hmm bei mir Funktioniert es persönlich Perfekt auf Opera, Chrome etc.
Ich habe die Befürchtung dass es an meinem Notebook liegt.
Welches Notebook benutzt du denn? Und welchs Betriebssystem?
Ich benutze einen Acer Aspire 3. Dieser läuft mit dem Betriebssystem Windows 10. Und bisher gab es auch nie wirklich Probleme, jedoch häufen diese sich im Moment. Bspw. kann ich nicht mal einen Gameboy Color Emulator auf meinem Notebook zum Laufen bringen, wozu ich schon eine separate Frage gepostet habe. Irgendwann hat jedes Gerät mal ausgedient.....
Hmm wenn du schon große Mengen an Geld für einen Programmier Code blechen must, ist ein neuer Rechner ja auch nicht allzu prickelnd. Hattest du schonmal einen Virus von dem du dachtest ihn bekämpft zu haben?
Nun ja, wenn ich nur blind codieren kann, weil mir verborgen bleibt wie der von mir fabrizierte Code hinterher im Browser aussieht, kann ich schon mal nicht als Frontend Developer arbeiten. Da bleibt nur noch UI/UX Design und vielleicht Programmierung, wenn da mein Notebook wenigstens alles macht wie es soll.
Viren sind mir jetzt keine bekannt. Also zumindest dass mir keine ernsthaften Sachen bekannt wären, die mal auf meinem Gerät gelandet sind.
Hast du die Website nur Via Github getestet oder auch normal auf deinen Gerät?
Mit GitHub kenne ich mich nicht so gut aus. Dort bin ich nur dazu in der Lage Backups von meinem Code zu erstellen, und diesen mit anderen zu teilen. Ich habe alle Dateien auf meinem Rechner in einem Ordner, in dem einzelne Dateien sowie Unterordner vorhanden sind. Es ist also alles geordnet. Und indem ich auf eine beliebige HTML-Datei in meinem Ordner klicke, um die jeweilige Webpage meiner Website im Browser zu öffnen, sehe ich mir das ganze an.
Hey Shitstorm333 :-) - ok.....nächste Frage - also du öffnest das Dokument und es sieht eher so aus, dass überhaupt kein CSS Styling vorhanden ist oder ist eins vorhanden und du siehst aber keine Änderungen in der Webansicht, wenn du Anpassungen in der CSS Datei vornimmst?
Leider komplett keine Anwendungen meines CSS-Dokuments erkennbar. :(
Das klingt wirklich so, als wenn die CSS Datei nicht eingebunden ist - bzw der Pfad nicht stimmt......ist nur eine CSS oder?
Pack mal die CSS (wenn sie da nicht schon liegt) direkt ins root Verzeichnis - also gleicher Ordner wo auch die index.html liegt - nenn sie zB "style.css" - in den <head> Bereich schreibst du nun <link rel="stylesheet" href="style.css">
Okay, wenn schlichtweg nichts anderes als das mit dem Cache leeren gemeint ist, dann probiere ich das aus. Alternativ XAMP, was mir ein anderer User auch vorhin vorgeschlagen hat. Ich danke dir schon mal. Vielleicht hilft das wirklich. Verdammt! Das kostet mich ganze 425€ extra wenn ich bei Career Foundry den Kurs um 30 Tage verlängere. Arrrrrg. Und das alles nur um "Specialization in Frontend Development" auf meinem Zertifikat vom UI-Kurs stehen zu haben.