Bild wird nicht angezeigt

hoola

Hallo liebe Forenmitglieder,

ich bin in Sachen HTML Programmierung leider nicht sonderlich geübt oder erfahren (obwohl es vor Jahren mal Bestand meiner Ausbildung war, ich bin also nicht vollkommen unbelastet ), soll aber nun für meine Firma eine Übergangs-Website erstellen.
Auf dieser Website soll sich lediglich ein Bild befinden.
Diesen Quelltext habe ich bisher "verfasst":

HTML

<head>
<title>www.blabla-GmbH.de</title>
<style type="text/css">
  <!--
* { margin: 0;
    padding: 0;}
/* Höhen- und Breitenanpassung zu 100%; Scrollbar ausblenden */
body, html{ width: 100%;
            height: 100%;
            overflow: hidden;}


</style>
</head>
<body>
<img id="bgImg" src="index-Dateien/ger.jpg" width="100%" height="100%">
<div id="bodyDiv">
</div>
</img>
</body>
</html>

Alles anzeigen

Ich will bezwecken, dass das Bild immer den ganzen Brower voll ausfüllt.
Wenn ich meine index.htm jetzt öffne, funktioniert das auch wunderbar.
Lade ich die Seite dann allerdings auf den FTP-Server hoch und will die Seite via Internet besuchen, wird mir statt des Bildes lediglich ein kleines rotes Kreuz angezeigt.

Weiß vielleicht jemand wo der Fehler liegt?
Es kann ja nur bei dieser Zeile etwas falsch sein, oder?

HTML

<img id="bgImg" src="index-Dateien/ger.jpg" width="100%" height="100%">

Schöne Grüße, hoola.

MrMurphy

Hallo,

da gibt es in der Regel zwei "übliche" Fehlerquellen:

1. Die Groß- und Kleinschreibung von Pfad und Bild stimmen nicht überein. Unter Windows spielt die Groß-/Kleinschreibung keine Rolle, auf den Servern in der Regel schon, da sie meist unter Linux laufen.

Beispiel: "index-Dateien/ger.jpg" und "index-dateien/ger.jpg" verweisen unter Linux und damit auf den meisten Webservern auf zwei unterschiedliche Pfade.

2. Das Bild wurde nicht auf den Server geladen

Gruss

MrMurphy

hoola

Hi,

danke für diese schnelle Antwort!
Aber daran kann es nicht liegen, habe Groß- und Kleinschreibung kontrolliert und alles stimmt.
Das Bild ist ja in dem "index-Dateien" Ordner, den und die Index-Datei lade ich ja gemeinsam auf den FTP-Server .. also am Bild kann es auch nicht liegen.

Mich wundert, dass wenn ich die index.htm direkt öffne, ich dann das Bild sehen kann. Wenn ich die gleichen Dateien aber auf den FTP lade, kein Bild mehr gefunden wird.
Liegt das vielleicht an einigen Einstellungen von FileZilla? (Denn dieses Programm nutze ich, um die HTML hochzuladen)

MFG

EDIT: Ist es von nachteil, dass ich den CSS Teil in die index.htm mit reingeschrieben habe?
Braucht man zwingend eine eigene CSS Datei die dann mit der index.htm verknüpft wird?

EDIT: Problem gelöst ... die Datei hieß ger.JPG.
Mit dem großgeschriebenen JPG konnte er nix anfangen .. mit dem kleinen jpg aber schon .. VERRÜCKT!

Gastl

Zitat von hoola

EDIT: Ist es von nachteil, dass ich den CSS Teil in die index.htm mit reingeschrieben habe?
Braucht man zwingend eine eigene CSS Datei die dann mit der index.htm verknüpft wird?

Nein, braucht man nicht. In deinem kleinen Fall ist es völlig legitim.

Zitat von hoola

EDIT: Problem gelöst ... die Datei hieß ger.JPG.
Mit dem großgeschriebenen JPG konnte er nix anfangen .. mit dem kleinen jpg aber schon .. VERRÜCKT!

Nein, normal. Das mit der Groß-/Kleinschreibung bei Unix wurde dir schon gesagt. Am Besten ist es, man gewöhnt sich eine generelle Schreibweise an. Ich schreibe alle Dateinamen und deren Erweiterungen durchweg klein.

hoola

Hallo Leute, ich bin es nochmal.
Nun habe ich noch ein Problem .. mein Quelltext sieht mitlerweile so aus.

