Einsteiger - background image wird nicht angezeigt.

hadi_macht_peng

Hi Leute,

ich hab ein seltsames Problem und wenig Erfahrung. Leider raff ich so gar nicht was ich falsch mache... Hoffe Ihr könnt mir helfen.

Vor der Freischaltung unseres Webspace bei strato hab ich auf einem 1und1 webspace angefangen eine Seite für unseren Clan zu bauen.
Bei 1und1 siehts so aus wie ich mir das gedacht habe, bei strato wird das Hintergrund Bild nicht angezeigt. Probieren schon seit etlichen Stunden.
hab natürlich erst mal den Fehler im Code gesucht. Jetzt hab ich verzweifelt aufgegeben... Mir geht's erst mal nur um die index.php. Bei den restlichen Seiten muss ich noch den Quelltext bereinigen.

1und1 - http://www.lehei.de/TGU/index.php
strato - http://www.thegamingunit.de

Ich hoffe Ihr könnt mir helfen. Der Quelltext besteht aus mehreren teilen: 3 PHP Dateien + 3 CSS Dateien. Leider hab ich wenig Erfahrung mit CSS, ist ewig her das ich ne Seite gebaut hab.
Vielen Dank im Voraus für Eure Hilfe. Ich denke der Fehler ist in der style_basic oder der index.php. Bitte lasst euch nicht von der länge abschrecken, das meiste ist bloß der content, wollte aber sich gehen dass das Problem nicht da entsteht.:

navi.php:

PHP

<!--
Anfang Navi
-->


<div id="topnavi" align="left"></div>
<div class="wrapper_navi">
<ul id="navibereich">
  <li id="navi01"><a href="index.php">Home</a></li>
  <li id="navi09"><a href="ueber_uns.php">&Uuml;ber uns</a></li>
  <li id="navi04"><a href="regeln.php">Clan Regeln</a></li>
  <li id="navi02"><a href="spiele.php">Spiele</a></li>
  <li id="navi03"><a href="videos.php">Videos</a></li>
  <li id="navi10"><a href="twitch.php">Twitch</a></li>
  <li id="navi05"><a href="kontakt.php">Kontakt</a></li>
  <li id="navi08"><a href="bewerbung.php">Mitglied werden</a></li>
</ul>
</div>


<!--
Ende Navi
-->

Alles anzeigen

footer.php:

PHP

<!--
Anfang Footer
-->




<div id="footer" align="center">
<ul id="navi_footer" align="center" >
  <li id="navi06"><a href="impressum.php">Impressum</a></li>
  <li id="navi07"><a href="datenschutz.php">Datenschutz</a></li>
</ul>
</div>


<!--
Ende Footer
-->

Alles anzeigen

index.php:

PHP

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TGU - the gaming unit -- Willkommen</title>
<meta name="description" content="TGU - the gaming unit - Willkommen auf unserer Homepage. Wir sind ein Battlefield-Clan, spielen aber auch andere Games">
<meta name="keywords" content="TGU, gaming, clan, Multigaming, Battlefield, PUBG, Player, Battlegrounds, Ring, Elysium, League, Legends, Mitglied">
<meta name="author" content="TGU - the gaming unit">
<meta name="editor" content="html-editor phase 5">
<link rel="stylesheet" href="style_basic.css" type="text/css">
<link rel="stylesheet" href="style_navi.css" type="text/css">
<link rel="stylesheet" href="style_index.css" type="text/css">
</head>
<body id="Home">


<!--
Anfang Navi
-->
<?php
include ("navi.php");
?>
<!--
Ende Navi
-->


<!--
Anfang Banner
-->
<div id="banner">


<br>
<br>


<div id="TGU">
TGU
</div>
<div id="TGU2">
the gaming unit
</div>


</div>
<!--
Ende Banner
-->


<!--
Anfang Content
-->
<div id="trenner"></div>
<div class="wrapper_content">


<div id="links" align="left">
<h1>&Uuml;ber Uns</h1>
Wir legen Wert auf einen freundlichen Umgang miteinander, f&uuml;r uns steht der Spa&szlig; am Spiel im Vordergrund. 
<br>
<br>
Wir sind &uuml;berwiegend zwischen 20 und 40 Jahre alt und haben verschiedenste Hintergr&uuml;nde. Vom Studenten/in bis zum Familienvater ist alles mit dabei und willkommen.
<br>
<br>
<a href="ueber_uns.php">weiter lesen...</a>
<br>
<br>
<br>
<br>
<br>
<h1>Clan Regeln</h1>
Die Kurzversion - sein kein Arsch. 
<br>  
<br>
Im Gro&szlig;en und Ganzen gelten bei uns die ganz normalen Regeln f&uuml;r ein gesundes Miteinander. Wir sind doch alle hier um Spa&szlig; zu haben. 
<br>
<br>
F&uuml;r alle weiteren Details bitte einmal unten auf weiter lesen klicken.
<br>
<br>
<a href="regeln.php">weiter lesen...</a>
</div>


<div id="mitte" align="left">
<h1>Spiele</h1>
Aktuell spielen wir nat&uuml;rlich viel Battlefield V. Das hei&szlig;t aber nicht, dass wir nicht auch mal was anderes zocken. Es gibt bei uns auch aktive League of Legends Spieler, wir spielen PUBG, Ring of Elysium und andere Games.
<br>
<br>
<a href="spiele.php">weiter lesen...</a>
<br>
<br>
<h1>Mitglied werden</h1>
Haben wir Euer Interesse geweckt?!
<br>
Das freut uns! 
<br>
<br>
Es w&auml;re sch&ouml;n wenn Ihr dem unten-stehenden Link zum Bewerbungsformular folgt. Dann h&auml;tten wir schon mal ein paar Infos &uuml;ber Euch. 
<br>
<br>
Alternativ k&ouml;nnt Ihr uns aber auch ganz unb&uuml;rokratisch direkt auf unserem Discord ansprechen. Unsere Clan Leader sind aber nat&uuml;rlich nicht zu jeder Zeit online.
<br>
<br>
<a href="bewerbung.php">zum Bewerbungs-Formular</a>
</div>


<div id="rechts" align="left">
<h1>Discord</h1>
<iframe src="https://discordapp.com/widget?id=428195849760407562&theme=dark" width="260" height="555" allowtransparency="true" frameborder="0"></iframe>
<br>
<br>
<br>
</div>


<p class="back">  
<br>
</p>


</div>
<!--
Ende Content
-->


<!--
Anfang Footer
-->
<?php
include ("footer.php");
?>


<!--
Ende Footer
-->


</body>
</html>

Alles anzeigen

style_navi.css (für alle Seiten):

Code

.wrapper_navi {
    width: 900px;
    margin: 0 auto;
    background-color: #000000;
}


#topnavi {
  position: realtive;
  height: 50px; width: 900px;
  background-color: #000000;        /* Hintergrundfarbe für die Navigation */
}


#navibereich {
  position: realtive;
  height: auto; width: 900px;
  background-color: #000000;        /* Hintergrundfarbe für die Navigation */
  padding: 4px 0;                   /* Innenabstand: oben/unten 4px, li/re 0 */
  border-top: 0px solid #668BCC;    /* Rahmenlinie oben */
  border-bottom: 5px solid #000000; /* Rahmenlinie unten */
  margin: 0;                        /* Keinen Außenabstand */
  font-family: Impact;                      /* Schriftart */
  font-size: 20px;
}


#navibereich li {
  display: inline;            /* Listenelemente nebeneinander */
  list-style-type: none;      /* Aufzählungszeichen entfernen */
}


#navibereich a {
  color: #fb911b;                  /* Schriftfarbe schwarz */
  text-decoration: none;         /* Unterstreichung entfernen */
  padding: 4px 8px;              /* oben/unten 4px, re/li 8px */
  font-family: Impact;
  }


#navibereich a:hover {
  background-color: #fb911b;
  color: #000000;
  font-family: Impact;
}


#navibereich a:hover,        /* mit Komma am Ende */
#Home #navi01 a,       /* mit Komma am Ende */
#Spiele #navi02 a,       /* mit Komma am Ende */
#Videos #navi03 a,       /* mit Komma am Ende */
#Twitch #navi10 a,       /* mit Komma am Ende */
#Ueber_uns #navi09 a,       /* mit Komma am Ende */
#Regeln #navi04 a,       /* mit Komma am Ende */
#Kontakt #navi05 a,
#Bewerbung #navi08 a,
#Forum #navi11 a
 {    /* ohne Komma am Ende */
  background-color: #fb911b;
  color: #000000;
  font-family: Impact;
}


[COLOR=#0000ff]/* Ende Navigation */






/* footer */[/COLOR]


#navi_footer {
  position: realtive;
  background-color: #000000;        /* Hintergrundfarbe für die Navigation */
  padding: 4px 0;                   /* Innenabstand: oben/unten 4px, li/re 0 */
  margin: 0;                        /* Keinen Außenabstand */
  font-family: Impact;                      /* Schriftart */
  font-size: 20px;
}


#navi_footer li {
  display: inline;            /* Listenelemente nebeneinander */
  list-style-type: none;      /* Aufzählungszeichen entfernen */
}


#navi_footer a {
  color: #fb911b;                  /* Schriftfarbe schwarz */
  text-decoration: none;         /* Unterstreichung entfernen */
  padding: 4px 8px;              /* oben/unten 4px, re/li 8px */
  font-family: Impact;
  }


#navi_footer a:hover {
  background-color: #fb911b;
  color: #000000;
  font-family: Impact;
}


#navi_footer a:hover,        /* mit Komma am Ende */
#Impressum #navi06 a,       /* mit Komma am Ende */
#Datenschutz #navi07 a,       /* mit Komma am Ende */
  background-color: #fb911b;
  color: #000000;
  font-family: Impact;
}
[COLOR=#0000ff]/* Ende Footer *[/COLOR]




[B]style_basic.css (für alle Seiten):[/B]
body {
    background-color: #000000;
    margin: 0;
    padding: 0;
}


#banner {
  position: realtive;
  background-position: center;
  height: 500px; width: 100%;
  background-image: url("gfx/banner2.jpg");
  border-top: 2px solid #2F2F2F;
  border-bottom: 2px solid #2F2F2F;
}


