HTML/CSS - Images werden nicht geladen?

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • HTML/CSS - Images werden nicht geladen?

    Servus,

    eigentlich ist es mir schon peinlich dies überhaupt zu fragen, aber ich sitze seit zwei Tagen vor diesem Problem und kann es mir nicht erklären.

    Ich will ein Webdesign erstellen, anfänglich via einfachen HTML5 und CSS3. Alles soweit auch gut, nur werden neuerdings bei neuen Dokumenten
    auf meinem lokalen XAMPP Server keine Images mehr geladen bzw. auch nicht auf meinem Liveserver. Ich muss irgendwas falsch machen das mir
    patu keine Images anhand meines Quellcodes (Mark-Ups) ausgegeben werden. Ich hoffe das Ihr den Fehler anhand folgenden Codes identifizieren könnt, ich kann es anscheind nicht!

    Das wäre wirklich sehr freundlich, sonst kann ich leider nicht weitermachen :(

    PS: Bei allen anderen Dokumenten, Seiten, sowohl Lokal als auch Live wird alles richtig ausgegeben und ich habe da auch nichts anderes geschrieben?

    Quellcode

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <title>Hallo</title>
    5. <meta charset="utf-8">
    6. <link rel="stylesheet" href="stylesheet.css">
    7. </head>
    8. <body>
    9. <header>
    11. </header>
    12. <div id="static">
    13. <nav>
    15. </nav>
    16. <footer>
    18. </footer>
    19. </div>
    20. </body>
    21. </html>
    Alles anzeigen

    Quellcode

    1. body, html {
    2. margin: 0px auto;
    3. padding: 0px;
    4. background-image: url(../img/headBG.png);
    5. background-repeat: repeat-x;
    6. background: #d6d6d6;
    7. }
    8. #static {
    9. width: 1000px;
    10. }


    background: #d6d6d6; - Wird allerdings erkannt, somit ist auch das Stylesheet richtig verlinkt und auch die Images liegen im richtigen Ordner.

    best regards
    Mit freundlichen Grüßen

    Liv3pl4y
    Mit freundlichen Grüßen
    best regards

    Liv3pl4y

  • Mir fallen gerade zwei mögliche Dinge ein:

    1) versuchs mal, wenn du den link des Bilds im CSS in " " gelegt hast, nochmal.
    2) nimm mal den link, den du im CSS hast, kopiere ihn ohne die Punkte am Anfang und füge ihn in die adressleiste deines Browsers (vorher natürlich den Namen des aktuellen Dokuments raus löschen) ein, so siehst du, ob du richtig verlinkt hast (ich sag nur Ordnerstruktur, das Problem hatte ich am Anfang auch oft).

    LG

  • *Facepalm* Ich habs:

    Es funktioniert schon und er macht genau das, was du willst:

    Er legt das Bild als Hintergrundbild fest und setzt danach die von die angegeben Farbe als Hintergrund fest.
    Der Fehler dabei: Zuerst das Bild, dann die Farbe. Heißt: Er legt die Farbe über das Bild drüber.

    Des Rästels Lösung:

    Quellcode

    1. body, html {
    2. margin: 0px auto;
    3. padding: 0px;
    4. background: #d6d6d6;
    5. background-image: url(img/headBG.png);
    6. background-repeat: repeat-x;
    7. }


    Hab ich jetzt auch erst rausgefunden, nachdem ich deinen Code kopiert und 10 Minuten lang rumprobiert hab.

  • :thumbsup:

    Oh vielen Dank - Da hätte ich ja noch ewig dran rätseln können, was aber auch ironisch ist das ich es mal
    versucht hatte, indem ich das Background entfernt hatte, aber eben mit relativen Pfad, warum allerdings der
    relative Pfad nach wie vor nicht funktioniert ist mir genau so ein Rätsel.

    Dennoch vielen Dank.
    Mit freundlichen Grüßen
    best regards

    Liv3pl4y

  • Weil du die "../" nicht benutzen darfst.. damit gehst du einen Ordner weiter raus. Das musst du verwenden, wenns wie folgt aussieht:

    Quellcode

    1. | Hauptordner
    2. - index.html (hier: "img/headBG.png")
    3. -| img
    4. -- headBG.png
    5. -| was-weiß-ich
    6. -- index.html (hier: "../img/headBG-png")


    Hoffe, du verstehst, was ich meine.

  • Denke schon. Aber bevor wir hier das abschließen, gleich mal das nächste Problem. Andere Grafiken werden auch nicht ausgeben, wtf?

    Quellcode

    1. #headLine {
    2. background-image: url(img/divline.png);
    3. background-repeat: repeat-x;
    4. }


    Das wäre eine Anweisung (Container) unter dem eben behandelten. Bei der ID headLine handelt es sich verständlicherweise um einen leeren Dov-Container in der index.html.

    Mal im ernst - Wieso wird die denn nun nicht ausgegeben. X(

    Einfach nur Höhenangabe verhgessen ^^
    Mit freundlichen Grüßen
    best regards

    Liv3pl4y

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Liv3pl4y ()

  • Letzteres hatte sich durch die fehlende Höhenangabe (height: 10px;) relativiert.

    Ich habe allerdings ein weiteres Problem mit selbiger Image. Anscheind immitiert bzw. kopiert diese ein Teil der Body-Image einfach auf sich selbst links und rechts, sonst nirgends?

    Siehe Dateianhang.
    Bilder

    • preview.png

      11,35 kB, 450×168, 422 mal angesehen
    Mit freundlichen Grüßen
    best regards

    Liv3pl4y

  • Naja du hast das Problem schon erkannt, nur das diese sich eigentlich gar nicht überlappen können. Denn die Image oben ist genau 100px hoch, dann folgt die andere Image.

    PS: z-index: 50 brachte nichts, deswegen nicht über den z-index im Beispiel wundern:

    Quellcode

    1. body, html {
    2. margin: 0px auto;
    3. padding: 0px;
    4. background: #d6d6d6;
    5. background-image: url(img/headBG.png);
    6. background-repeat: repeat-x;
    7. z-index: 0;
    8. }
    10. #headLine {
    11. height: 10px;
    12. margin: 100px;
    13. background-image: url(img/divline.png);
    14. background-repeat: repeat-x;
    15. z-index: 0;
    16. }
    Alles anzeigen
    Mit freundlichen Grüßen
    best regards

    Liv3pl4y