Warum laden meine styles und bilder nicht?

Ich verfolge ein schulprojekt für html und css. Ich habe die ganze zeit mit der live server extension von vs code gearbeitet aber nun wenn ich die index.html öffnen will ohne den live server zu benutzen laden die bilder und styles nicht. Warum funktioniert es in diesem beispiel nicht?

Bild zum Beitrag

3 Antworten

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

18.03.2024, 19:32

Hi Redikiller,

es ist wichtig auch auf einen richtigen Pfad zur Bilddatei zu achten. Ein falscher Fahrt führt meist zu Fehlern die dazu führen, dass der Browser die Datei nicht finden kann.

Deswegen versuche mal die Pfadangaben zu überprüfen.

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Destranix

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programmiersprache, Programmieren & Softwareentwicklung

18.03.2024, 16:23

Der Pfad ist relativ zu einem Root-Verzeichnis angegeben, nicht relativ zur Datei. Ohne Server wird das Root-Verzeichnis wohl nicht festgelegt oder ein anderes sein nehme ich an.

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

18.03.2024, 16:23

Du benutzt absolute Pfadangaben, die stets vom Rootverzeichnis des Servers ausgehen. Wenn du aber keinen Server einsetzt, können sie nicht korrekt aufgelöst werden.

Stattdessen müsstest du relative Pfadangaben verwenden (z.B.: "Home/..." oder "./Home/...") oder absolute Dateipfade (z.B.: "C:/...").

PS.: All deinen img-Tags fehlt ein erforderliches alt-Attribut.

Hallo,

ich bin gerade dabei, in VS Code meine Webseite für das Handy zu optimieren (CSS Media Queries). Ich hatte die ganze Zeit mit Netlify Drop einen 1-Stunden-Host gestartet und geschaut, wo ich noch optimieren muss. Leider habe ich logischerweise irgendwann das Limit erreicht.

Jetzt meine Frage:

Kann man die Webseite mit dem VS Live-Server irgendwie mit dem Handy testen?

Die Seite zuerst online stellen und dann optimieren ist natürlich keine Option. :) Wenn das nicht funktioniert, was habe ich noch für Möglichkeiten?

Danke schonmal!

...zur Frage

Wie würdet ihr es in HTML schreiben und später mit CSS stylen?

Hallo Leute.

Ich wollte den Header mit einem Bild in der Mitte zentriert und zwei Links, jeweils links und rechts darstellen.

Die Darstellung die ich wollte, habe ich hinbekommen.

(Es geht nur um die Positionierung der Elemente, und nicht um Farben, oder ob man die Links nicht im Header, sondern wo Anders positionieren sollte. Es geht explizit um diese Darstellung im Header-Breich.)

Bild 1(Browser): >>>>>>>>>>

Bild 2(HTML): >>>>>>>>>>

Bild 3(CSS): >>>>>>>>>>

Meine Frage wäre: Wie würdet ihr denn die HTML schreiben und anschließend mit CSS stylen, um so ein Ergebnis zu erreichen.

Ich bin mir ziemlich sicher, dass meine Variante nicht die übliche Variante ist, die ein erfahrener in diesem Bereich bevorzugen würde.

Danke.

...zur Frage

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.

...zur Frage

Flask Website lädt oft Ressourcen nicht?

Ausgangslage:

Flask Backend über CGI deployed
Alle genutzen Ressourcen (CSS, Images, Videos, etc.) werden über url_for() importiert
CGI daher, weil es sich um einen gemieteten Strato Server handelt und dieser im "Hosting Basic" Paket nur CGI akzeptiert. (Wer andere Infos darüber hat, gerne her damit)

Problem:

In 30% der Fälle lädt die Seite ohne Probleme, alle Inhalte werden korrekt geladen und angezeigt
In 35% der Fälle lädt die Seite zwar (auch die JS Datei, die die Loading Page nach dem vollständigen Laden der Seite entfernt) aber es fehlen Videos im Hintergrund
In weiteren 35% der Fälle wird der Loading Screen angezeigt, aber weder Bilder, Videos, CSS Dateien, noch die JS Datei, die den Loader entfernt, werden geladen, wodurch nur der Loader zu sehen ist.

Konsole schmeißt für jede Ressource den Fehlercode 500 aus

Error Log zeigt immer, immer wieder:

End of script output before headers: [NAME].cgi

Alle Dateien im Ordner cgi-bin, sprich alle Page relevanten Files haben die Permission 755

Ist der Server einfach manchmal überlastet? Und hat hier noch jemand Ideen, was ich noch versuchen kann?

Vielen Dank im Voraus!

...zur Frage

Microsoft Edge zeigt HTML Code nur in html an und nicht so wie´s eig. sein soll?

Wie kann ich das ändern?

Habe das auf Visual Studio Code gemacht.

...zur Frage

Wie passe ich ein Bild auf meiner Website so an, dass es perfekt in den Header passt?

Hallo, ich habe vor 3 Tagen angefangen mich mehr mit programmieren zu beschäftigen, habe also noch kaum Erfahrung. Ich habe nun angefangen eine Website zu bauen, habe mit CSS angefangen, aber weiß nicht wie ich hinter meine Überschrift ein Bild bekomme. Wenn ich auf Google suche und die lösungen dort probiere, dann wird das Bild immer zum Hintergrund der gesamten Website, nur nur vom Head-Bereich. Weiß da jemand eine lösung?

(Ich arbeite nur mit VS Code)

Danke im voraus

...zur Frage

Class in css und html wird nicht angesprochen, was tun?

Ich habe eine Frage zum Thema html und css. Die class .logo lässt sich nicht ansprechen und wenn ich mit vsc versuche verschiedene "classes" anzusprechen schlägt er mir nur alte gelöschte "classes" vor. Vielleicht kann mir ja jemand bei diesem Problem helfen Danke im vorraus :)

hier ist der Code:

index.html

<!DOCTYPE html>

<html>

<head>

<title>beispiel</title>

</head>

<body>

<nav>

<li><a href="">Element 2.1</a></li>

<li><a href="">Element 3.1</a></li>

<li><a href="">Element 4.1</a></li>

<li><a href="">Element 5.1</a></li>

<li><a href="">Element 6.1</a></li>

<li><a href="">Element 7.1</a></li>

<li><a href="">Element 8.1</a></li>

</ul>

<li><a href="">Element 1</a></li>

<li><a href="">Element 2</a></li>

<li><a href="">Element 3</a></li>

<li><a href="">Element 4</a></li>

<li><a href="">Element 5</a></li>

<li><a href="">Element 6</a></li>

<li><a href="">Element 7</a></li>

<li><a href="">Element 8</a></li>

</ul>

</nav>

</body>

</html>

style.css

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

background-color: rgb(214, 214, 214);

}

nav {

width: 100%;

}

.leftnav {

float: left;

list-style: none;

background-color: cadetblue;

}

.topnav {

width: 100%;

float: right;

list-style: none;

background-color: crimson;

margin-bottom: 0;

}

nav .leftnav li {

margin-left: 25px;

margin-top: 30px;

margin-right: 25px;

margin-bottom: 30px;

}