HTML

<head>
<title>www.HUHUHUHU.de</title>
<style type="text/css">
  <!--
* { margin: 0;
    padding: 0;}


/* Höhen- und Breitenanpassung zu 100%; Scrollbar ausblenden */
body, html{ width: 100%;
            height: 100%;
            overflow: hidden;}


/* BG-Image auf unterste Ebene anordnen */
/*#bgImg{ position: absolute;
        top: 0;
        left: 0;
        border: 0;
        z-index: 1;}*/


</style>
</head>
<body>
<img id="bgImg" src="index-Dateien/ger3.jpg" width="100%" height="100%">
<div id="bodyDiv">
  <div id="mainDiv">


  </div>
</div>
</body>
</html>

Alles anzeigen

Mit diesem Quelltext wird leider das Verhältnis der Seiten des Bildes (ger.jpg) nicht beibehalten, sondern immer dem Browser-Fenster angepasst.
Sieht bei einem Wide-Screen echt blöd aus!
Ich würde gerne, dass, wie schon gesagt, das Seitenverhältnis des Bildes gleich bleibt wenn man das Fenster des Browsers verkleinert/vergrößert.
Links und recht des bildes würden sich dann ja zwangsläufig 2 Balken bilden. Die würde ich dann einfach einfarbig machen.

Habt ihr paar Tipps wie ich das umsetzen könnte?

MfG, hoola.

Pascal Kremp

Code

<head>
    <meta charset="utf-8">
    <title>www.HUHUHUHU.de</title>
    <style>
    * { 
        margin: 0;
      padding: 0;
     }




    /* Höhen- und Breitenanpassung zu 100%; Scrollbar ausblenden */
    body, 
    html{ 
      height: 100%;
      overflow: hidden;
        width: 100%;
     }




    /* BG-Image auf unterste Ebene anordnen */
    #bgImg { 
        position: absolute;
      top: 0;
      left: 0;
      border: 0;
      z-index: 1;
      width:100%;
      height:auto;
    }
    </style>
</head>
<body>
<img id="bgImg" src="index-Dateien/ger3.jpg" alt="">
<div id="bodyDiv">
  <div id="mainDiv">
  </div>
</div>
</body>

Alles anzeigen

hoola

Super, danke Pascal!

Ich habe deine beiden Zeilen jetzt aber mal umgedreht:

HTML

width:auto; 
height:100%;

aber is ja am ende das gleiche.
Nun entsteht aber immer nur am rechten rand ein weißer streifen, wenn ich das fenster verkleinere.
Wie kriege ich denn jetzt das Bild zentriert, damit sich links und recht ein gleich großer streifen bildet?

Kann ich dem Streifen auch noch eine Farbe zuordnen?

MfG, hoola.

EDIT: das mit der Hintergrundfarbe hat sich erledigt, das hab ich. Aber das Bild zentrieren ?_?

Pascal Kremp

Img mit einem div-Tag wrappen und text-align:center; nutzen.

hoola

Zitat von Pascal Kremp

Img mit einem div-Tag wrappen und text-align:center; nutzen.

Ähm, ich versteh leider nur Bahnhof.
Wie "wrap" ich denn ein div-Tag?

Pascal Kremp

to wrap: umschließen. Schonmal nen Wrap gegessen?

HTML

<div style="text-align:center">
    <img src="" class="deinBild">
</div>

hoola

Haha, ja einen wrap hab ich schonmal gegessen .. macht dann auch Sinn das Wort
Nun Skaliert er aber das Bild nicht mehr wenn ich den Browser verkleiner oder vergrößer, sondern lässt es bei 100%.
Geht das noch anders?

Pascal Kremp

Im Grunde hast du alle Informationen um das nu selber zu lösen!

Code

<!DOCTYPE html>
<style>
  body,
  html {
   height: 100%;
   margin: 0;
   padding: 0;
   width: 100%;   
  }
  .background { 
   background: yellow;
   height: 100%;
   text-align: center;
   z-index: 1;   
  }
  .background img {
    height:100%;
    width:auto;
  }
  #content {
    /**

      Was immer du willst! :)




    **/
    z-index: 2;
  }
</style>
<div class="background">
  <img src="" alt="">
</div>
<div id="content">
  <h1>Yeahaaa</h1>
</div>

Alles anzeigen

hoola

sorry doppelpost

Tags