#TGU {
  position: relative;
  color: #fb911b;                  /* Schriftfarbe schwarz */
  font-family: Impact;
  font-size: 100px;
  width: 900px;
  margin: 0 auto;
  line-height: 100px;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;
}


#TGU2 {
  position: realtive;
  color: #fb911b;                  /* Schriftfarbe schwarz */
  font-family: Impact;
  font-size: 40px;
  width: 900px;
  margin: 0 auto;
  line-height: 40px;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;
}


#trenner {
  position: realtive;
  height: 20px; width: 900px;
  background-color: #000000;        /* Hintergrundfarbe für die Navigation */
}


.wrapper_content {
    width: 900px;
    margin: 0 auto;
    background-color: #000000;
    color: #707070;                  /* Schriftfarbe schwarz */
    font-family: Arial;
    font-weight: 300;
    text-align: left;
}


.wrapper_content h1{
  color: #fb911b ;                  /* Schriftfarbe schwarz */
  font-family: Impact;
  font-size: 35px;
  line-height: 40px;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;
}


.wrapper_content h2{
  color: #fb911b ;                  /* Schriftfarbe schwarz */
  font-family: Arial;
  font-size: 20px;
  line-height: 20px;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
             #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px;
}


.wrapper_content a{
color:#fb911b;
font-weight:bold;
text-decoration:none;
}


.wrapper_content a:hover{
color:#FF3F00;
font-weight:bold;
text-decoration:none;
}




[B]style_index.css (für die index.php):[/B]
#links {
  float: left;
  width: 30%;
  background-color: #000000;
}


#rechts {
  float: left;
  width: 32%;
  background-color: #000000;
}


#mitte {
  float: left;
  width: 30%;
  margin: 0px 2%;
  background-color: #000000;
}


 p.back {
  clear: both;
  text-align: center;
}

Alles anzeigen

basti1012

Bei den angegebenen Bild Link in dein Quellcode
http://www.thegamingunit.de/gfx/banner.jpg
Ist kein Bild vorhanden.

Hier bei den gepostet Code hast du den Link drinne
gfx/banner2.jpg drinne ist aber auch kein Bild zu sehen. Überprüfe a den Pfad und Kucke ob da auch ein Bild zu sehen ist.
Rufe erstmal nur den Link des Bildes über den Browser auf. Wenn das geht ,geht der rest dann auch mit den richtigen pfad im Code

hadi_macht_peng

Besten Dank für die schnelle Antwort.

Du hast recht, hab aber trotzdem noch ein Problem.
Wenn ich per FTP drauf geh ist das Bild an Ort und Stelle.
Über den Browser kann ich es aber nicht aufrufen.

Habs jetzt ausprobiert mit Bild im Stammverzeichnis. Auch das funktioniert nicht.

Hast du noch eine Idee?

- - - Aktualisiert - - -

Hab mein Problem gefunden. Man achte auf Groß und Kleinschreibung. rrrrrrrrrrrrrrrrrr

Trotzdem besten Dank. Ohne deinen Tip wär ich nie drauf gekommen...

Gastl

Und wenn du konsequent auf UTF-8 setzt, kannst du solche Spielchen in Zukunft lassen.

Code

[COLOR=#000000][COLOR=#007700]<[/COLOR][COLOR=#0000BB]li id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#DD0000]"navi09"[/COLOR][COLOR=#007700]><[/COLOR][COLOR=#0000BB]a href[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#DD0000]"ueber_uns.php"[/COLOR][COLOR=#007700]>&[/COLOR][COLOR=#0000BB]Uuml[/COLOR][COLOR=#007700];[/COLOR][COLOR=#0000BB]ber uns[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000BB]a[/COLOR][COLOR=#007700]></[/COLOR][COLOR=#0000BB]li[/COLOR][COLOR=#007700]>[/COLOR][/COLOR]

Man kann dann dies schreiben:

Code

[COLOR=#000000][COLOR=#007700]<[/COLOR][COLOR=#0000BB]li id[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#DD0000]"navi09"[/COLOR][COLOR=#007700]><[/COLOR][COLOR=#0000BB]a href[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#DD0000]"ueber_uns.php"[/COLOR][COLOR=#007700]>Ü[/COLOR][COLOR=#007700][/COLOR][COLOR=#0000BB]ber uns[/COLOR][COLOR=#007700]</[/COLOR][COLOR=#0000BB]a[/COLOR][COLOR=#007700]></[/COLOR][COLOR=#0000BB]li[/COLOR][COLOR=#007700]>[/COLOR][/COLOR]

Im Dateinamen ist ue in Ordnung.

MfG

Einsteiger - background image wird nicht angezeigt.

Tags

Benutzer online in diesem Thema