nav .topnav li {

float: right;

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav .firstlielement {

display: inline-block;

margin-right: 50px;

margin-top: 20px;

margin-bottom: 20px;

}

nav .topnav li a {

text-decoration: none;

color: white;

}

nav .leftnav li a {

color: rgb(50, 60, 197);

text-decoration: none;

}

nav .leftnav li a:hover {

color: rgb(173, 174, 196);

text-decoration: none;

}

nav .topnav li a:hover {

color: rgb(81, 253, 1);

text-decoration: none;

}

.logo {

}

...zur Frage

Wie kann ich bei dieser Website den Link nach oben rechts verschieben?

Ich habe einen Link erstellt, der mich wieder zurück zur Hauptwebsite bringt. Nur möchte ich, dass der Link oben rechts ist. Kann mir da jemand helfen?

Die Webseite:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Preise</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Open Sans', sans-serif;
      padding-left: 100px;
      padding-right: 100px;
    }

    .preise-navbar {
      padding-left: 100px;
      color: rgb(52, 57, 56);
    }

    .preise-container {
      background-color: white;
      padding: 16px;
    }

    table {
      border-collapse: collapse;
    }

    td,
    th {
      padding: 16px;
      border-bottom: 2px solid #8ebf42;
      text-align: center;
      padding-left: 100px;
    }

    a {
    }
  </style>
</head>
<body>
  <div class="preise-container">
    <h1 class="preise-navbar">Preise:</h1>
  </div>
  <table>
    <tr>
      <th></th>
      <th></th>
    </tr>
    <tr>
      <td>Erwachsene:</td>
      <td>20€</td>
    </tr>
    <tr>
      <td>Kinder unter 18</td>
      <td>10€</td>
    </tr>
    <td>Kinder unter 6</td>
    <td>3€</td>
  </table>
  <a href="Index.html">Zurück</a>
</body>
</html>

...zur Frage

Ordnerstruktur bei HTML Webseiten für Fonts?

Hallo. Ich frage mich, wo ich meine Schriftarten (Fonts) in meinem HTML-Project unterbringen soll. Meine derzeitige Struktur sieht wie folgt aus:

Ordner

↳index.html

↳css
 ↳style.css

↳js
 ↳script.js

↳img
 ↳Alle meine Bilder

Wo soll ich die .tff- oder .otf-Dateien unterbringen? Wie macht ihr das? In etwa so:

↳fonts
 ↳Schriftart.tff

Oder wie ?

...zur Frage

HTML schreiben und danach CSS anwenden oder den Code schreiben und sofort mit CSS stylen?

In Bezug auf eine responsive site zum Beispiel.

...zur Frage

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zur Frage

CSS Problem - wie ":hover" richtig anwenden?

Hallo,

- etwas dringend -

ich bin noch Anfängerin und möchte folgenden Effekt erreichen:

wenn ich mit der Maus über irgendeinen Bereich in der Spalte (column, s.u,.) gehe, dann sollen sich die Farben ändern: Hintergrund und p-Text (background: / color:) ist kein Problem. Aber ich habe eben auch eine Headline und einen Button da drin, deren Farben sich ebenfalls ändern müssten, da es sonst nicht mehr lesbar ist.

Ich weiß aber nicht wie ich das richtig anspreche. Einzeln hover-Effekt hinzufügen ist sinnfrei.

Mir würde es auch reichen, wenn sich z.B. einfach alle Farben in der Spalte invertieren oder irgendetwas anderes. Vielleicht ist der hover: Ansatz ja auch falsch? Google hat leider nicht geholfen bisher....

#plan .column:hover {

transform:scale(105%);

box-shadow: 0px 0px 40px rgba(0, 0, 0, .3);

background-color: #FF4772;

color: #C6EBE9;

}

So sieht es bis jetzt aus. Headline schlecht lesbar und den Button sieht man gar nicht

...zur Frage

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zur Frage

Image lässt sich nicht in css stylen?

Guten Abend Gutefrage.net - Community!

Ich habe nun schon seit einigen Minuten folgendes Problem mit CSS:

Ich möchte mit einer class ein Icon stylen, da ich mehrmals das gleiche Icon auf der Website verwende. Wenn ich nun aber in das img-tag die class "small_icon" hinzufüge und in css die class so bearbeite, wie ich das Bild brauche, funktioniert es nicht.

Hier der Code:

CSS

HTML

Der Style wird auf der Website einfach nicht verwendet. Weiß jemand warum oder was ich ändern muss, damit das funktioniert?

MfG, Jonas

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen